Javascript &引用；您可能需要适当的加载程序来处理此文件类型；

我想在我的react项目中使用react传单，但我不知道如何使其工作。当我尝试编译代码时，总是会出现错误：

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 repo中的示例，它确实起了作用，所以我不知道我的项目和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]
};

My

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"));

从“React”导入React；
从“react dom”导入react dom；
从“反应传单/src”导入{Map，TileLayer}；
常数索引=（）=>{
返回(
);
};
render（，document.getElementById（“index”））；

看起来您的导入应该是：

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

---

简单修复！

你能对你所有的文件做一点要点吗？另外，你有没有试过用这个例子：哦，你说得对，我不知道为什么我没有想到这个^^^非常感谢你；）@WilliamVarlet我很高兴！