javascript - Module parse failed: Unexpected token when using webpack 5 - Stack Overflow

admin管理员组

文章数量:1427594

when I am using webpack 5 to pile my react project, shows this error:

[root@VM-0-16-centos cruise-web]# yarn build
yarn run v1.22.10
$ webpack --config config/dev.config.js
[webpack-cli] Compilation finished
assets by status 341 bytes [cached] 1 asset
./src/index.js 630 bytes [built] [code generated] [1 error]

ERROR in ./src/index.js 10:2
Module parse failed: Unexpected token (10:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See 
| 
| ReactDOM.render(
>   <React.StrictMode>
|     <Provider store={store}>
|       {routes}

webpack 5.6.0 piled with 1 error in 126 ms
error Command failed with exit code 1.
info Visit  for documentation about this mand.

this is my index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { Provider } from 'react-redux';
import reportWebVitals from './reportWebVitals';
import routes from './routes/routes';
import store from './store';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      {routes}
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();

this is my package.json config :

"scripts": {
    "start": "react-scripts start",
    "build": "webpack --config config/dev.config.js",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

and this is the dev.config.js config:

const path = require('path');

module.exports = {
  module: {
    rules: [
    {
        test: /\.css$/i,
        use: [
        "style-loader",
        "css-loader",
        {
            loader: "postcss-loader",
            options: {
            postcssOptions: {
                plugins: [
                [
                    "postcss-preset-env",
                    {
                    // Options
                    },
                ],
                ],
            },
            },
        },
        ],
    },
    ],
  },
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'build'),
  },
};

what should I do fix this problem?

when I am using webpack 5 to pile my react project, shows this error:

[root@VM-0-16-centos cruise-web]# yarn build
yarn run v1.22.10
$ webpack --config config/dev.config.js
[webpack-cli] Compilation finished
assets by status 341 bytes [cached] 1 asset
./src/index.js 630 bytes [built] [code generated] [1 error]

ERROR in ./src/index.js 10:2
Module parse failed: Unexpected token (10:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js/concepts#loaders
| 
| ReactDOM.render(
>   <React.StrictMode>
|     <Provider store={store}>
|       {routes}

webpack 5.6.0 piled with 1 error in 126 ms
error Command failed with exit code 1.
info Visit https://yarnpkg./en/docs/cli/run for documentation about this mand.

this is my index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { Provider } from 'react-redux';
import reportWebVitals from './reportWebVitals';
import routes from './routes/routes';
import store from './store';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      {routes}
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();

this is my package.json config :

"scripts": {
    "start": "react-scripts start",
    "build": "webpack --config config/dev.config.js",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

and this is the dev.config.js config:

const path = require('path');

module.exports = {
  module: {
    rules: [
    {
        test: /\.css$/i,
        use: [
        "style-loader",
        "css-loader",
        {
            loader: "postcss-loader",
            options: {
            postcssOptions: {
                plugins: [
                [
                    "postcss-preset-env",
                    {
                    // Options
                    },
                ],
                ],
            },
            },
        },
        ],
    },
    ],
  },
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'build'),
  },
};

what should I do fix this problem?

• javascript
• webpack-5

Share Improve this question Follow asked Nov 23, 2020 at 6:35 DolphinDolphin 39.5k102102 gold badges377377 silver badges721721 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

You need to define a rule for all your .js files and add babel-loader to it: https://github./babel/babel-loader

Webpack works in a way that you have to tell it what to do for each specific filetype extension (or however you define your rules). Javascript, by nature, does not understand JSX and you need to use a loader so that it can be parsed to regular and usable Javascript. Webpack does not understand JSX by default.

本文标签： javascriptModule parse failed Unexpected token when using webpack 5Stack Overflow