最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

Vite asking for specific .js extension when importing third party library - Stack Overflow

programmeradmin0浏览0评论

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(),
    ],
})
发布评论

评论列表(0)

  1. 暂无评论