Блог

когда я использую webpack 5 для компиляции моего проекта react, отображается эта ошибка:

 [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.org/concepts#loaders
| 
| ReactDOM.render(
>   <React.StrictMode>
|     <Provider store={store}>
|       {routes}

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

это мой 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();
 

это моя package.json конфигурация :

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

и это dev.config.js конфигурация:

 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'),
  },
};
 

что мне делать, чтобы решить эту проблему?

Вам нужно определить правило для всех ваших .js файлов и добавить babel-loader к нему: https://github.com/babel/babel-loader

Webpack работает таким образом, что вы должны указывать ему, что делать для каждого конкретного расширения типа файла (или как бы вы ни определяли свои правила). Javascript по своей природе не понимает JSX , и вам нужно использовать загрузчик, чтобы его можно было разобрать на обычный и пригодный для использования Javascript. Webpack по умолчанию не понимает JSX.