Interpreting exports fields in package.json

[vasturiano]

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: vasturiano/force-graph#182 and here: vasturiano/react-force-graph#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]

Also note that the code shown is the official way to denote conditional exports for Node modules, which is now the the official way to do mark CJS vs ESM ("experimental" in Node v12/v14, but graduated to proper official in v15, retroactively making them official for v12/14, too)

[captainR0bbo]

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

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

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[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)

[Rossh87]

Upgrading to react-scripts@^5 resolves this issue by migrating to Webpack 5, which correctly supports the exports field in package.json. Caveat emptor--Webpack 5 has breaking changes that may be very significant for some projects.

[jorgegonzalez]

This is in issue in file-type sindresorhus/file-type#521 as well

[webholics]

Upgrading to react-scripts@^5 resolves this issue by migrating to Webpack 5, which correctly supports the exports field in package.json. Caveat emptor--Webpack 5 has breaking changes that may be very significant for some projects.

The build is working fine. However Jest test runner is not.

[Bruledamien]

Upgrading to react-scripts@^5 resolves this issue by migrating to Webpack 5, which correctly supports the exports field in package.json. Caveat emptor--Webpack 5 has breaking changes that may be very significant for some projects.

Thanks for suggesting this. It could work, but the migration process is too risky and complicated compared to what I have to gain. I'll follow this thread in case someone has a lighter workaround...