Interpreting exports fields in package.json

vasturiano commented 3 years ago

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 commented 3 years ago

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 commented 2 years ago

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

stale[bot] commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

This is in issue in file-type https://github.com/sindresorhus/file-type/issues/521 as well

webholics commented 2 years ago

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 commented 11 months ago

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...

facebook / create-react-app

Interpreting exports fields in package.json #10892