CRA + React Leaflet：编译失败

Question

我刚刚使用create-react-app 开始了一个全新的项目，并按照他们的文档推荐的here 设置了react-leaflet。

我正在尝试使用this example 来检查它是否一切正常，但随后我收到以下错误：

./node_modules/@react-leaflet/core/esm/path.js 10:41
Module parse failed: Unexpected token (10:41)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   useEffect(function updatePathOptions() {
|     if (props.pathOptions !== optionsRef.current) {
>       const options = props.pathOptions ?? {};
|       element.instance.setStyle(options);
|       optionsRef.current = options;

看起来react-scripts 无法处理react-leaflet 文件。 有人可以帮助我了解为什么会发生这种情况以及如何解决它吗？

Answer 1

在阅读了所有博客上的相关内容后，我得出以下结论： 这是因为新版本的 react-leaflet。我遇到了同样的问题，这就是我摆脱错误的方法：

打开您的 package.json 文件

 "browserslist": {
 "production": [
  ">0.2%",
  "not dead",
  "not op_mini all"
],
"development": [
  "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version"
]
},

用以下几行替换它：

"browserslist": [
">0.2%",
"not dead",
"not op_mini all"
],

• 现在删除 node_modeules/.cache 文件夹

• npm 安装

• npm 开始

另一种方法是在你的 package.json 文件中添加这些行：

"react-leaflet": ">=3.1.0 <3.2.0 || ^3.2.1",
"@react-leaflet/core": ">=1.0.0 <1.1.0 || ^1.1.1"

• 这将跳过新发布的@react-leaflet/core package版本