[英]Webpack, React JSX, Babel: Module build failed, “unexpected token” empty?
[英]babel unexpected token react module build failed
我有这个页面:
import React, { Fragment } from "react";
import "./Loader.css";
const Loading = ({ loadingMsg, styling }) => {
return (
<Fragment>
<div className="loader">
<p style={styling}>{loadingMsg}</p>
</div>
</Fragment>
);
};
export default Loading;
我不知道为什么当我开始我的项目时它会抛出这个错误:
ERROR in ./src/components/Loading/Loading.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Unexpected token (6:4)
我的 babelrc 文件:
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
和我的 webpack 配置文件:
const path = require('path')
module.exports = {
target: 'web',
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
resolve: { extensions: ['.js', '.jsx'] },
devServer: {
port: 3000,
publicPath: "/",
contentBase: "./public",
hot: true
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.html$/i,
loader: 'html-loader',
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.svg$/,
loader: 'svg-inline-loader'
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},
{
test: /\.svg$/,
use: [
{
loader: 'svg-url-loader',
},
],
},
],
},
};
我想我一切都很好,所以我不明白这个加载程序文件的问题在哪里。 我已经删除了片段部分,当我这样做时,在 div 上报告了相同的错误。
您需要像这样将babel-preset-env和babel-preset-react添加到您的项目中:
npm install --save-dev @babel/preset-env @babel/preset-react
然后用这个配置创建一个.babelrc
文件:
module.exports = {
presets: ["@babel/preset-env", "@babel/preset-react"],
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.