模块解析失败:使用 webpack 5 时出现意外令牌

海豚

当我使用 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。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

webpack模块解析失败意外字符“ @”

Webpack和React出现意外令牌

使用babel装饰器时出现意外令牌@

使用Pug模板时出现意外的令牌“缩进”

使用ionic / cordova时出现意外的令牌错误

运行Webpack,Babel和Karma时出现意外的令牌'const'

Webpack 4基本React js hello world因“模块解析失败:意外令牌”而失败

模块解析失败:使用webpack-dev-server的意外令牌

webpack 4-模块解析失败:简单JS文件上出现意外字符' '(1:0)

使用Webpack导入时出现意外的未定义

模块解析失败:构建与Webpack交互时出现意外的令牌(6:16)

Webpack构建中出现意外的令牌“导出”

模块解析失败:Storybook 6.1.11,Webpack 5.11.0,React 17.0.1出现意外字符'@'(1:0)

在NodeJS中解析XML时出现意外的令牌<

Webpack 5-导入axios后出现“意外令牌:标点(。)”

使用地图时出现意外令牌

Perl scipt:使用Expect模块生成bash命令时出现意外令牌的语法错误

解析JSON时出现意外令牌

解析JSON时出现意外令牌

模块解析失败:Webpack Typescript加载器中出现意外令牌

解析JSX文件时出现意外的令牌错误

使用变量构建对象数组时出现意外令牌

模块构建失败:SyntaxError:在laravel中使用react-dnd时出现意外字符'@'(gulp + webpack + babel)

使用 Java 休眠时出现意外令牌错误

Webpack:SyntaxError:尝试访问 JSON 数组时出现意外的令牌错误

在 Vue.js 站点上使用带有 HardSource 的 Webpack 运行“失败”消息时出现意外且神秘的 dotnet

模块解析失败:heroku 部署时出现意外令牌 (14:6)

webpack tsx 模块解析失败:意外的令牌

使用 react-moralis 时出现意外的令牌“反应”