How can I fix the 'exports is not defined' SSR error in Vite during a webpack migration?

Below is an explanation of what’s likely happening and a couple of approaches to try to fix the issue.

---

What’s Happening

The error you see

ReferenceError: exports is not defined

suggests that some code in your SSR build is still in a CommonJS style (referencing “exports”) even though Vite (and Node’s ESM mode) expects proper ESM syntax. In your case, the file

JSCopied
export * from 'isomorphicSecrets'

simply re-exports from the module. If the imported module (isomorphicSecrets) was written as CommonJS (or is being compiled as CommonJS) then re-exporting it via ESM syntax can trigger issues during SSR because the helper code (or the transformed code) might contain references to the CommonJS “exports” variable, which isn’t defined in an ES module.

Even though you already have the vite-plugin-commonjs in play, its transformation may not cover SSR entries or may be affected by plugin order. Also, note that your TypeScript config is trying out both "commonjs" and "esnext" for the "module" setting. When running under Vite (especially with SSR using vite-plugin-node) you want to work in pure ESM land.

---

Recommended Approaches

1. Ensure Pure ESM Output

   • Set your TypeScript compiler to output ESM. In your tsconfig.json, ensure that "module": "esnext" (or another ESM target, for example "module": "node16") is used. This helps avoid mixing module systems.

   JSONCopied
   {
     "compilerOptions": {
       "target": "esnext",
       "module": "esnext",
       "lib": ["es7", "es2015", "es2017", "dom", "esnext"],
       "moduleResolution": "node",
       "esModuleInterop": true
     }
   }

   • This change ensures that your source (and any re-exports) is compiled as ESM rather than CommonJS.

2. Force Vite to Prebundle the CommonJS Dependency

   If the package isomorphicSecrets is published as CommonJS, you can tell Vite to prebundle it so it gets transformed into an ESM-compatible version. You can do this by adding an optimizeDeps entry (and even for SSR if needed):

   TYPESCRIPTCopied
   import { defineConfig } from 'vite'
   import { VitePluginNode } from 'vite-plugin-node'
   import babel from 'vite-plugin-babel'
   import commonjs from 'vite-plugin-commonjs'
   
   export default defineConfig({
     server: {
       port: 3001,
     },
     build: {
       target: 'esnext',
       commonjsOptions: { transformMixedEsModules: true }
     },
     optimizeDeps: {
       include: ['isomorphicSecrets'],
     },
     plugins: [
       commonjs(),
       babel(),
       ...VitePluginNode({
         adapter: 'express',
         appPath: 'some/path/server',
         exportName: 'app',
         tsCompiler: 'esbuild'
       }),
     ],
   })

   This forces Vite’s dependency pre-bundling (using esbuild) to process isomorphicSecrets as an ESM module, which can help remove residual CommonJS artifacts (like the use of the “exports” variable).

3. Plugin Order and SSR Considerations

   Make sure that the order of your plugins is conducive to proper transformation. Sometimes the SSR entry needs its CommonJS transformation to run earlier. If the above changes still do not fix the issue, consider reordering the plugins (e.g. placing the commonjs plugin before babel) or testing by removing one plugin to narrow down if one is interfering.

---

Summary

• Use "module": "esnext" in your tsconfig to ensure ESM output.
• Add the dependency to Vite’s optimization so that CommonJS modules like isomorphicSecrets are pre-bundled and transformed.
• Verify plugin order if issues persist.

These changes should help the Vite SSR process treat all code as proper ESM and eliminate the “exports is not defined” error.