UnhandledPromiseRejectionWarning：错误：在 8080 和 8083 之间找不到开放端口

编程问答 2022-08-07

问题描述

我正在构建一个没有 create-react-app 的 React 应用程序。我已经使用旧版本的 babel 和 webpack 包抛出这个错误。

我应该切换回当前版本的 babel 还是我无法理解 htmlwebpackplugin 的问题。

有人能帮我吗，谢谢。

testonit@1.0.0 启动 C:\Users\aksha\Projects\testonit > webpack-dev-server --mode development --open

(node:13772) UnhandledPromiseRejectionWarning: Error: No open ports found in between 8080 and 8083
    at C:\Users\aksha\Projects\testonit\node_modules\portfinder\lib\portfinder.js:200:25
    at C:\Users\aksha\Projects\testonit\node_modules\async\dist\async.js:473:16
    at replenish (C:\Users\aksha\Projects\testonit\node_modules\async\dist\async.js:1006:25)      
    at iterateeCallback (C:\Users\aksha\Projects\testonit\node_modules\async\dist\async.js:995:17)
    at C:\Users\aksha\Projects\testonit\node_modules\async\dist\async.js:969:16
    at C:\Users\aksha\Projects\testonit\node_modules\portfinder\lib\portfinder.js:157:16
    at Server.onListen (C:\Users\aksha\Projects\testonit\node_modules\portfinder\lib\portfinder.js:43:7)
    at Object.onceWrapper (events.js:421:28)
    at Server.emit (events.js:315:20)
    at emitListeningNT (net.js:1347:10)
(node:13772) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block,or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection,use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:13772) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future,promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
[BABEL] Note: The code generator has deoptimised the styling of "C:/Users/aksha/Projects/testonit/node_modules/react-dom/cjs/react-dom.development.js" as it exceeds 
the max of "500KB".
i ｢wdm｣: Hash: 74490858783db7635539
Version: webpack 4.32.2
Time: 11683ms
Built at: 01/24/2021 6:52:51 PM
          Asset       Size  Chunks             Chunk Names
     index.html  280 bytes          [emitted]
index_bundle.js   1.24 MiB    main  [emitted]  main
Entrypoint main = index_bundle.js
[0] multi (webpack)-dev-server/client?http://localhost ./src/index.js 40 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 9.55 KiB {main} [built]
[./node_modules/querystring-es3/index.js] 126 bytes {main} [built]
[./node_modules/react-dom/index.js] 1.32 KiB {main} [built]
[./node_modules/react/index.js] 189 bytes {main} [built]
[./node_modules/url/url.js] 22.6 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost] (webpack)-dev-server/client?http://localhost 7.48 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/getCurrentScriptSource.js] (webpack)-dev-server/client/utils/getCurrentScriptSource.js 658 bytes {main} [built]      
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.64 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/index.js] 477 bytes {main} [built]
    + 26 hidden modules
Child HtmlWebpackCompiler:
     1 asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 506 bytes {HtmlWebpackPlugin_0} [built]
i ｢wdm｣: Compiled successfully.


Webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',output: {
        path: path.join(__dirname,'/dist'),filename: 'index_bundle.js'
    },module:{
        rules:[
            {
                test: /\.js$/,exclude: /nodemodules/,use: {
                    loader: 'babel-loader'
                }
            }
        ]
    },plugins:[
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}

package.json

{
  "name": "testonit","version": "1.0.0","description": "Boilerplate for Reactapp","main": "index.js","scripts": {
    "start": "webpack-dev-server --mode development --open ","build": "webpack --mode production"
  },"author": "","license": "MIT","dependencies": {
    "react": "^17.0.1","react-dom": "^17.0.1"
  },"devDependencies": {
    "babel-core": "^6.26.0","babel-loader": "^7.1.4","babel-preset-env": "^1.6.1","babel-preset-react": "^6.24.1","html-webpack-plugin": "^4.5.1","webpack": "^4.32.2","webpack-cli": "^3.3.2","webpack-dev-server": "^3.5.1"
  }
}


babelrc
{
    "presets": ["env","react"]
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

package.jsonreactjsreactjsreactjsreactjswebpackwebpackwebpackwebpack-dev-server