使用Svelte@3.50.1+Storybook引入含可选链的库后构建失败求助

问题原因 #

错误中的?.和??是ES2020新增语法，当前Storybook的默认Webpack配置未对node_modules里的svelte-flatpickr组件做ES2020语法转译，导致解析失败。

解决步骤 #

1. 安装必要的Babel依赖 #

执行以下命令安装Babel相关工具：

npm install --save-dev @babel/core @babel/preset-env babel-loader @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator

2. 配置Storybook的Webpack规则 #

在项目根目录的.storybook文件夹下（无则新建），创建或修改main.js文件，添加自定义Webpack配置：

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: '@storybook/svelte',
  webpackFinal: async (config) => {
    // 找到处理Svelte文件的规则
    const svelteRule = config.module.rules.find(rule => rule.test.test('.svelte'));
    
    // 给Svelte文件添加Babel转译，处理ES2020语法
    svelteRule.use.push({
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env'],
        plugins: [
          '@babel/plugin-proposal-optional-chaining',
          '@babel/plugin-proposal-nullish-coalescing-operator'
        ]
      }
    });

    // 取消对svelte-flatpickr的排除，让Webpack处理这个依赖
    svelteRule.exclude = /node_modules\/(?!svelte-flatpickr)/;

    return config;
  },
};

3. 重启Storybook #

关闭当前运行的Storybook服务，重新执行启动命令，即可正常构建运行。

备选方案（若上述方法无效） #

若允许升级依赖，可尝试更新@storybook/svelte到较新版本，新版本默认支持更多ES语法特性，可能无需额外配置即可解决问题。

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