esbuild not work well with package.json has "exports:{"./*": "./*"}"

[thestarweb]

I got the error:

✘ [ERROR] Could not resolve "echarts/lib/util/format"

node_modules/xxxxxx:
6 │ import { addCommas } from 'echarts/lib/util/format';


It just happened when I install latest version of echarts and use Esbuild。Use [email protected] or webpack are build success。

set logLevel to "debug", I can see It match sccuess，however ".js" extension does not added:

Checking path "lib/util/format" against target "./*"
Substituted "lib/util/format" for "*" in "./*" to get "./lib/util/format"
The resolved path
"/xxxxx/node_modules/echarts/lib/util/format"
is exact
Read 24 entries for directory
"/xxxxx/node_modules/echarts/lib"
Read 24 entries for directory
"/xxxxx/node_modules/echarts/lib/util"
The import "echarts/lib/util/format" is missing the extension ".js"


echarts added the exports map at 5.4.4. After this version, esbuild will build fail for my project. Before exports map has been added(such as 5.4.3), esbuild will auto add extension ".js", And i can build success with esbuild。

Our other projects are build success with webpack or rollup, only my this project build fail with esbuild, the dependencies are same. So I don't think "import 'echarts/lib/util/format';" is wrong. I think auto add extension ".js" is also needed when use the "*" match in package.json.

way to reproduce the issue:


1. run command for install package

npm i [email protected] esubild

2. create file test.ts:

import { addCommas } from "echarts/lib/util/format";
window.test = addCommas;

3. use esbuild

npx esbuild --bundle --format=iife ./test.ts --outfile=test.js





[evanw]

So I don't think "import 'echarts/lib/util/format';" is wrong. I think auto add extension ".js" is also needed when use the "*" match in package.json.

I think import 'echarts/lib/util/format' isn't valid because it doesn't work in node, and esbuild's implementation of exports follows node's specification for exports (node invented exports and has specified it very precisely).

Here's what node does:

$ npm init -y

$ npm i [email protected]

$ cat test.mjs
import { addCommas } from "echarts/lib/util/format";
console.log(addCommas);

$ node test.mjs
node:internal/modules/esm/resolve:265
    throw new ERR_MODULE_NOT_FOUND(
          ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/workspaces/codespaces-blank/node_modules/echarts/lib/util/format' imported from /workspaces/codespaces-blank/test.mjs
    at finalizeResolution (node:internal/modules/esm/resolve:265:11)
    at moduleResolve (node:internal/modules/esm/resolve:933:10)
    at defaultResolve (node:internal/modules/esm/resolve:1157:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:390:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:359:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:234:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:87:39)
    at link (node:internal/modules/esm/module_job:86:36) {
  code: 'ERR_MODULE_NOT_FOUND',
  url: 'file:///workspaces/codespaces-blank/node_modules/echarts/lib/util/format'
}

Node.js v20.12.1

Implicit extensions with the exports tool is something that the package author can control. If the package author wants implicit extensions to work, then they can use "./*": "./*.js" instead of "./*": "./*".

In the meantime, you can import from echarts/lib/util/format.js instead of echarts/lib/util/format. I don't think esbuild needs any changes here as the error message for this is already very explicit:

✘ [ERROR] Could not resolve "echarts/lib/util/format"

    test.mjs:1:26:
      1 │ import { addCommas } from "echarts/lib/util/format";
        ╵                           ~~~~~~~~~~~~~~~~~~~~~~~~~

  The module "./lib/util/format" was not found on the file system:

    node_modules/echarts/package.json:215:11:
      215 │     "./*": "./*"
          ╵            ~~~~~

  Import from "echarts/lib/util/format.js" to get the file
  "node_modules/echarts/lib/util/format.js":

    test.mjs:1:50:
      1 │ import { addCommas } from "echarts/lib/util/format";
        │                                                   ^
        ╵                                                   .js

  You can mark the path "echarts/lib/util/format" as external to exclude it from the bundle, which
  will remove this error and leave the unresolved path in the bundle.

[thestarweb]

Sorry, I just tried using webpack to build successfully, because most web projects are built with webpack, and the author who uses "import { addCommas } from 'echarts/lib/util/format'" has also told me he has never encountered this error with webpack and rollup. Perhaps webpack does not support the "exports" field. Now, I've tried using node and ts-node and got the same error. I also asked GPT, and it suggested omitting ".ts" but not ".js". Unfortunately, both packages are not under my control. I will report this issue to the author. But for now, I can only lock the version, and i don't thin that's not a good idea.

By the way, can you add a new mode to make the resolve behave like webpack in this situation?