CRA + React传单:编译失败

Question

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

我正在尝试使用这个例子来检查它是否都正常工作，但是接下来我收到了以下错误：

./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

在所有博客上读到了它之后，我得出结论: --这是因为新版本的“反应传单”。我也面临着同样的问题，下面是我如何消除错误的方法：

打开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"

• 这将使跳过新发布的https://react-leaflet.js.org/版本