Webpack 意外标记(16:22)您可能需要适当的加载程序来处理此文件类型
当我用npm start启动我的react项目时,我得到了这个错误。一点也不让我前进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
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"] }
}