Suddenly got compilation error with Typescript

[cravussin]

Hi,

My setup is W10 with CRA 3.4.0, RTK 1.3.2 (same error with 1.3.1), using TypeScript 3.8.3

When I try to launch my React App I get a compilation error:

Attempted import error: 'enableES5' is not exported from 'immer'.
in .../redux-toolkit.esm.js

any ideas? I've got the repo working without any problems on my other machine (MacOS) but the packages.json file is identical. I've tried rebuilding the whole node_modules dir to no avail... any ideas?

[phryneas]

Sounds like you have an old version of immer. Can you please make sure that immer v6 is used?

[cravussin]

Thanks for the reply. node_modules/@reduxjs/tookit/node_modules/immer/package.json lists immer@6.0.2

[markerikson]

That doesn't sound right, because modern package managers shouldn't be installing immer as a nested @reduxjs/toolkit/node_modules/ folder. It should be hoisted to the main $PROJECT/node_modules/ folder.

Do you also have a copy of Immer under $PROJECT/node_modules/immer/? If so, that's probably why. Check to see if your app or one of your dependencies is specifying a different version of Immer, which would then cause the package manager to install a second copy of Immer 6.x nested.

[phryneas]

Having two versions of immer itself would not be something your package manager or bundler could not handle - but typescript can only handle one version of a package. So if you have installed immer@5 somewhere else in your project, it will use the type definitions of immer 5.

Try yarn why immer to find other versions.

[cravussin]

I'm using npm, so I used npm-why and yeah, react-dev-utils is using an old version of immer :

npx npm-why immer
npx : 4 installé(s) en 1.237s

Who required immer:

orca-client > @reduxjs/toolkit > immer@6.0.2
orca-client > react-scripts > react-dev-utils > immer@1.10.0`

But the thing is, I need react-scripts (don't want to eject), and the same setup is working perfectly on my Mac machine. Weird..

edit: typo

[markerikson]

Ew. That's weird. Why in the world is react-dev-utils using such an ancient version of Immer?

May need to file an issue in the CRA repo.

Ultimately, though, this isn't a bug with Redux Toolkit, so I'm going to go ahead and close this.

[phryneas]

You could try to use forced module resolution (immer is pretty backwards compatible, so react-dev-utils should work fine with immer6) for that.

Yarn can do that out-of-the-box, npm apparently needs a package for that: https://github.com/rogeriochaves/npm-force-resolutions

[cravussin]

It worked, thanks! I suppose there's no less hacky way to do it? I'm not entirely comfortable
with the idea of releasing this into production further down the road..

[phryneas]

Well, right now I'd guess that your Mac builds a version with immer6 and your other PC built it with immer1 until now, so having a constant immer version is definitely less hacky ;)

[cravussin]

true :) thanks for the help, much appreciated.

[phryneas]

Also, make sure to commit your lock files into version control. This sounds like one of those errors that only occur without the package-lock.json in git ;)

[markerikson]

There's nothing "hacky" about it.

Also, out of curiosity, what package manager and version are you using atm?

[cravussin]

Sure, I'm using npm 6.14.4

[cravussin]

Also, make sure to commit your lock files into version control. This sounds like one of those errors that only occur without the package-lock.json in git ;)

Oddly enough, the lock file is in git from the start. I suppose it has something to do with the fact that the W10 environment at work is a bit different / older.

[phryneas]

That could only be explained by a VERY old npm version that doesn't honor the package-lock.json. Weird.

I know why I prefer yarn ^^