"You may need an appropriate loader to handle this file type"

Question

我想在我的反应项目中使用 react-leaflet，但我不明白如何让它工作，当我尝试编译我的代码时，我总是收到错误：

ERROR in ./node_modules/react-leaflet/src/index.js 5:7
Module parse failed: Unexpected token (5:7)
You may need an appropriate loader to handle this file type.
| export { LeafletConsumer, LeafletProvider, withLeaflet } from './context'
|
> export type {
|   LeafletContext,
|   LatLng,

我不明白我做错了什么:(我尝试了 git 存储库中的示例，它确实有效，所以我不知道我的项目和 git 之间有什么区别。我检查了安装指南，并制作了所需的一切。

这是我的webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
module.exports = {
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
}
]
},
plugins: [htmlWebpackPlugin]
};

我的package.json：

{
"name": "simple_webpack",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"scripts": {
"start": "webpack-dev-server --mode development",
"build": "webpack --mode production"
},
"author": "Drigtime",
"license": "",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.11",
"html-webpack-plugin": "^3.1.0",
"style-loader": "^0.20.3",
"webpack": "^4.2.0",
"webpack-cli": "^2.0.13",
"webpack-dev-server": "^3.1.1"
},
"dependencies": {
"leaflet": "^1.3.3",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-leaflet": "^2.0.0"
}
}

以及不起作用的实际代码

import React from "react";
import ReactDOM from "react-dom";
import { Map, TileLayer } from "react-leaflet/src";
const Index = () => {
return (
<Map>
<TileLayer
attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
</Map>
);
};
ReactDOM.render(<Index />, document.getElementById("index"));

Answer 1

看起来您的导入应该是：

import { Map, TileLayer } from "react-leaflet";

简单的修复！