Webpack 意外标记(16:22)您可能需要适当的加载程序来处理此文件类型

Webpack 意外标记(16:22)您可能需要适当的加载程序来处理此文件类型,webpack,babeljs,webpack-dev-server,webpack-4,babel-loader,Webpack,Babeljs,Webpack Dev Server,Webpack 4,Babel Loader,当我用npm start启动我的react项目时,我得到了这个错误。一点也不让我前进 ERROR in ./node_modules/react-csv/src/components/Download.js 16:22 Module parse failed: Unexpected token (16:22) You may need an appropriate loader to handle this file type, currently no loaders are configu

当我用npm start启动我的react项目时,我得到了这个错误。一点也不让我前进

ERROR in ./node_modules/react-csv/src/components/Download.js 16:22
Module parse failed: Unexpected token (16:22)
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
| class CSVDownload extends React.Component {
|
>   static defaultProps = Object.assign(
|     commonDefaultProps,
|     defaultProps
 @ ./node_modules/react-csv/src/index.js 1:0-45 4:27-35
这是我的babel.config.js

module.exports = {
    presets: [
        [
            '@babel/preset-env',
            {
                modules: false,
            },
        ],
        '@babel/preset-react'
    ],
    plugins: [
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-syntax-dynamic-import',
    ],
    env: {
        production: {
            only: ['app'],
            plugins: [
                'lodash',
                'transform-react-remove-prop-types',
                '@babel/plugin-transform-react-inline-elements',
                '@babel/plugin-transform-react-constant-elements',
            ],
        },
        test: {
            plugins: [
                '@babel/plugin-transform-modules-commonjs',
                'dynamic-import-node',
            ],
        },
    },
};
这是我的网页配置

/**
 * COMMON WEBPACK CONFIGURATION
 */

const path = require('path');
const webpack = require('webpack');

module.exports = options => ({
    mode: options.mode,
    entry: options.entry,
    output: {
        // Compile into js/build.js
        path: path.resolve(process.cwd(), 'build'),
        publicPath: '/',
        ...options.output,
    }, // Merge with env dependent settings
    optimization: options.optimization,
    module: {
        rules: [
            {
                test: /\.jsx?$/, // Transform all .js and .jsx files required somewhere with Babel
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: options.babelQuery,
                },
            },
            {
                // Preprocess our own .css files
                // This is the place to add your own loaders (e.g. sass/less etc.)
                // for a list of loaders, see https://webpack.js.org/loaders/#styling
                test: /\.scss$/,
                exclude: /node_modules/,
                use: ['style-loader', 'css-loader', 'sass-loader'],
            },
            {
                // Preprocess 3rd party .css files located in node_modules
                test: /\.css$/,
                include: /node_modules/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(eot|otf|ttf|woff|woff2)$/,
                use: 'file-loader',
            },
            {
                test: /\.svg$/,
                use: [
                    {
                        loader: 'svg-url-loader',
                        options: {
                            // Inline files smaller than 10 kB
                            limit: 10 * 1024,
                            noquotes: true,
                        },
                    },
                ],
            },
            {
                test: /\.(jpg|png|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            // Inline files smaller than 10 kB
                            limit: 10 * 1024,
                        },
                    },
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            mozjpeg: {
                                enabled: false,
                                // NOTE: mozjpeg is disabled as it causes errors in some Linux environments
                                // Try enabling it in your environment by switching the config to:
                                // enabled: true,
                                // progressive: true,
                            },
                            gifsicle: {
                                interlaced: false,
                            },
                            optipng: {
                                optimizationLevel: 7,
                            },
                            pngquant: {
                                quality: [0.65, 0.90],
                                speed: 4,
                            },
                        },
                    },
                ],
            },
            {
                test: /\.html$/,
                use: 'html-loader',
            },
            {
                test: /\.(mp4|webm)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                    },
                },
            },
        ],
    },
    plugins: options.plugins.concat([
        // Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
        // inside your code for any environment checks; Terser will automatically
        // drop any unreachable code.
        new webpack.EnvironmentPlugin({
            NODE_ENV: 'development',
        }),
    ]),
    resolve: {
        modules: ['node_modules', 'app'],
        extensions: ['.js', '.jsx', '.react.js'],
        mainFields: ['browser', 'jsnext:main', 'main'],
    },
    devtool: options.devtool,
    target: 'web', // Make web variables accessible to webpack, e.g. window
    performance: options.performance || {},
});
我尝试安装stage-0预设,因为错误发生在static defaultProps,但babel不推荐stage-0预设。请给我一些建议


非常感谢您的帮助。

您是否尝试过删除
选项:options.babelQuery
或者您可以分享这是什么

您似乎有
@babel/plugin建议类属性
,但假设这些自定义选项覆盖了
babel.config.js

或修改这些选项以包含此插件:


您是否尝试过删除
options:options.babelQuery
,或者您是否可以分享这是什么

您似乎有
@babel/plugin建议类属性
,但假设这些自定义选项覆盖了
babel.config.js

或修改这些选项以包含此插件:


这是我用过的样板这是我用过的样板
use: {
  loader: "babel-loader",
  options: { plugins: ["@babel/plugin-proposal-class-properties"] }
}