TypeScript Web组件集成Uppy时提示无default导出报错如何解决

这个报错由两个配置不匹配问题共同导致：

• 新版Uppy的@uppy/core、@uppy/dashboard等包的入口文件为CommonJS格式，未声明ESM规范的default导出，直接用默认导入语法import X from 'pkg'在纯ESM环境下无法识别导出内容。
• @open-wc脚手架默认的开发服务/构建配置默认跳过node_modules目录下的文件转译，不会自动把Uppy的CommonJS模块转换成ESM格式，也不会自动补全默认导出的兼容处理。

按以下顺序调整配置和代码即可：

1. 替换错误的导入语句
   打开你的UploadUi.ts文件，把默认导入改成命名空间导入，同时修正样式引入路径：

// 删除原有的默认导入写法
// import Uppy from '@uppy/core'
// import Dashboard from '@uppy/dashboard'

// 替换为以下写法
import * as Uppy from '@uppy/core'
import * as Dashboard from '@uppy/dashboard'
// 样式必须从dist目录引入，lib目录下没有编译后的样式文件
import '@uppy/core/dist/style.min.css'
import '@uppy/dashboard/dist/style.min.css'

2. 调整开发服务配置，开启Uppy包的转译
   打开根目录下的web-dev-server.config.mjs配置文件，添加Uppy包的转译规则，让构建工具处理node_modules下的Uppy文件：

import { esbuildPlugin } from '@web/dev-server-esbuild';

export default {
  plugins: [
    esbuildPlugin({
      ts: true,
      target: 'es2020',
      // 把@uppy下的所有文件加入转译范围
      include: ['src/**/*.ts', 'node_modules/@uppy/**/*.js'],
    })
  ],
  nodeResolve: {
    // 优先匹配ESM格式的包入口
    exportConditions: ['browser', 'module', 'import', 'development']
  }
};

3. 修正Uppy实例化代码
   因为用了命名空间导入，构造函数和插件都在导入对象的default属性上，调整初始化逻辑：

// 建议在Lit的firstUpdated生命周期里初始化，等DOM渲染完成后再挂载Uppy
firstUpdated() {
  const uppyInstance = new Uppy.default({
    debug: false,
    autoProceed: true,
  })
  .use(Dashboard.default, {
    inline: true,
    target: this.shadowRoot.querySelector('#uppy-mount'),
    width: '100%'
  })

  // 组件销毁时记得清理Uppy实例
  this.addEventListener('disconnectedCallback', () => {
    uppyInstance.close()
  })
}

临时兼容方案：如果不想改构建配置，可以直接把Uppy相关依赖锁定到2.13.3版本，这个版本的包自带合规的ESM导出，直接用默认导入写法不需要额外转译。

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