我有这个页面。
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)
我的babelrcfile:
{
"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上。