reactjsvite

Vite error - exports is not defined (SSR)


I am trying to migrate from webpack to vite.

Here are the relevant files:

vite.config.ts

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 }
    },
    plugins: [
        commonjs(),
        babel(),
        ...VitePluginNode({
            adapter: 'express',
            appPath: 'some/path/server',
            exportName: 'app',
            tsCompiler: 'esbuild',
        }),
    ],
})

tsconfig.json

{
    "compilerOptions": {
        "target": "esnext",
        "module": "commonjs", // have also tried "esnext"
        "lib": ["es7", "es2015", "es2017", "dom", "esnext"],
        "moduleResolution": "node", // have also tried "bundler"
        "esModuleInterop": true,
    }
}

When running the dev server, I am getting:

[vite] (ssr) Error when evaluating SSR module some/path/server:
|- ReferenceError: exports is not defined
    at eval (/path/to/some/file/some-file.js:5:23)

The relevant file it is complaining about is literally just:

export * from 'isomorphicSecrets'

Any help would be greatly appreciated.


Solution

  • The error exports is not defined occurs because Vite expects ES modules, but your code or dependencies are using CommonJS. Here's how to fix it:

    1. Update tsconfig.json:

      {
        "compilerOptions": {
          "target": "esnext",
          "module": "esnext", // Use ES modules
          "moduleResolution": "node",
          "esModuleInterop": true
        }
      }
      
    2. Change vite-plugin-commonjs is transforming CommonJS modules:

      import { defineConfig } from 'vite';
      import { VitePluginNode } from 'vite-plugin-node';
      import commonjs from 'vite-plugin-commonjs';
      
      export default defineConfig({
        server: { port: 3001 },
        build: { target: 'esnext' },
        plugins: [
          commonjs(), // Transform CommonJS to ES modules
          ...VitePluginNode({
            adapter: 'express',
            appPath: 'some/path/server',
            exportName: 'app',
            tsCompiler: 'esbuild',
          }),
        ],
      });
      
    3. Check the problematic module: Make sureisomorphicSecrets is either an ES module or is being transformed by vite-plugin-commonjs.