Question

端子：

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"
      }
    ]
  }
};

我尝试了可能的方法，例如本文中建议的方法：

npm ERR! code ELIFECYCLE

即使错误与我专门针对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"
  }
}

base folder structure

在顶部的图像上显示了我的文件夹结构。现在，后端的所有内容都位于“ reactexpress”的根目录下，并且与package.json文件夹内的文件有一个单独的client文件，该文件还包含{组件，例如App.js以及index.js文件。不知道这是否与问题有关，但我还是想将其发布在这里。

Answer 1

由于您使用的是@babel，所以我假设您使用的是babel7。您需要使用@ babel / preset-react并通过npm进行安装，而不要在您的.babelrc文件中进行“反应”

卡住了尝试运行webpack以便获取bundle.js文件

1 个答案: