reactjs - 安装 react-leaflet 版本 3 后，React Storybook 未运行

Question

安装 react-leaflet 后3.2.1 版故事书在初始运行时崩溃

ERROR in ./node_modules/@react-leaflet/core/esm/path.js 10:41
Module parse failed: Unexpected token (10:41)
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
|   useEffect(function updatePathOptions() {
|     if (props.pathOptions !== optionsRef.current) {
>       const options = props.pathOptions ?? {};
|       element.instance.setStyle(options);
|       optionsRef.current = options;
 @ ./node_modules/@react-leaflet/core/esm/index.js 15:0-56 15:0-56 15:0-56
 @ ./node_modules/react-leaflet/esm/hooks.js
 @ ./node_modules/react-leaflet/esm/index.js
 @ ./src/navigation/config/index.tsx
 @ ./src/navigation/config/Routes.tsx
 @ ./src/redux/reducers/gl_navigation_reducer/reducer.ts
 @ ./src/redux/reducers/index.tsx
 @ ./src/redux/store.tsx
 @ ./src/providers/StoryBookProvider/index.tsx
 @ ./.storybook/preview.js
 @ ./.storybook/preview.js-generated-config-entry.js

ERROR in ./node_modules/react-leaflet/esm/Pane.js 25:37
Module parse failed: Unexpected token (25:37)
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
|   }
|
>   const parentPaneName = props.pane ?? context.pane;
|   const parentPane = parentPaneName ? context.map.getPane(parentPaneName) : undefined;
|   const element = context.map.createPane(name, parentPane);
 @ ./node_modules/react-leaflet/esm/index.js 13:0-30 13:0-30
 @ ./src/scenes/SingleClient/components/Map.tsx
 @ ./src/navigation/config/Routes.tsx
 @ ./src/redux/reducers/gl_navigation_reducer/reducer.ts
 @ ./src/redux/reducers/index.tsx
 @ ./src/redux/store.tsx
 @ ./src/providers/StoryBookProvider/index.tsx
 @ ./.storybook/preview.js
 @ ./.storybook/preview.js-generated-config-entry.js
 @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.j
ERROR in ./node_modules/@react-leaflet/core/esm/pane.js 2:27
Module parse failed: Unexpected token (2:27)
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
| export function withPane(props, context) {
>   const pane = props.pane ?? context.pane;
|   return pane ? { ...props,
|     pane

我的故事书版本:

• "@storybook/addon-actions": "^6.3.12",
• "@storybook/addon-essentials":"^6.3.12",
• "@storybook/addon-links": "^6.3.12",
• "@storybook/node-logger": "^6.3.12",
• "@storybook/preset-create-react-app": "^3.2.0",
• "@storybook/react": "^6.3.12",

也许我必须重写 webpack 配置？

Answer 1

这issue ，以及其他复制它的人，已经流行了很长一段时间。 react-leaflet 的维护者希望让库的使用者承担将 react-leaflet 转换为适合其受众的 ECMAScript 版本的负担。

target for react-leaflet 不会转译 nullish 合并运算符，因此您的构建必须从 node_modules 中显式转译它。

假设您有 @babel/plugin-proposal-nullish-coalescing-operator在您的工具链中的某处，您可以尝试将模块规则添加到您的 Storybook 构建中，类似于此:

{
  test: /\.jsx?$/,
  exclude: filename => {
    return /node_modules/.test(filename) && !/react-leaflet/.test(filename)
  },
  use: ['babel-loader']
}