安装react-leaflet v3.2.1后React Storybook启动崩溃，模块解析失败的问题求助

你遇到的这些Unexpected token错误，核心原因是react-leaflet v3.2.1及其依赖的@react-leaflet/core使用了ES2020的空值合并运算符??，但你的Storybook默认Webpack配置没有对node_modules里的这些包进行转译，导致webpack无法识别这个新语法。

答案是肯定的——你需要通过覆盖Storybook的Webpack配置来解决这个问题，具体步骤如下：

• 第一步：在你的项目根目录的.storybook文件夹下（如果没有就新建一个），创建或修改main.js文件
• 第二步：在main.js中添加webpackFinal配置，让babel-loader处理@react-leaflet和react-leaflet的源码：

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-actions',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
  ],
  webpackFinal: async (config) => {
    // 让babel转译react-leaflet相关依赖，处理ES2020语法
    config.module.rules.push({
      test: /\.(js|jsx|ts|tsx)$/,
      include: [
        /node_modules\/@react-leaflet/,
        /node_modules\/react-leaflet/,
      ],
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-react', '@babel/preset-env'],
          plugins: ['@babel/plugin-proposal-nullish-coalescing-operator'],
        },
      },
    });
    return config;
  },
};

• 第三步：保存文件后，重启你的Storybook服务，错误应该就会消失了

补充说明： #

如果你的项目已经有自己的Babel配置文件（比如.babelrc或者babel.config.js），也可以直接把@react-leaflet和react-leaflet加入到Babel的转译包含列表中，效果是一样的。

内容的提问来源于stack exchange，提问作者nik