ERROR in ./node_modules/leaflet/dist/leaflet.css 3:0 > 您可能需要适当的加载器来处理此文件类型

Question

我正在使用 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"

在此先感谢您的帮助。

Answer 1

您尝试将 CSS 文件作为 JS 模块加载。

这一行是问题所在：import 'leaflet/dist/leaflet.css';

试试这个：import leaflet from 'leaflet'

Answer 2

我有类似的东西并猜测了解决方案。我猜它关心传单的位置是 node_modules 但我是新手，不能告诉你更多，只是添加似乎是对 webpack.config.js 中目录的引用解决了问题。我的错误消息没有包含问题所在的确切目录，因此感谢您提出这个问题

就我而言，解决方案如下所示。我在 webpack 文件模块部分的 css 规则的 include 行末尾添加了一些内容。 include 行是您可能需要的。特别是 node_module 的正确位置，这是我添加到包含行

末尾的内容

   {
        test: /\.css$/,
        include: [APP_DIR, /superset-ui.+\/src/,/superset-ui.+\/node_modules/],
        use: [
          isDevMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: isDevMode,
            },
          },
        ],
      },

ERROR in ./node_modules/leaflet/dist/leaflet.css 3:0 > 您可能需要适当的加载器来处理此文件类型

ERROR in ./node_modules/leaflet/dist/leaflet.css 3:0 > You may need an appropriate loader to handle this file type

reactjs

webpack

webpack-dev-server

react-leaflet