【发布时间】：2020-05-08 16:25:36
【问题描述】：
我正在使用 react-leaflet 开发一个项目，并遇到了在构建时出现此错误的问题：
ERROR in ./node_modules/leaflet/dist/leaflet.css 3:0
Module parse failed: Unexpected token (3:0)
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
| /* required styles */
|
> .leaflet-pane,
| .leaflet-tile,
| .leaflet-marker-icon,
ℹ ｢wdm｣: Failed to compile.
在将leaflet.css 导入我的项目后开始出现此错误，如下所示：
import 'leaflet/dist/leaflet.css';
我在这个文件中的所有导入都是：
import React, { PureComponent } from 'react';
import { LatLngExpression } from "leaflet";
import { Map, TileLayer, Marker, Popup, ZoomControl, ScaleControl, Viewport } from 'react-leaflet';
import { Classes } from "jss";
import 'leaflet/dist/leaflet.css';
为了解决这个问题，我在我的项目中添加了 css-loader、file-loader 和 style-loader（使用 yarn）。 之后我将我的 webpack 配置更改为：
module: {
rules: [{
test: /\.(png|svg|jpg|gif)$/,
use: [{
loader: 'file-loader'
}]
}, {
test: /\.css$/i,
use: [{
loader: 'style-loader'
},{
loader: 'css-loader',
options: {
url: false,
modules: false
}
}]
}]
}
但是，我在构建时仍然遇到同样的错误。 我尝试了几种解决方案，例如尝试添加 url-loader。
不知怎的，它没有任何区别，我总是遇到同样的错误。
这是我完整的 Webpack 配置。请理解我在这里也使用 EJS 和节点。
import * as path from 'path';
import * as HtmlWebpackPlugin from 'html-webpack-plugin';
import * as ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
import { Mode } from './enum/Mode';
import { Languages } from './enum/Languages';
// only when condition is met
const when = (condition:any, returnValue:any) => (condition ? returnValue : undefined);
// remove empty values from object
const removeEmpty = (obj) => {
return Object.keys(obj).reduce((newObj, key) => {
if (obj[key] !== undefined && obj[key] !== null) {
newObj[key] = obj[key];
}
return newObj;
}, {});
};
module.exports = async (env, argv) => {
// get arguments
const { mode = Mode.PRODUCTION } = argv;
// array holding the webpack configs
const webpackConfigs = [];
// get languages from cli arguments
const languages = argv.languages
? argv.languages.split(',')
: 'NL';
// build config for every target in every language
languages.forEach((language) => {
// build the actual config
webpackConfigs.push({
mode,
devtool: 'inline-source-map', // Needed for chrome dev tools
entry: {
app: [
'console-polyfill',
path.resolve(process.cwd(), 'src/index.tsx')
]
},
output: removeEmpty({
publicPath: '/',
path: path.resolve(process.cwd(), `build/${Languages[language]}/`),
filename: mode === Mode.DEVELOPMENT ? '[name].js' : '[name]-[contenthash].min.js'
}),
resolve: {
extensions: [
'.js',
'.jsx',
'.ts',
'.tsx'
],
moduleExtensions: []
},
plugins: [
new HtmlWebpackPlugin({
mobile: true,
inject: false,
title: mode === Mode.PRODUCTION ? 'production' : 'Development',
template: path.resolve(process.cwd(), 'webpack/index.ejs'),
templateOptions: {
language: Languages[language]
}
}),
when(mode === Mode.DEVELOPMENT, // DEVELOPMENT only
new ForkTsCheckerWebpackPlugin()
)
],
devServer: removeEmpty({
disableHostCheck: true, // Security issue
hot: true,
hotOnly: false,
compress: true,
watchContentBase: true,
host: 'localhost',
contentBase: path.resolve(process.cwd(), 'webpack/public'),
port: 8080,
stats: 'minimal',
watchOptions: {
ignored: /node_modules/
}
}),
module: {
exprContextCritical: false,
rules: [
{ // babel javascript/typescript (no type checking), also see ./babel.config.js
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
targets: {
browsers: [
'firefox >= 40',
'chrome >= 49',
'edge >= 12',
'opera >= 47',
'safari >= 9',
'android >= 5',
'ios >= 10'
]
}
}]
]
}
}
},
{ // images
test: /\.(png|svg|jpg|gif)$/,
use: [{
loader: 'file-loader'
}]
},
{
test: /\.css$/i,
exclude: /node_modules/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader',
options: {
url: false, // leaflet uses relative paths
modules: false
}
}],
},
{ // sourcemaps
loader: 'source-map-loader',
exclude: /node_modules/
},
{ // html template
test: /\.ejs$/u,
loader: 'ejs-loader'
}
]
}
});
});
return webpackConfigs;
};
为了完整，我正在使用：
"react": "16.13.1",
"react-dom": "16.13.1",
"react-leaflet": "2.7.0",
"leaflet": "1.6.0",
"@babel/core": "7.9.6",
"babel-loader": "8.1.0",
"css-loader": "3.5.3",
"file-loader": "6.0.0",
"style-loader": "1.2.1",
"webpack": "4.43.0",
"webpack-cli": "3.3.11",
"webpack-dev-server": "3.10.3"
提前感谢您的帮助。
【问题讨论】：
标签： reactjs webpack webpack-dev-server react-leaflet