webpack打包UMD库后外部项目导入提示export 'default'未找到如何解决？

问题原因 #

你遇到的报错是UMD库构建配置的导出规则配置缺失导致的：
webpack构建UMD格式库时，默认会将源码的所有导出包裹为一个库命名空间对象，你源码的default导出会作为这个对象的子属性存在，而非直接暴露为模块的顶层default导出，因此外部ES模块执行默认导入时会找不到对应导出。

修复方案 #

修改webpack.config.cjs的output配置，补充对应配置项即可：

const path = require('path');
const webpack = require('webpack');
const packageJSON = require('./package.json');

module.exports = (env, argv) => {
  return {
    mode: 'development',
    entry: './source/client/main.jsx',
    output: {
      path: path.join(__dirname, 'release'),
      filename: 'main.js',
      // 新增：兼容Node、浏览器、web worker等多环境的UMD执行上下文
      globalObject: 'this',
      library: {
        name: packageJSON.name,
        type: 'umd',
        // 新增：指定将源码的default导出直接作为库的顶层导出
        export: 'default'
      },
      // 可选：为AMD模块命名，避免匿名AMD模块加载问题
      umdNamedDefine: true
    },
    devtool: 'source-map',
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env',
                '@babel/preset-react'
              ],
              plugins: [
                '@babel/plugin-transform-runtime'
              ]
            }
          }
        }
      ]
    }
  };
};

验证方式 #

修改配置后重新构建你的库，在外部项目重新引入依赖后执行import Test from 'test'即可正常拿到导出对象，调用Test.test()会正常打印Flow。
如果临时不想修改构建配置，也可以用命名空间导入的方式临时兼容：

import * as Test from 'test'
// 实际default导出在命名空间对象的default属性上
Test.default.test()

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