Interpreting exports fields in package.json

This is related to this issue in the bezier-js library.

That library has the following targets specified in its package.json: https://github.com/Pomax/bezierjs/blob/cb4fe3e55add7401bdc5ee56ada46abb61b55883/package.json#L6-L11

  "type": "module",
  "exports": {
    "import": "./src/bezier.js",
    "require": "./dist/bezier.cjs"
  },
  "main": "./dist/bezier.cjs",

Yet, when an app created with react-scripts encounters import { Bezier } from "bezier-js", it will incorrectly link to the commonJs file (dist/bezier.cjs), not the ES modulesrc/bezier.js as specified there. This in turn causes an error because the named import Bezier does not exist on the cjs bundle. That means every app created with create-react-app that has bezier-js in its dependency tree will fail the build, as can be seen here: https://github.com/vasturiano/force-graph/issues/182 and here: https://github.com/vasturiano/react-force-graph/issues/282.

Other popular bundlers like webpack and rollup don’t seem to have this issue, and correctly target the ES module file in the import.

I’ve made a simple sandbox that reproduces the issue with react-scripts: https://codesandbox.io/s/create-react-app-import-bezier-js-5fxc4

I’m not sure if this a known issue or whether it is already resolved in some way. I’ve searched in the issues and couldn’t find anything obvious related.

[Pomax]

There should not be a “stale bot” acting on an issue with 26 upvotes - instead, it should bump up this issue for triage, since that still hasn’t happened.

(a stale bot should only threatening to close an issue after it has been triaged and responded to by someone on the team, not because no one in the team has have over a year’s worth of time to even look at it)

[captainR0bbo]

This is also an issue with Swiper.js. Unable to use V7 in CRA apps.

https://github.com/nolimits4web/swiper/issues/4871 https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c