安裝react-leaflet版本3后，ReactStorybook未運行

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

uj5u.com熱心網友回復：

這個問題，以及其他復制它的問題，已經有一段時間了。的維護者react-leaflet希望將庫的使用者負擔轉譯react-leaflet為適合其受眾的 ECMAScript 版本。

在target對react-leaflet不transpile的nullish合并操作，這樣你的版本將有明確transpile，從內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']
}

uj5u.com熱心網友回復：

實際上對我來說，包括它而不是排除它：我假設您正在使用webpackFinal配置？如果是，您需要找到哪個規則babel-loader適用于您的 js 檔案。對我來說它在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。

標籤：反应 网络包 故事书 反应传单

上一篇：使webpack決議以下型別的背景關系依賴項：require(someVariable)

下一篇：@fluentui/icons未顯示在頁面中