v2 error: "Uncaught ReferenceError: exports is not defined" when using react-scripts v5

[Dan503]

I installed this into a simple CRA project that has these dependencies:

"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.4.0",
"@types/node": "^17.0.8",
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11",
"@typescript-eslint/eslint-plugin": "^5.9.0",
"@typescript-eslint/parser": "^5.9.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"typescript": "^4.5.4",
"web-vitals": "^2.1.2"

I think the main issue is the upgrade from react-scripts v4 to v5.

It is giving me this error:

Uncaught ReferenceError: exports is not defined
    node_modules time-input-polyfill/utils/npm/common/supportsTime.js@http://localhost:3001/static/js/bundle.js:42582
    factory http://localhost:3001/static/js/bundle.js:43179
    __webpack_require__ http://localhost:3001/static/js/bundle.js:42629
    fn http://localhost:3001/static/js/bundle.js:42850
    node_modules time-input-polyfill/react/src/core/TimeInputPolyfill.js@http://localhost:3001/static/js/bundle.js:525
    factory http://localhost:3001/static/js/bundle.js:43179
    __webpack_require__ http://localhost:3001/static/js/bundle.js:42629
    fn http://localhost:3001/static/js/bundle.js:42850
    node_modules time-input-polyfill/react/index.js@http://localhost:3001/static/js/bundle.js:420
    factory http://localhost:3001/static/js/bundle.js:43179
    __webpack_require__ http://localhost:3001/static/js/bundle.js:42629
    fn http://localhost:3001/static/js/bundle.js:42850
    tsx http://localhost:3001/static/js/bundle.js:16
    factory http://localhost:3001/static/js/bundle.js:43179
    __webpack_require__ http://localhost:3001/static/js/bundle.js:42629
    fn http://localhost:3001/static/js/bundle.js:42850
    tsx http://localhost:3001/static/js/bundle.js:124
    factory http://localhost:3001/static/js/bundle.js:43179
    __webpack_require__ http://localhost:3001/static/js/bundle.js:42629
    <anonymous> http://localhost:3001/static/js/bundle.js:43818
    <anonymous> http://localhost:3001/static/js/bundle.js:43820
bundle.js:42582:1
    js http://localhost:3001/static/js/bundle.js:42582
    factory http://localhost:3001/static/js/bundle.js:43179
    __webpack_require__ http://localhost:3001/static/js/bundle.js:42629
    fn http://localhost:3001/static/js/bundle.js:42850
    js http://localhost:3001/static/js/bundle.js:525
    factory http://localhost:3001/static/js/bundle.js:43179
    __webpack_require__ http://localhost:3001/static/js/bundle.js:42629
    fn http://localhost:3001/static/js/bundle.js:42850
    js http://localhost:3001/static/js/bundle.js:420
    factory http://localhost:3001/static/js/bundle.js:43179
    __webpack_require__ http://localhost:3001/static/js/bundle.js:42629
    fn http://localhost:3001/static/js/bundle.js:42850
    tsx http://localhost:3001/static/js/bundle.js:16
    factory http://localhost:3001/static/js/bundle.js:43179
    __webpack_require__ http://localhost:3001/static/js/bundle.js:42629
    fn http://localhost:3001/static/js/bundle.js:42850
    tsx http://localhost:3001/static/js/bundle.js:124
    factory http://localhost:3001/static/js/bundle.js:43179
    __webpack_require__ http://localhost:3001/static/js/bundle.js:42629
    <anonymous> http://localhost:3001/static/js/bundle.js:43818
    <anonymous> http://localhost:3001/static/js/bundle.js:43820

Repository demonstrating the error:
https://github.com/Dan503/time-input-polyfill-tests/tree/react-version

I can't figure out what the issue is :(

[Dan503]

I've reported this bug in the create-react-app issue tracker facebook/create-react-app#11898

[Dan503]

work around (sort of)

If you are having this error, you need to downgrade to react-scripts v4

npm i -D react-scripts@4

You then need to follow the steps outlined in this comment:

eslint/eslint#13283 (comment)

Note: eslint needs to be installed as eslint@7 not eslint@latest

Once all that is done, close and re-open your editor.

[agrohs]

I'm happy to help take a look here @Dan503 (this looks like affecting more than just react-scripts projects, but likely a number of people using webpack 5). I went to go try a few fixes that may work, but cannot seem to get the base project as it stands to build. Wondering if you can help me get set up and then I'm happy to take a look!?

[Dan503]

I can't do it tonight but I'll try and see if I can get it working tomorrow night.

I haven't worked on this for a long time now.

[Dan503]

@agrohs have you tried installing using npm install --legacy-peer-deps?

[agrohs]

Thanks @Dan503, I haven't run that command specifically, but I'm pretty deep into updating things at this point to get this to work.

I have a fork w/ a few branches I'm working through (had to fork and fix packaging for both the react project as well as the core utils project). I finally have everything compiling and all cypress tests passing (containing output that does not cause the exports undefined issue where this started from...BUT now I'm caught in some interesting errors when consuming the types from the updated utils project.

If you happen to have any time free anywhere in next few days, let me know and happy to connect over email/zoom/whatever and perhaps work through together.

I'm close, but I've also been spinning on some small things for hours that I'm sure you'd know right away offhand

[Dan503]

@agrohs are you available now or within the next couple hours?

I have some time to work on the project now.

[Dan503]

@agrohs it seems like my night time is impractical for you.

I'll be available Saturday morning (Sydney time GMT +11)

[agrohs]

Hello @Dan503 - just saw this (apologies on missing the notification earlier), but happy to fine something that works across timezones. Let me see if I can catch you on Twitter/LinkedIn/trade some emails/DMs and we can connect from there!

(I have made pretty solid progress on this and know what the cause is it least - and have a fix for it - but encountered a handful of other things on top I started spinning on)

[Dan503]

@agrohs I've got an update on this. I have a working version on this branch:
issue/#23-react-scripts-v5-compile-error

2 of the unit tests are failing because the keydown command isn't updating the state fast enough for the test to pass. It doesn't seem to update the state until either it starts rapidly firing keydown events or the keyup event is triggered.

I can probably still publish while ignoring this failed test but I'd rather not have a failing test if I can avoid it.

I haven't tested in IE11 yet but the error mentioned in the issue isn't present anymore.

[Dan503]

I've published the version associated with that branch as v2.0.3-beta.0 so it can be npm installed using the @beta tag

https://github.com/Dan503/react-time-input-polyfill/releases/tag/v2.0.3-beta.0-React-Scripts-v5-support