I have a React component which imports a component from a third-party npm library like so:
import { CoolComponent } from '@organization/some-library/ThirdPartyComponent'
I am trying to create a Vite config (to replace webpack) to serve up my application and when this component previously worked, it is now giving me an error:
[vite] (ssr) Error when evaluating SSR module entry-server:
|- Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/path/to/app/node_modules/@organization/some-library/' imported from /path/to/app/node_modules/@norganization/some-library/bundles/esm.min/index.js
Did you mean to import "@organization/some-library/ThirdPartyComponent.js"?
at finalizeResolution (node:internal/modules/esm/resolve:275:11)
at moduleResolve (node:internal/modules/esm/resolve:932:10)
at defaultResolve (node:internal/modules/esm/resolve:1056:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:654:12)
at #cachedDefaultResolve (node:internal/modules/esm/loader:603:25)
at ModuleLoader.resolve (node:internal/modules/esm/loader:586:38)
at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:242:38)
at ModuleJob._link (node:internal/modules/esm/module_job:135:49)
As you can see from the error message, it is saying that ThirdPartyComponent
should be imported as .js
. I don't want to have to edit all of my imports which were previously working so how can I fix this?
Here is my vite config:
import { defineConfig } from 'vite'
import { VitePluginNode } from 'vite-plugin-node'
import babel from 'vite-plugin-babel';
import commonjs from 'vite-plugin-commonjs'
import path from 'path'
export default defineConfig({
server: { port: 3001 },
build: {
target: 'esnext',
commonjsOptions: { transformMixedEsModules: true }
},
plugins: [
...VitePluginNode({
adapter: 'express',
appPath: 'entry-server', // Path to entry file
exportName: 'app', // Name of the exported express app
tsCompiler: 'esbuild', // Compiler to use
swcOptions: {},
}),
commonjs(), // Transform commonJS to ES Modules
babel(),
],
})