【发布时间】：2019-02-19 22:30:51
【问题描述】：
终端：
Version: webpack 4.28.3
Time: 940ms
Built at: 02/19/2019 10:11:22 PM
1 asset
Entrypoint app = bundle.js
[0] ./client/src/index.js 4.6 KiB {0} [built] [failed] [1 error]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
ERROR in ./client/src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: I:\React apps\reactexpress\client\src\index.js: Unexpected token (8:16)
6 | import * as serviceWorker from "./serviceWorker";
7 |
> 8 | ReactDOM.render(<App />, document.getElementById("root"));
| ^
9 |
10 | // If you want your app to work offline and load faster, you can change
11 | // unregister() to register() below. Note this comes with some pitfalls.
at Parser.raise (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:3831:17)
at Parser.unexpected (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:5143:16)
at Parser.parseExprAtom (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:6283:20)
at Parser.parseExprSubscripts (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:5862:23)
at Parser.parseMaybeUnary (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:5842:21)
at Parser.parseExprOps (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:5729:23)
at Parser.parseMaybeConditional (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:5702:23)
at Parser.parseMaybeAssign (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:5647:21)
at Parser.parseExprListItem (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:6940:18)
at Parser.parseCallExpressionArguments (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:6070:22)
at Parser.parseSubscript (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:5965:29)
at Parser.parseSubscripts (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:5882:19)
at Parser.parseExprSubscripts (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:5872:17)
at Parser.parseMaybeUnary (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:5842:21)
at Parser.parseExprOps (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:5729:23)
at Parser.parseMaybeConditional (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:5702:23)
at Parser.parseMaybeAssign (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:5647:21)
at Parser.parseExpression (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:5595:23)
at Parser.parseStatementContent (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:7378:23)
at Parser.parseStatement (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:7243:17)
at Parser.parseBlockOrModuleBlockBody (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:7810:25)
at Parser.parseBlockBody (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:7797:10)
at Parser.parseTopLevel (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:7181:10)
at Parser.parse (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:8658:17)
at parse (I:\React apps\reactexpress\node_modules\@babel\parser\lib\index.js:10658:38)
at parser (I:\React apps\reactexpress\node_modules\@babel\core\lib\transformation\normalize-file.js:170:34)
at normalizeFile (I:\React apps\reactexpress\node_modules\@babel\core\lib\transformation\normalize-file.js:138:11)
at runSync (I:\React apps\reactexpress\node_modules\@babel\core\lib\transformation\index.js:44:43)
at runAsync (I:\React apps\reactexpress\node_modules\@babel\core\lib\transformation\index.js:35:14)
at process.nextTick (I:\React apps\reactexpress\node_modules\@babel\core\lib\transform.js:34:34)
at process._tickCallback (internal/process/next_tick.js:61:11)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! reactexpress@1.0.0 webpack: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the reactexpress@1.0.0 webpack script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Jesal\AppData\Roaming\npm-cache\_logs\2019-02-19T22_11_22_659Z-debug.log
调试日志：
0 info it worked if it ends with ok
1 verbose cli [ 'H:\\Node\\node.exe',
1 verbose cli 'C:\\Users\\Jesal\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'webpack' ]
2 info using npm@6.8.0
3 info using node@v10.15.1
4 verbose run-script [ 'prewebpack', 'webpack', 'postwebpack' ]
5 info lifecycle reactexpress@1.0.0~prewebpack: reactexpress@1.0.0
6 info lifecycle reactexpress@1.0.0~webpack: reactexpress@1.0.0
7 verbose lifecycle reactexpress@1.0.0~webpack: unsafe-perm in lifecycle true
8 verbose lifecycle reactexpress@1.0.0~webpack: PATH: C:\Users\Jesal\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;I:\React apps\reactexpress\node_modules\.bin;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\NVIDIA Corporation\NVIDIA NvDLISR;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;H:\Node\;C:\Program Files\Git\cmd;C:\Users\Jesal\AppData\Local\Microsoft\WindowsApps;C:\Users\Jesal\AppData\Roaming\npm;C:\Users\Jesal\AppData\Local\Programs\Microsoft VS Code\bin
9 verbose lifecycle reactexpress@1.0.0~webpack: CWD: I:\React apps\reactexpress
10 silly lifecycle reactexpress@1.0.0~webpack: Args: [ '/d /s /c', 'webpack' ]
11 silly lifecycle reactexpress@1.0.0~webpack: Returned: code: 2 signal: null
12 info lifecycle reactexpress@1.0.0~webpack: Failed to exec webpack script
13 verbose stack Error: reactexpress@1.0.0 webpack: `webpack`
13 verbose stack Exit status 2
13 verbose stack at EventEmitter.<anonymous> (C:\Users\Jesal\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16)
13 verbose stack at EventEmitter.emit (events.js:189:13)
13 verbose stack at ChildProcess.<anonymous> (C:\Users\Jesal\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:189:13)
13 verbose stack at maybeClose (internal/child_process.js:970:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid reactexpress@1.0.0
15 verbose cwd I:\React apps\reactexpress
16 verbose Windows_NT 10.0.17134
17 verbose argv "H:\\Node\\node.exe" "C:\\Users\\Jesal\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "webpack"
18 verbose node v10.15.1
19 verbose npm v6.8.0
20 error code ELIFECYCLE
21 error errno 2
22 error reactexpress@1.0.0 webpack: `webpack`
22 error Exit status 2
23 error Failed at the reactexpress@1.0.0 webpack script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]
注意：我确实有一个 .babelrc 文件，其中包含以下内容：
{
"presets": ["es2015", "react"]
}
我的webpack.config.js在下面：
const path = require("path");
module.exports = {
entry: {
app: "./client/src/index.js"
},
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [
{
test: /\.js$/, // include .js files
exclude: /node_modules/, // exclude any and all files in the node_modules folder
loader: "babel-loader"
},
{
test: /\.jsx$/, // include .js files
exclude: /node_modules/, // exclude any and all files in the node_modules folder
loader: "babel-loader"
}
]
}
};
我已经尝试了可能的途径，例如这篇文章中建议的途径：
即使错误与我专门与 webpack 相关的错误相比有所不同。我在网上搜索了任何与我遇到的问题类似的东西，但无济于事。任何帮助将不胜感激。提前致谢。
编辑：
package.json（一级根文件夹 - 与后端模块有关的所有内容都在此文件中）如下：
{
"name": "reactexpress",
"version": "1.0.0",
"description": "Boilerplate for React and Express",
"main": "server.js",
"scripts": {
"client-install": "cd client && npm install",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"webpack": "node_modules/.bin/webpack"
},
"author": "Jesal Patel",
"license": "ISC",
"dependencies": {
"concurrently": "^4.1.0",
"express": "^4.16.4",
"react-dom": "^16.8.2"
},
"devDependencies": {
"@babel/core": "^7.3.3",
"@babel/preset-env": "^7.3.1",
"@babel/preset-react": "^7.0.0",
"babel": "^6.23.0",
"babel-cli": "^6.26.0",
"babel-loader": "^8.0.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"nodemon": "^1.18.10",
"webpack": "^4.28.3",
"webpack-cli": "^3.2.3"
}
}
顶部的图像显示了我的文件夹结构。现在，后端的所有内容都位于“reactexpress”的根目录下，并且在clientfolder 内的文件中有一个单独的package.jsonfile，其中还包含srcfolder，其中包含我的所有组件，例如App.js连同 index.js 文件。不确定这是否与问题有关，但我想我还是会把它贴在这里。
【问题讨论】：
标签： reactjs webpack babeljs webpack.config.js