Застрял, пытаясь запустить веб-пакет, чтобы получить файл bundle.js - PullRequest
Новая
       50

Застрял, пытаясь запустить веб-пакет, чтобы получить файл bundle.js

0 голосов
/ 20 февраля 2019

Терминал: 

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

Mywebpack.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!код ELIFECYCLE

, хотя ошибки отличаются по сравнению с тем, что у меня есть, что конкретно связано с веб-пакетом.Я искал в Интернете что-то похожее на проблему, с которой я столкнулся, но безрезультатно.Любая помощь будет принята с благодарностью.Заранее спасибо.

РЕДАКТИРОВАТЬ:

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

структура базовой папки

На изображении вверху показана структура моей папки.Теперь все, что является бэкэндом, находится в корне, который является «activtexpress» и имеет отдельный файл package.json к файлу внутри папки client, которая также содержит папку src, которая содержит все мои компоненты, такие как App.jsвместе с файлом index.js.Не уверен, имеет ли это какое-либо отношение к проблеме, но подумал, что я все равно опубликую ее здесь.

1 Ответ

0 голосов
/ 20 февраля 2019

Поскольку вы используете @babel, я предполагаю, что вы используете babel 7. Вам нужно использовать @ babel / preset-реагировать и установить его через npm вместо того, чтобы «реагировать» в вашем .babelrc файле

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...