App throws error on Building with npm run build

[tnmyd]

Describe the bug After I build my app which is using react-carousel for production using npm run build, it gives an error when I try to open the page where react-carousel is used. The error screenshots are provided below

Expected behavior To render the page as it appears during development.

Screenshots

Environment

• node 14.4.0, npm 6.14.5, react-carousel 2.0.1
• Desktop Windows 10
• Edge, Chrome

Please look into this. Its a great library and the best one for my purpose but this error blindsided me.

[RobertHebel]

Hi @DarkHorse1997 Thanks for reporting this issue. Unfortunately, now I don't have time to resolve this issue. If you know how to fix this please submit PR, otherwise, I will work on fixing this on next Friday

[cnavarro-cafeto]

Hey @RobertHebel I'm having the same error after build with yarn. Also v. 2.0.1 used here.

[sashaslow]

is anyone working on this?

[akochnev]

I just ran into this issue as well - very unfortunate. One thing that is puzzling me at this point is why, after doing a production build (e.g. with NODE_ENV properly set to production), the Carousel still ends with a dependency on recoil.development.js (as shown in the stack trace). All other dependencies , as expected, are the production dependencies.

Any tips on how to proceed on fixing this - I would be happy to dig in and try to sort it out? This will definitely be getting in the way of moving my app to prod, as it fails when packaged in production mode.

@RobertHebel - any tips on where to start looking at the root cause for this ? The error itself is pretty cryptic and seems like it might be coming from recoil in the first place..

[ishan28mkip]

I can work on this, anywhere to start with?

[geo-mathijs]

I've encountered the same error in all 2.0.0+ versions, regardless of which recoil version I install. I am able to successfully build with this version @brainhubeu/[email protected], but this in turn breaks plugins (an unfortunate trade off).

I first assumed it came from Recoil due to an old dependency of some sorts (see also: https://github.com/facebookexperimental/Recoil/issues/122) but they have fixed that by now and changing the version does not actually solve the issue for this package. Hope this gives some direction, but I'm note so sure myself where this is coming from either.

[akochnev]

@mnelemans - I did try messing around with recoil versions and had similar results.

My other suspicion was the fact that the production build of my app ends up using the development version of recoil (instead of using the prod one). I haven't been able to change that - any ideas why that might be the case ?

[geo-mathijs]

I think I have discovered both issues, with the root cause being a webpack conflict. Please checkout my PR (https://github.com/brainhubeu/react-carousel/pull/646) to see if it solves the issue for you guys as well.

[ishan28mkip]

@mnelemans I tried your change and still I am getting the same build error. To be sure I cloned your repo, ran yarn install, copied the code from react-carousel/lib into my own project.

[geo-mathijs]

Thanks for the heads up, my bad! Seems I had the bumped Recoil in my package.json that imports Carousel. I'll push the bumped version to the PR as well, as that does seem to fix it.

[geo-mathijs]

Thinking about this a bit more, it is probably related to the incorrect development mode setting in the webpack config. Looking at the latest Recoil they stopped using recoil.development.js which is probably why it fixes the issue.

[geo-mathijs]

Please try again with the latest commit (https://github.com/brainhubeu/react-carousel/pull/646/commits/7815c7e3745a4198a71eb7c7648f638236dd45a0) in my PR. It seems bumping recoil to at least ^0.0.11 fixes the read-only issue, while setting webpack to use production mode correctly ensures it reads from the production version.

[ishan28mkip]

@mnelemans Amazing. It works now. The recoil bump was enough to make it work. You might as well bump the recoil version to the latest version 0.0.13, checked it works for that version as well.

[cristiangrojas]

@mnelemans what's the right way to install the latest commit from your PR?

I can't find a way to do that.

[marpstar]

@mnelemans what's the right way to install the latest commit from your PR?

I can't find a way to do that.

I got this working by

1. Clone @mnelemans 's fork
2. yarn
3. yarn build
4. Copy the contents of react-carousel/lib into my project's node_modules/@brainhubeu/react-carousel/lib folder and overwriting the existing files.

After rebuilding my create-react-app project, everything seems to work.

[crbilladeau]

@mnelemans and @marpstar this worked beautifully, thank you for the detailed fix!

[sudravi]

Got it working in development mode using instructions provided by @marpstar. Since node_modules isn't usually checked in, for production is the long-term fix to wait for the PR in #646 to be merged?

[ArmedVeteran]

I've got the same issue, but I'm deploying automatically on Vercel. Is there any way to solve this or do we have to wait for PR?

[rstefek]

Please merge that PR, this is quite annoying bug

[danieljaguiar]

Indeed! This need to be merged.