React Js 项目未运行 Webpack 本地服务器

Posted

技术标签:

【中文标题】React Js 项目未运行 Webpack 本地服务器【英文标题】:React Js Project not running Webpack local server 【发布时间】:2017-11-29 08:23:35 【问题描述】:

我刚刚关闭了我的本地 react 应用程序并尝试重新启动它,但它一直说它在我的脚本启动时失败:dev 是否​​有任何人能够帮助我调试它吐出的大量日志我不确定在哪里它的错误。

这是我的 package.json


  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": 
  "babel-core": "^6.17.0",
  "babel-loader": "^6.2.0",
  "babel-plugin-add-module-exports": "^0.1.2",
  "babel-plugin-react-html-attrs": "^2.0.0",
  "babel-plugin-transform-class-properties": "^6.3.13",
  "babel-plugin-transform-decorators-legacy": "^1.3.4",
  "babel-preset-es2015": "^6.3.13",
  "babel-preset-react": "^6.3.13",
  "babel-preset-stage-0": "^6.3.13",
  "history": "^1.17.0",
  "json-loader": "^0.5.4",
  "nouislider": "^10.0.0",
  "prop-types": "^15.5.10",
  "react": "^0.14.6",
  "react-dom": "^0.14.6",
  "react-html5-slider": "^0.2.1",
  "react-input-range": "^1.1.4",
  "react-modal-bootstrap": "^1.1.1",
  "react-nbsp": "^1.1.0",
  "react-rangeslider": "^2.1.0",
  "react-rangeslider-extended": "^1.0.10",
  "react-router": "^1.0.3",
  "react-router-redux": "^4.0.8",
  "webpack": "^1.12.9",
  "webpack-dev-server": "^1.14.1"
,
"devDependencies": 
  "css-loader": "^0.25.0",
  "ignore-loader": "^0.1.2",
  "ignore-styles": "^5.0.1",
  "reactjs-css-load": "^1.0.0"
,
"scripts": 
  "start": "npm run start:dev",
  "start:dev": "webpack-dev-server --content-base src --history-api-fallback"
,
"author": "",
"license": "ISC"

这是我得到的错误

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'start' ]
2 info using npm@3.10.10
3 info using node@v6.11.0
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle test@1.0.0~prestart: test@1.0.0
6 silly lifecycle test@1.0.0~prestart: no script for prestart, continuing
7 info lifecycle test@1.0.0~start: test@1.0.0
8 verbose lifecycle test@1.0.0~start: unsafe-perm in lifecycle true
9 verbose lifecycle test@1.0.0~start: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;C:\Users\wilsona.CHECKMATE\Desktop\reactapp\Workspace\bootstrap\app\node_modules\.bin;C:\Users\wilsona.CHECKMATE\AppData\Roaming\npm;C:\Program Files\nodejs\;C:\ProgramData\Oracle\Java\javapath;C:\Program Files (x86)\Intel\iCLS Client\;C:\Program Files\Intel\iCLS Client\;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files\IBM\SPSS\Statistics\24\JRE\bin;C:\Program Files (x86)\Skype\Phone\;C:\Program Files\Microsoft SQL Server\110\DTS\Binn\;C:\Program Files (x86)\Microsoft SQL Server\110\Tools\Binn\;C:\Program Files\Microsoft SQL Server\110\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\110\Tools\Binn\ManagementStudio\;C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\IDE\PrivateAssemblies\;C:\Program Files (x86)\Microsoft SQL Server\110\DTS\Binn\;C:\Program Files\nodejs\;C:\Users\wilsona.CHECKMATE\AppData\Local\atom\bin;C:\Users\wilsona.CHECKMATE\AppData\Roaming\npm
10 verbose lifecycle test@1.0.0~start: CWD: C:\Users\wilsona.CHECKMATE\Desktop\reactapp\Workspace\bootstrap\app
11 silly lifecycle test@1.0.0~start: Args: [ '/d /s /c', 'npm run start:dev' ]
12 silly lifecycle test@1.0.0~start: Returned: code: 1  signal: null
13 info lifecycle test@1.0.0~start: Failed to exec start script
14 verbose stack Error: test@1.0.0 start: `npm run start:dev`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:255:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:891:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid test@1.0.0
16 verbose cwd         C:\Users\wilsona.CHECKMATE\Desktop\reactapp\Workspace\bootstrap\app
17 error Windows_NT 6.1.7601
18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
19 error node v6.11.0
20 error npm  v3.10.10
21 error code ELIFECYCLE
22 error test@1.0.0 start: `npm run start:dev`
22 error Exit status 1
23 error Failed at the test@1.0.0 start script 'npm run start:dev'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the test package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     npm run start:dev
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs test
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls test
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

请帮忙

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = 
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/client.js",
  module: 
    loaders: [
      
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader', 'ignore-loader',
        query: 
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy', ]
        
      
    ]
  ,
  output: 
    path: __dirname + "/src/",
   filename: "client.min.js"
  ,
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin( mangle: false, sourcemap: false ),
  ],
;

这是请求的错误

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'start' ]
2 info using npm@3.10.10
3 info using node@v6.11.0
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle test@1.0.0~prestart: test@1.0.0
6 silly lifecycle test@1.0.0~prestart: no script for prestart, continuing
7 info lifecycle test@1.0.0~start: test@1.0.0
8 verbose lifecycle test@1.0.0~start: unsafe-perm in lifecycle true
9 verbose lifecycle test@1.0.0~start: PATH: C:\Program     Files\nodejs\node_modules\npm\bin\node-gyp-bin;C:\Users\wilsona.CHECKMATE\Desktop\reactapp\Workspace\bootstrap\app\node_modules\.bin;C:\Users\wilsona.CHECKMATE\AppData\Roaming\npm;C:\Program Files\nodejs\;C:\ProgramData\Oracle\Java\javapath;C:\Program Files (x86)\Intel\iCLS Client\;C:\Program Files\Intel\iCLS Client\;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files\IBM\SPSS\Statistics\24\JRE\bin;C:\Program Files (x86)\Skype\Phone\;C:\Program Files\Microsoft SQL Server\110\DTS\Binn\;C:\Program Files (x86)\Microsoft SQL Server\110\Tools\Binn\;C:\Program Files\Microsoft SQL Server\110\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\110\Tools\Binn\ManagementStudio\;C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\IDE\PrivateAssemblies\;C:\Program Files (x86)\Microsoft SQL Server\110\DTS\Binn\;C:\Program Files\nodejs\;C:\Users\wilsona.CHECKMATE\AppData\Local\atom\bin;C:\Users\wilsona.CHECKMATE\AppData\Roaming\npm
10 verbose lifecycle test@1.0.0~start: CWD: C:\Users\wilsona.CHECKMATE\Desktop\reactapp\Workspace\bootstrap\app
11 silly lifecycle test@1.0.0~start: Args: [ '/d /s /c',
11 silly lifecycle   'webpack-dev-server --content-base src --history-api-fallback' ]
12 silly lifecycle test@1.0.0~start: Returned: code: 1  signal: null
13 info lifecycle test@1.0.0~start: Failed to exec start script
14 verbose stack Error: test@1.0.0 start: `webpack-dev-server --content-base src --history-api-fallback`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:255:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:891:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid test@1.0.0
16 verbose cwd C:\Users\wilsona.CHECKMATE\Desktop\reactapp\Workspace\bootstrap\app
17 error Windows_NT 6.1.7601
18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
19 error node v6.11.0
20 error npm  v3.10.10
21 error code ELIFECYCLE
22 error test@1.0.0 start: `webpack-dev-server --content-base src --history-api-fallback`
22 error Exit status 1
23 error Failed at the test@1.0.0 start script 'webpack-dev-server --content-base src --history-api-fallback'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the test package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     webpack-dev-server --content-base src --history-api-fallback
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs test
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls test
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

【问题讨论】:

试试这个命令npm start @Sag1v npm start 什么?我要添加什么修饰符? 这是您的启动脚本的名称。它将运行start 脚本,该脚本将调用start:dev。我不确定,但我认为您不能在start 上致电run。无论如何,如果它不工作发布你的 webpack 代码 你可以运行这个:webpack-dev-server --content-base src --history-api-fallback 吗? @MohamedIsmat 不,错误在 test@1.0.0 启动脚本 'webpack-dev-server --content-base src --history-api-fallback' 时也失败了 【参考方案1】:

我似乎已经解决了我更新 node 和 npm 的问题,然后删除了所有 node_modules 并再次安装 npm,然后我将 [] 放在 'babel-loader' 周围并删除了 'ignore-loader'

【讨论】:

很高兴听到这个消息!我希望错误更清楚一点。 @MohamedIsmat 是的,错误并不清楚,而且最奇怪的是我没有在该文件中添加任何内容或在大约 3 天内以任何方式更改它,所以这很奇怪

以上是关于React Js 项目未运行 Webpack 本地服务器的主要内容,如果未能解决你的问题,请参考以下文章

TypeError:无法读取未定义的属性“javascript”+ terser webpack 插件+ react js

webpack+babel项目在IE下报Promise未定义错误引出的思考

vue.js cli 项目未加载本地字体

Webpack:使用 Bundle.js,“未定义 React”

npm+webpack+babel+react安装

React 项目中未定义 App.js