SvelteKit搭配TypeScript项目出现'require' is not defined报错如何解决？

云上老周

2026-10-2

报错原因

SvelteKit 底层基于 Vite 构建，全链路默认遵循 ESM 模块规范，同时浏览器原生环境也没有内置 CommonJS 规范的 require 全局方法：
即使你在 tsconfig 中配置了 "module": "commonjs"，该配置也仅作用于 TypeScript 静态编译阶段，后续 Vite 打包流程不会将代码中的 require 自动转换为 ESM 导入语法，代码运行到浏览器侧就会触发 require is not defined 报错。

解决办法

最优方案：统一使用 ESM 语法替换所有 require 调用
- 静态导入直接替换为 import xxx from 'xxx' 格式，你已经开启了 resolveJsonModule 配置，JSON 文件也可以直接用 import 导入，无需调用 require
- 动态导入场景使用 ESM 原生的 import() 语法替代 require

兼容方案：如果存在无法修改的老旧依赖/历史代码必须使用 require，可以安装 vite-plugin-require-transform 插件，在 Vite 构建阶段自动将 require 转换为 ESM 导入逻辑，配置步骤如下：

安装开发依赖：npm i vite-plugin-require-transform -D
修改 svelte.config.js 新增 Vite 插件配置：

import preprocess from 'svelte-preprocess'
import ssr from '@sveltejs/adapter-static'
import requireTransform from 'vite-plugin-require-transform';

/** @type {import('@sveltejs/kit').Config} */
export default {
  preprocess: [
    preprocess({
      defaults: {
        style: 'postcss'
      },
      postcss: true
    })
  ],
  kit: {
    adapter: ssr(),
    target: '#svelte',
    vite: {
      plugins: [
        requireTransform({
          fileRegex: /.ts$|.js$|.svelte$/
        })
      ]
    }
  }
}