Compatible 2.0.1 -> 2.0.2 version breaks require support in webpack build

Our package.json uses the compatible flag:

"use-sound": "^2.0.1",

Upon running the built module, we get the error:

± |feat-pixi-canvas-fallback {3} U:2 ✗| → node dist/server.js
node:internal/modules/cjs/loader:1125
      throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
      ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/ljp/dev/pdm/ruthless-server/node_modules/use-sound/dist/index.js
require() of ES modules is not supported.
require() of /home/ljp/dev/pdm/ruthless-server/node_modules/use-sound/dist/index.js from /home/ljp/dev/pdm/ruthless-server/dist/server.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/ljp/dev/pdm/ruthless-server/node_modules/use-sound/package.json.

    at new NodeError (node:internal/errors:278:15)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1125:13)
    at Module.load (node:internal/modules/cjs/loader:973:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:997:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.use-sound (/home/ljp/dev/pdm/ruthless-server/dist/server.js:5224:18)
    at __webpack_require__ (/home/ljp/dev/pdm/ruthless-server/dist/server.js:5291:42)
    at eval (webpack-internal:///./app/src/notification/components/NotificationSystem.js:11:67)
    at Module../app/src/notification/components/NotificationSystem.js (/home/ljp/dev/pdm/ruthless-server/dist/server.js:906:1) {
  code: 'ERR_REQUIRE_ESM'
}

Though the NotificationSystem.js module uses import syntax and works on a dev server, in the build it fails I guess because of some webpack internal using a require statement instead.

I believe this is due to this change #71 d7d9ef921f36aa7f4a4d3d2bf7572b32d5e97f90

Now, this likely points to a lurking issue in my webpack config which can probably be fixed, and a quick workaround is just to specifically use 2.0.1 as the package version, however I’m not sure that changing that flag (type: "module") is truly a compatible, minor change (as well, I feel that that particular change should have bumped the version number which was changed a couple of commits prior).

[joshwcomeau]

Kk, 2.2.0 is published with the type/exports removed. And 3.0.0 published with the fields re-added.

Please do consider “adopting” the code directly though 😄 I won’t be publishing any updates on the 2.x version going forward, so you may as well make it your own!

[joshwcomeau]

Sorry for the trouble y’all!

I’m thinking here’s what I’ll do:

• I’ll publish a new minor version in 2.x, which removes the type/exports fields (and should fix this issue) • I’ll publish 3.0.0 with the field

That way y’all don’t have to lock to a minor/patch version.

One other thing, too: the source for this project is really pretty small. It’s two files (other than the TS types):

• https://github.com/joshwcomeau/use-sound/blob/master/src/index.ts
• https://github.com/joshwcomeau/use-sound/blob/master/src/use-on-mount.ts

I have zero problem with folks copy/pasting the source into their own projects—just please add a comment with a link to this repo. Because this is a small project, I think it’s a feasible alternative, and it has a ton of benefits (no potential issues like this in the future, you “own” the code and can tweak it as-needed).