Qwik V1构建静态站点时出现exports未定义错误的解决求助

问题根源 #

这个错误是因为Qwik V1默认采用ES模块规范，但项目构建后出现了exports、require()这类CommonJS语法，ES模块环境无法识别这些变量，导致报错。你添加<script>var exports = {};</script>没用，因为这是构建层面的模块规范冲突，并非前端运行时的问题。

解决步骤 #

• 统一项目模块规范
  打开项目根目录的package.json，添加"type": "module"配置，强制Node.js和构建工具以ES模块方式处理所有文件：

  {
    "type": "module"
  }
  

• 替换代码中的CommonJS语法
  把所有require()调用替换为ES模块的import语法，将exports相关写法改为export：

  // 旧的CommonJS写法
  var K = require("@builder.io/qwik")
  exports.default = K.component$(...)
  
  // 改为ES模块写法
  import * as K from "@builder.io/qwik"
  export default K.component$(...)
  

• 调整Vite构建配置
  在vite.config.ts（或vite.config.js）中明确指定构建输出为ES模块，确保Qwik插件适配V1版本：

  import { defineConfig } from 'vite';
  import { qwikCity } from '@builder.io/qwik-city/vite';
  import { qwikVite } from '@builder.io/qwik/optimizer';
  
  export default defineConfig({
    plugins: [qwikCity(), qwikVite()],
    build: {
      format: 'es', // 明确输出ES模块
    },
  });
  

• 清理缓存并重新构建
  删除缓存文件后重装依赖、重新构建：

  rm -rf node_modules dist package-lock.json
  npm install
  npm run build
  

• 处理第三方依赖兼容性
  如果项目中有仅支持CommonJS的第三方依赖，要么升级该依赖到支持ES模块的版本，要么安装vite-plugin-commonjs插件做兼容：

  import commonjs from 'vite-plugin-commonjs';
  
  export default defineConfig({
    plugins: [qwikCity(), qwikVite(), commonjs()],
  });
  

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