Symfony3+Vite+Vue3项目报错Uncaught ReferenceError: exports未定义

你遇到的Uncaught ReferenceError: exports is not defined是浏览器无法识别CommonJS模块语法导致的，直接引发Vue应用无法挂载、Devtools无法识别组件的问题。结合Symfony3 + Vite + Vue3 + TypeScript的技术栈，核心原因集中在模块格式不兼容或配置错位。

1. TypeScript配置强制输出CommonJS语法 #

TS编译器如果配置为输出CommonJS模块，会生成浏览器不支持的exports/require语法。

• 打开tsconfig.json，修改以下配置：

{
  "compilerOptions": {
    "module": "ESNext",        // 使用ES模块格式
    "moduleResolution": "bundler", // 让Vite负责模块解析
    "target": "ESNext",
    "isolatedModules": true    // 强制ES模块模式，避免混合语法
  }
}

2. Vite配置错误设置模块输出格式 #

Vite默认开发环境使用ES模块，若手动指定为CommonJS会触发该错误。

• 检查vite.config.ts，确保没有错误配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import symfonyPlugin from 'vite-plugin-symfony';

export default defineConfig({
  plugins: [vue(), symfonyPlugin()],
  build: {
    format: 'es', // 明确指定ES模块，或直接删除该配置（默认符合要求）
  },
  // 适配Symfony3的资源路径
  publicDir: './web',
  buildDir: './web/build'
});

3. Symfony Vite Bundle配置错位 #

Symfony3的默认公共目录是web而非后续版本的public，配置错误会导致资源加载路径异常，间接引发模块解析问题。

• 修改config/packages/vite.yaml：

vite:
  public_dir: '%kernel.project_dir%/web'
  build_dir: '%kernel.project_dir%/web/build'
  entrypoints:
    app: './assets/vue/App.ts' # 确保入口路径正确指向你的App.ts

4. App.ts使用CommonJS导出语法 #

若你的入口文件混用了CommonJS语法（如module.exports），会导致浏览器无法解析。

• 修正assets/vue/App.ts为纯ES模块写法，并确保挂载点存在：

import { createApp } from 'vue';
import App from './App.vue';

// 确保Twig模板中存在<div id="app"></div>
createApp(App).mount('#app');

5. 第三方依赖未被Vite正确转换 #

部分老旧第三方依赖可能使用CommonJS语法，Vite未自动处理时会引发错误。

• 在vite.config.ts中添加优化配置：

export default defineConfig({
  // ...其他配置
  optimizeDeps: {
    include: ['你的依赖包名'], // 指定需要预编译的CommonJS依赖
  }
});

1. 执行npm run dev重启Vite开发服务器
2. 重启symfony serve
3. 打开浏览器控制台，确认exports is not defined错误消失
4. 检查Vue Devtools是否能识别组件，页面是否正常渲染

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