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.

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.

• reactjs
• vite

1 Answer 1

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.