naive-ui icon indicating copy to clipboard operation
naive-ui copied to clipboard

Wanted: Support Native ESM

Open zhmushan opened this issue 1 year ago • 3 comments

This function solves the problem (这个功能解决的问题)

NaiveUI ESM doesn't work on Nodejs and Browser.

I want to import NaiveUI on native Nodejs to help me generate a static site, but the output of NaiveUI ESM does not work directly, all the import and export paths are missing the .js suffix, and the Nodejs ESM resolver does not automatically add the suffix name.

Expected API (期望的 API)

I don't know anything about the bundling tools used by NaiveUI.

I checked the ESM output directly, and if we want to support Nodejs, we need to find all statements that import and export modules via relative paths but omit the file suffixes, and complete the paths in all of them. If we also want to support Browser, we need to find all the modules in the output whose paths are resolved to node_modules, inline them, or generate importmap.

zhmushan avatar Sep 01 '22 03:09 zhmushan

It would be fucking complex to add such suffix. I've investigated into it before. Neither typescript, esbuild can add such suffix.

07akioni avatar Sep 01 '22 04:09 07akioni

There is a simple and stupid way: just add the .js suffix to the import/export statements of all source files and there will be no need to add additional steps to the bundling process. (Inspired by Astro)

zhmushan avatar Sep 01 '22 08:09 zhmushan

st add the .js suffix to the import/export statements of all source files and there will be no need to add additional steps to the bundling proces

No, it's not possible unless it's created as pure ESM module, which is impossible now.

Using .js and make it resolve as module should result in adding type: "module" to package.json, which means all js will be resolved as module. Then cjs output wouldn't not work. If you need it to work, you should use .cjs suffix to all cjs output, which means all .js should be changed to .cjs. It's a loop.

Say there are two possible ways, neither works for current building tools:

  1. using .mjs and .cjs for different output & keeping current package.json
  2. using .js and .cjs for different output & adding type: "module" to package.json

07akioni avatar Sep 01 '22 11:09 07akioni