svelte/register无法导入Svelte Material UI组件的问题求助

问题根源 #

svelte/register 基于CommonJS规范，而@smui/*系列组件是纯ES模块，Node.js的require()无法直接加载ES模块，因此触发ERR_REQUIRE_ESM错误。

具体解决办法 #

1. 切换项目为ES模块模式

• 在项目根目录的package.json中添加：

  "type": "module"
  

• 将原本的require('svelte/register')替换为ES模块导入：

  import { register } from 'svelte/register';
  

• 调整NestJS配置：修改tsconfig.json，将module设为ESNext，target设为ES2020或更高，确保编译输出为ES模块。

2. 对SMUI组件使用动态导入

如果暂时不想切换整个项目的模块模式，可以在Svelte文件中用动态导入加载ES模块组件：

<script>
  let IconButton;
  // 异步加载组件
  (async () => {
    const module = await import('@smui/icon-button');
    IconButton = module.default;
  })();
</script>

{#if IconButton}
  <IconButton>
    <!-- 按钮内容 -->
  </IconButton>
{/if}

3. 配置svelte/register支持ES模块

修改svelte/register的调用逻辑，手动指定编译格式为ES模块：

import { register } from 'svelte/register';

register({
  compilerOptions: {
    format: 'esm'
  }
});

这样编译后的Svelte组件会以ES模块形式输出，避免CommonJS与ES模块的冲突。

注意事项 #

• 切换ES模块后，Node.js版本建议使用16.x及以上，对ES模块的支持更完善。
• 如果NestJS使用TypeScript，需确保tsconfig.json的moduleResolution设为NodeNext或Node16，匹配ES模块的解析规则。

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