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.
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:
Update tsconfig.json
:
{
"compilerOptions": {
"target": "esnext",
"module": "esnext", // Use ES modules
"moduleResolution": "node",
"esModuleInterop": true
}
}
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',
}),
],
});
Check the problematic module:
Make sureisomorphicSecrets
is either an ES module or is being transformed by vite-plugin-commonjs
.