Any better ways to resolve file extension names in ESM packages?

[Jinjiang]

I feel it's a half-TS, half-Vite topic. Just post it here for more discussion and help.

The background is I'm compiling Vue SFC files into JavaScript files one-by-one and then put them into an npm package. That means:

• foo.ts will be compiled into <package>/foo.js
• bar.vue will be compiled into <package>/bar.vue.js

Previously, the package is a CJS package. So I can write import Bar from './bar.vue' in foo.ts. It works fine with all the dev env, including webpack, jest, type inference, etc.

Recently, we integrated the dev env with Vite and Vitest, and turned the package into ESM (by setting module: NodeNext in the tsconfig) at the same time. Then we found it didn't work any more:

1. we have to write import Bar from './bar.vue.js' to make it work with Vitest and the SSR mode in Vite. However, once we have done that,
2. the type inference would fail since it can't resolve the new specifier properly.

The reproduction: https://github.com/Jinjiang/reproductions/tree/vite-esm-ext-20240318

Is there any way to make it works both?

Thanks.

[hi-ogawa]

we have to write import Bar from './bar.vue.js' to make it work with Vitest and the SSR mode in Vite.

This restricted resolution is how Node ESM works, so the error you're seeing is probably same as node -e 'import("foo")':

ERR_MODULE_NOT_FOUND

$ node -e 'import("foo")'
node:internal/modules/esm/resolve:264
    throw new ERR_MODULE_NOT_FOUND(
          ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/hiroshi/code/personal/reproductions/repro/node_modules/foo/foo.vue' imported from /home/hiroshi/code/personal/reproductions/repro/node_modules/foo/index.js
    at finalizeResolution (node:internal/modules/esm/resolve:264:11)
    at moduleResolve (node:internal/modules/esm/resolve:917:10)
    at defaultResolve (node:internal/modules/esm/resolve:1130:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36) {
  code: 'ERR_MODULE_NOT_FOUND',
  url: 'file:///home/hiroshi/code/personal/reproductions/repro/node_modules/foo/foo.vue'
}

Node.js v20.11.0

To workaround such "broken" package, Vite provides ssr.noExternal (or Vitest's server.deps.inline), so they will be processed by Vite and won't directly go to import("foo").

So the normal course of action is to put this in vite config:

export default defineConfig({
  plugins: [vue()],
  ssr: {
    // this will be also picked up by Vitest automatically, so server.deps.inline is not necessary
    noExternal: ["foo"]
  }
})

I'm not sure about the typescript issue, but I suppose it would be fine if you can keep import Bar from './bar.vue' instead of import Bar from './bar.vue.js' ?