I have a react component library that worked with react scripts 4. The library is dependent on @headlessui/react, so that is in my node_modules, but not required directly by the application, only by the component library.
I'm running into this problem: react-script 4 to 5 migration issue
When I take a close look at the output bundle in a boilerplate react-scripts 5 application, I see this in the minified source where it's supposed to require @headlessui/react:
64237: function (e, t, r) {
"use strict";
e.exports = r.p + "static/media/index.439e41c35f66883d8abc.cjs"; <- hmmmm???
},
And I can see in the build folder there's indeed a media folder with that file in it that is the headless ui code, but it's not putting the code inside the bundle
Now, I've figured out that if I remove these lines from the package.json of @headlessui/react, react-scripts 5 will bundle everything successfully:
// need to remove all of these
"exports": {
"types": "./dist/index.d.ts",
"require": "./dist/index.cjs",
"import": "./dist/headlessui.esm.js"
},
Which makes me thing I might be able to get around it by changing webpack's config somehow using craco, but I'm not exactly sure how
Is there a webpack configuration I can provide to get webpack to ignore the exports portion of the package.json?
