Production build issue: Uncaught ReferenceError: exports is not defined

[drew-y]

Some background. I'm trying to upgrade my frontend build system from parcel to Vite. The project is written in TypeScript. Running the dev server everything works great. But when I build using npx vite build, in the browser I get the error Uncaught ReferenceError: exports is not defined.

So far I've narrowed the issue to something outputting Object.defineProperty(exports,"__esModule",{value:!0}); when it shouldn't.

My tsconfig looks like this:

{
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src",
    "module": "ESNext",
    "moduleResolution": "node",
    "target": "ESNext",
    "sourceMap": true,
    "strict": true,
    "noUnusedParameters": true,
    "forceConsistentCasingInFileNames": true,
    "noUnusedLocals": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "isolatedModules": true,
    "allowSyntheticDefaultImports": true
  },
  "references": [
    { "path": "../shared" }
  ]
}

And my vite.config.js looks like this:

export default {
    root: "./src",
    optimizeDeps: {
        include: ["shared"]
    },
    resolve: {
        alias: {
            "vue": `${process.cwd()}/node_modules/vue/dist/vue.esm.js`,
        }
    },
    build: {
        outDir: `${process.cwd()}/dist`,
        emptyOutDir: true,
        target: "esnext",
        commonjsOptions: {
            transformMixedEsModules: true
        },
        terserOptions: {
            mangle: false
        }
    }
}

Based on these configurations, I believe output should be emitting ES Module syntax only. And yet Object.defineProperty(exports,"__esModule",{value:!0}); is still produced. My prime suspect is currently esbuild as when I run tsc directly, it doesn't produce any instances of Object.defineProperty(exports and correctly uses ES Module syntax.

I've been scratching my head at this for awhile. But haven't found a solution. Any help would be greatly appreciated.

[anbraten]

We had a similar problem. In our case it came from feathers. This problem only occurs in the production build as it uses rollup to bundle and the dev-server is not.

We finally fixed it for now by following this rollup issue: rollup/rollup/issues/2332.

We now use @rollup/plugin-replace and this vite config:

import replace from '@rollup/plugin-replace';
import { defineConfig } from 'vite';

const config = defineConfig({
  plugins: [
    // ...
    replace({
      'Object.defineProperty(exports, "__esModule", { value: true });':
        'Object.defineProperty(exports || {}, "__esModule", { value: true });',
      delimiters: ['\n', '\n'],
    }),
  ],
});

export default config;

[drew-y]

Funny enough I did find that issue. Just didn't think to give that solution a try. I'll give it a shot. Thanks!

Still wish I understood what is adding that line :/