Webpack (сбой сборки модуля)

Моя ошибка:

"ОШИБКА в ./src/index.js
Ошибка сборки модуля (из ./node_modules/babel-loader/lib/index.js):
SyntaxError: D: / cource / React project / webpacktutorial / src / index.js: неожиданный токен (7:16) "

Я не знаю, почему эта ошибка возникает каждый раз, когда я делаю это для webpack, я использую загрузчик CSS, загрузчик babel или многие загрузчики, но эта проблема все еще не решена.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

webpack.config.js

const path = require( 'path');

module.exports = {
    mode: 'none',
   entry: path.join(__dirname,  '/src/index.js'),
   output: {
       filename:  'App.js',
       path: path.join(__dirname,  '/dist')},
   module:{
       rules:[{
          test: /\.js$/,
          exclude: /node_modules/,
          loader:  "babel-loader",
       }]
   }
}

package.json

{
  "name": "webpacktutorial",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack --mode production",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "babel-core": "6.26.3",
    "babel-loader": "7.1.5",
    "babel-preset-env": "1.7.0",
    "babel-preset-react": "6.24.1",
    "html-webpack-plugin": "3.2.0",
    "react-hot-loader": "^4.11.1",
    "webpack": "4.16.2",
    "webpack-cli": "3.1.0",
    "webpack-dev-server": "3.1.5"
  }
}

App.js


import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

webpack reactjs javascript webpack-4
person Uttam Moradiya    schedule 25.06.2019    source источник
comment
Вставьте сюда свое содержимое .babelrc или конфигурацию babel.   -  person Manish Jangir    schedule 25.06.2019
comment
{предустановки: [env, react]}   -  person Uttam Moradiya    schedule 25.06.2019

Ответы (3)


arrow_upward
0
arrow_downward

Попробуйте поменять раздел Your module таким, на мой взгляд, более стабильный вариант:

const path = require( 'path');

module.exports = {
    mode: 'none',
   entry: path.join(__dirname,  '/src/index.js'),
   output: {
       filename:  'App.js',
       path: path.join(__dirname,  '/dist')},
   module:{
       loaders:[{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
            presets: ['es2015', 'react']
        }]
   }
}
person Robert Hovhannisyan    schedule 26.06.2019
comment
Эта штука не для работы. снова возникает ошибка выше. - person Uttam Moradiya; 28.06.2019

arrow_upward
0
arrow_downward

Вы можете попробовать мою конфигурацию webpack

module.exports = {
    module: {
        rules: [{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: ["babel-loader", "eslint-loader"]
            },
            {
                test: /\.(jpe?g|png|gif)$/i,
                loader: "file-loader"
            },
            {
                test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
                loader: "file-loader"
            }
        ]
    }
};

Полную конфигурацию можно просмотреть здесь

Мой babel.rc

{
  "presets": ["es2015", "react"],
  "plugins": [
    "transform-es2015-destructuring",
    "transform-object-rest-spread",
    ["transform-class-properties", { "spec": true }]
  ]
}

Моя зависимость package.json

"babel-cli": "6.26.0",
"babel-core": "6.26.3",
"babel-eslint": "8.2.6",
"babel-loader": "7.1.5",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-es2015-destructuring": "6.23.0",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-preset-es2015": "6.24.1",
"babel-preset-react": "6.24.1",
"babel-preset-stage-0": "6.24.1"
person Tony Ngo    schedule 30.06.2019

arrow_upward
0
arrow_downward

Исходный код

Я смог воспроизвести вашу точную ошибку после создания собственного репозитория, используя ваш package.json. Мне удалось исправить ошибку:

"ОШИБКА в ./src/index.js
Ошибка сборки модуля (из ./node_modules/babel-loader/lib/index.js):
SyntaxError: D: / cource / React project / webpacktutorial / src / index.js: неожиданный токен (7:16) "

добавив мой собственный .babelrc в корень моего каталога. Мой .babelrc выглядит так:

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


После этого я получил сообщение об ошибке css-loader. Чтобы решить эту проблему, я сделал:

npm i -D style-loader css-loader

чтобы получить пакеты и добавил еще одно правило в webpack.config.js:

rules: [
    {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
    },
    {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
    }
]
person khan    schedule 30.06.2019