developit / microbundle

📦 Zero-configuration bundler for tiny modules.
https://npm.im/microbundle
MIT License
8.03k stars 362 forks source link

`"esmodule"` key not respected in v15.0.0 #963

Closed make-github-pseudonymous-again closed 2 years ago

make-github-pseudonymous-again commented 2 years ago

Here is what I get when running v14.2.0:

> yarn run v1.22.19
$ npm-run-all --parallel build:*
$ microbundle --cwd packages/api --tsconfig packages/api/tsconfig.json --target web --format modern,cjs && cp -l packages/api/dist/api/src/mod.d.ts packages/api/dist/mod.d.ts
$ microbundle --cwd packages/cli --tsconfig packages/cli/tsconfig.json --target node --format modern
Build "cli" to dist:
      6.28 kB: main.mjs.gz
      5.57 kB: main.mjs.br
Build "api" to dist:
      1.81 kB: mod.cjs.gz
       1.6 kB: mod.cjs.br
       1140 B: mod.mjs.gz
        978 B: mod.mjs.br
Done in 6.98s.

> exa -al packages/*/dist
packages/api/dist:
drwxr-xr-x    - xyz 19 May 11:05 api
drwxr-xr-x    - xyz 19 May 11:05 lib
.rw-r--r-- 5.5k xyz 19 May 11:05 mod.cjs
.rw-r--r--  12k xyz 19 May 11:05 mod.cjs.map
.rw-r--r--  131 xyz 19 May 11:05 mod.d.ts
.rw-r--r-- 2.9k xyz 19 May 11:05 mod.mjs
.rw-r--r-- 9.9k xyz 19 May 11:05 mod.mjs.map

packages/cli/dist:
.rw-r--r-- 23k xyz 19 May 11:05 main.mjs
.rw-r--r-- 43k xyz 19 May 11:05 main.mjs.map
drwxr-xr-x   - xyz 19 May 11:05 packages

Here is what I get with v15.0.0:

yarn build
yarn run v1.22.19
$ npm-run-all --parallel build:*
$ microbundle --cwd packages/api --target web --format modern,cjs && cp -l packages/api/dist/api/src/mod.d.ts packages/api/dist/mod.d.ts
$ microbundle --cwd packages/cli --target node --format modern
Build "cli" to dist:
      6.28 kB: main.modern.js.gz
      5.57 kB: main.modern.js.br
Build "api" to dist:
      1.81 kB: mod.cjs.gz
       1.6 kB: mod.cjs.br
       1140 B: mod.modern.js.gz
        978 B: mod.modern.js.br
Done in 6.75s.

10:47:22 [I] ➜ exa -al packages/*/dist
packages/api/dist:
drwxr-xr-x    - xyz 19 May 10:47 api
drwxr-xr-x    - xyz 19 May 10:47 lib
.rw-r--r-- 5.5k xyz 19 May 10:47 mod.cjs
.rw-r--r--  12k xyz 19 May 10:47 mod.cjs.map
.rw-r--r--  131 xyz 19 May 10:47 mod.d.ts
.rw-r--r-- 3.0k xyz 19 May 10:47 mod.modern.js
.rw-r--r-- 9.9k xyz 19 May 10:47 mod.modern.js.map

packages/cli/dist:
.rw-r--r-- 23k xyz 19 May 10:47 main.modern.js
.rw-r--r-- 43k xyz 19 May 10:47 main.modern.js.map
drwxr-xr-x   - xyz 19 May 10:47 packages

These are the config files for api and cli

───────┬───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
       │ File: packages/api/package.json
       │ Size: 276 B
───────┼───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
   1   │ {
   2   │   "name": "api",
   3   │   "private": true,
   4   │   "description": "API to write tests running in the browser",
   5   │   "type": "module",
   6   │   "source": "src/mod.ts",
   7   │   "types": "dist/mod.d.ts",
   8   │   "main": "dist/mod.cjs",
   9   │   "esmodule": "dist/mod.mjs",
  10   │   "dependencies": {
  11   │     "emittery": "*"
  12   │   }
  13   │ }
───────┴───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
───────┬───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
       │ File: packages/cli/package.json
       │ Size: 647 B
───────┼───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
   1   │ {
   2   │   "name": "cli",
   3   │   "private": true,
   4   │   "description": "CLI to run tests written with the API",
   5   │   "type": "module",
   6   │   "source": "src/main.ts",
   7   │   "main": "dist/main.cjs",
   8   │   "esmodule": "dist/main.mjs",
   9   │   "dependencies": {
  10   │     "@rollup/plugin-commonjs": "*",
  11   │     "@rollup/plugin-json": "*",
  12   │     "@rollup/plugin-node-resolve": "*",
  13   │     "@rollup/plugin-typescript": "*",
  14   │     "chalk": "*",
  15   │     "ci-info": "*",
  16   │     "emittery": "*",
  17   │     "express": "*",
  18   │     "figures": "*",
  19   │     "get-port": "*",
  20   │     "globby": "*",
  21   │     "matcher": "*",
  22   │     "ms": "*",
  23   │     "p-queue": "*",
  24   │     "playwright": "*",
  25   │     "rollup": "*",
  26   │     "supertap": "*",
  27   │     "yargs": "*"
  28   │   }
  29   │ }

Sources can be found here.

rschristian commented 2 years ago

Cheers, thanks for spotting and reporting. I see the issue, but it seems we have a bit of a blind spot in the test suite for this so I'm trying to rectify that.

You will probably want to migrate to "exports" anyhow (and looking at the linked repo, it seems you have) as "esmodule" never got a ton of support AFAICT.

make-github-pseudonymous-again commented 2 years ago

I'll try migrating to "exports". Thanks @rschristian!

make-github-pseudonymous-again commented 2 years ago

I tried using exports with the exact same filenames but it still wants to add .modern before .js:

$ npm-run-all --parallel build:*
$ microbundle --cwd packages/api --target web --format modern,cjs && cp -l packages/api/dist/api/src/mod.d.ts packages/api/dist/mod.d.ts
$ microbundle --cwd packages/cli --target node --format modern
Build "cli" to dist:
      6.28 kB: main.modern.js.gz
      5.57 kB: main.modern.js.br
Build "api" to dist:
      1.81 kB: mod.cjs.gz
       1.6 kB: mod.cjs.br
       1140 B: mod.modern.js.gz
        978 B: mod.modern.js.br

I guess I could just use mod.modern.js to make it work, but is this expected?

rschristian commented 2 years ago

Yes, sorry, "exports" also will be affected by that.

The advice to migrate was more in the general sense, rather than a workaround to this issue; little out there consumes "esmodule", so it's just a dead entry in most situations.

Edit: Also no reason to use .cjs & .mjs at the same time. Your package is "type": "module", so can just use .js for the modern output.

make-github-pseudonymous-again commented 2 years ago

OK!

Also no reason to use .cjs & .mjs at the same time. Your package is "type": "module", so can just use .js for the modern output.

I think I just wanted to avoid any chance of the running environment wrongly "guessing" the file format. But I guess no environment exists that understands .mjs but not the "type" key.