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

Posted 2023-02-19

【中文标题】安装 react-leaflet 版本 3 后 React Storybook 未运行

【英文标题】：React Storybook not running after installation of react-leaflet version 3

【发布时间】：2021-12-30 07:10:07

【问题描述】：

安装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 配置？

【参考方案1】：

实际上对我来说是包含它而不是排除： 我假设您使用的是webpackFinal 配置？ 如果是，您需要找到哪个规则为您的 js 文件执行 babel-loader。对我来说，它位于config.module.rules[5].oneOf[3]。只需添加以下内容：

config.module.rules[5].oneOf[3].include.push(
  path.resolve(__dirname, '../node_modules/@react-leaflet/core'),
  path.resolve(__dirname, '../node_modules/react-leaflet')
);

但它可以在不同的地方，这取决于你的 conf。

【参考方案2】：

这个issue，以及其他复制它的人，已经流传了很长一段时间。 react-leaflet 的维护者希望将负担转移到库的消费者身上，以将 react-leaflet 转换为适合其受众的 ECMAScript 版本。

react-leaflet 的 target 不会转译无效的合并运算符，因此您的构建必须从 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']