Create-react-app: Fix the version of all react-scripts dependencies

[jjavierdguezas]

Is your proposal related to a problem?

Yes.
In my team, we always remove package-lock.json (and add a .npmrc file with package-lock=false) due to issues in the past. Also we fixed the version of react-scripts to 3.1.1
Due to this, when running npm install (in CI/CD pipeline for example) we get the specific react-scripts package we have in the package.json but some dependencies can be updated too. Those dependencies may be incompatible with the specific react-scripts and we get errors when we do npm start

For example some hours ago the react-scripts version was 3.1.1 and now is 3.1.2 and now we are getting errors with some eslint rule (some packages related to eslint were updated to new versions but our react-scripts is not)

How to reproduce today:
1- do npx create-react-app test --typescript and wait for the install
2- go to test folder and remove package-lock.json and node_modules folder
3- go to package.json and change react-scripts version from 3.1.2 to 3.1.1 as it was yesterday
4- run npm install and wait
5- run npm start then you will get this error:

Failed to compile.

./src/index.tsx
  Line 1:  Definition for rule '@typescript-eslint/consistent-type-assertions' was not found  @typescript-eslint/consistent-type-assertions

Describe the solution you'd like

Fix the version of all react-scripts dependencies and change them only on new react-scripts releases

Describe alternatives you've considered

Update the react-scripts version hoping not to break anything
(I have also tried to find out the set of packages that changed and specify in my package.json the desired version, but that has not worked)

Additional context

I would like to have to update the packages only when I want, and not as a result of some dependency of a dependency has been updated and causes errors

[known-as-bmf]

I have this issue as well.

Our team uses a package-lock.json but we clear (delete & recreate via npm i) it when bumping dependencies version.

npm start doesnt work since a few hours ago (without changing anything in package.json, just from a clean install).

[jjavierdguezas]

@known-as-bmf if you delete package-lock.json file and the node_modules folder and change the version of react-scripts to 3.1.2 it should work after a npm install

[ianschmitz]

Thanks for the report. Sorry you guys are experiencing this. Was an unintended issue caused by a carat dependency on eslint-config-react-app in react-scripts and that package having a peer dependency @typescript-eslint/* packages.

@jjavierdguezas's suggestion is the best solution for those that have the issue. We'll look into if there's anything else we can do on our end in the short term.

[sadsa]

Was about to raise this as a bug myself. It seems react-scripts is looking for @typescript-eslint/eslint-plugin as a dependency, which does not contain a rule for @typescript-eslint/consistent-type-assertions. However, the eslint-config-react-app makes reference to it. Therefore, these packages dont comply with each other.

[LilR]

This fix is not working for me. Deleted package-lock.json, deleted node-modules, updated react-scripts to 3.1.2 then on npm install I get:

npm WARN [email protected] requires a peer of @typescript-eslint/[email protected] but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of @typescript-eslint/[email protected] but none is installed. You must install peer dependencies yourself. npm WARN @typescript-eslint/[email protected] requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself. npm WARN @typescript-eslint/[email protected] requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.

I've also tried 3.1.1 and 3.1.0 and all are giving me the same issue. Could anyone advise how to fix this? I've tried installing the peer dependencies but there's a very long chain of them.

** I should also say that I do still get the Definition for rule '@typescript-eslint/consistent-type-assertions' was not found @typescript-eslint/consistent-type-assertions error as well

[jjavierdguezas]

@LilR can you share your package.json ?

[jtiala]

@LilR Restarting VSCode after regenerating package-lock.json and node_modules did the trick for me.

[cngbinho]

I'm delete yarn-lock and node_modules and run yarn. this work.

[alexandrtovmach]

@jjavierdguezas Could you please explain what is actual issue? As I understand, if you upgrade react-scripts to the latest version you'll fix "Definition for rule '@typescript-eslint/consistent-type-assertions' was not found" error:

yarn upgrade react-scripts@latest
# or
npm install react-scripts@latest

But if you're talking about broken SemVer for react-scripts ― I agree with you.
By SemVer bumping MAJOR version of some dependency should affect to MINOR version, not to PATCH like here. Instead of:
_3.1.1 -> 3.1.2_
it should be:
_3.1.1 -> 3.2.0_

So yeah, that's the problem, but I'm not sure that we can solve this. Again, by SemVer we should go with next steps:

1. Revert this changes as PATCH
2. Leave it to next MINOR version release

@ianschmitz What do you think about that?

[jjavierdguezas]

@alexandrtovmach you may have pointed out _another_ problem or a better solution I don't know. My issue really is that a working code without modifications should always work (ideally). In this case, our CI/CD pipeline broke between two npm install and I think that should be avoided

[alexandrtovmach]

@jjavierdguezas But how your CI downgrade the version of react-scripts from _3.1.2 to 3.1.1_?

[jjavierdguezas]

@jjavierdguezas But how your CI downgrade the version of react-scripts from _3.1.2 to 3.1.1_?

@alexandrtovmach It doesn't, as I pointed out we fixed the version of react-scripts to 3.1.1 and we do not use package-lock.json, so our CI pipeline installs all fixed versions every time. But some non-fixed dependency of react-scripts changed and stopped being compatible with the version 3.1.1, then we got the erros

[alexandrtovmach]

Okay I see, so you had an issue without changing version of react-scripts. Hmm... that's strange.

[alexandrtovmach]

It means that was a problem with semver on typescript/eslint-plugin side

[alexandrtovmach]

I just checked @typescript/eslint-plugin, and didn't found any problems from their side. Probably, issue is going from this changes in _packages/react-scripts/template-typescript/.template.dependencies.json_:

        "@types/react-router": "^5.0.3",
        "@types/react-router-dom": "^4.3.1",
        "@types/webpack-env": "1.14.0",
-        "@typescript-eslint/eslint-plugin": "^1.3.0",
-        "@typescript-eslint/eslint-plugin-tslint": "^1.3.0",
-        "@typescript-eslint/parser": "^1.3.0",
-        "tslint": "^5.12.1",
-        "tslint-microsoft-contrib": "^6.0.0",
-        "tslint-react": "^4.0.0",
        "typescript": "^3.3.3"
    },
    "resolutions": {

Here was version installed directly to ts template project, but when it was removed "@typescript-eslint/eslint-plugin" started hoisting from "react-scripts". But it's just theory and I'm not sure about that.

[ROME08]

For my application to run I have to replace react-scripts with version 2.1.8, because both versions 3.2.0 and 3.1.2 give me issues.

[asimqt]

I installed peer dependencies like "@typescript-eslint/eslint-plugin": "^2.6.0", "@typescript-eslint/parser": "^2.6.0", eslint. Check your warnings and fix all warnings. Then it started working.

[innowhat]

Downgrading react-scripts to "3.0.1" will fix the problem for now.

[osdiab]

A solution for those who are still struggling:

On my repo I ran yarn why @typescript-eslint/eslint-plugin, and found that the version specified was @2.6.1, which has this rule. Then, I checked my yarn.lock, and found that, similarly, @2.6.1 was the installed version there.

Finally, I checked the actual node_modules/@typescript-eslint/eslint-plugin/package.json, and I found the version there was 1.10.something, which is definitely not what's supposed to be installed. So I deleted the node_modules/@typescript-eslint/eslint-plugin directory, and ran yarn install. checking the installed package.json showed that 2.6.1 had been installed, and I stopped seeing the error.

[revmischa]

I tried creating a new app with my fork which is merged with tag v3.2.0 of react-scripts.
I get this error starting my app.

./src/index.tsx
  Line 1:1:  Definition for rule '@typescript-eslint/consistent-type-assertions' was not found  @typescript-eslint/consistent-type-assertions

I have everywhere:

    "@typescript-eslint/eslint-plugin": "^2.9.0",
    "@typescript-eslint/parser": "^2.9.0",

❯ npm ls @typescript-eslint/eslint-plugin     
[email protected] /Users/cyber/dev/jb/hr/hr
├── @typescript-eslint/[email protected] 
└─┬ [email protected]
  └── @typescript-eslint/[email protected] 

Similar versions for /parser and /experimental-utils

If everything is using v2.9.0 of typescript-eslint, why am I getting this error?

[129emma]

I got the exact issue all of a sudden, and everything works perfectly fine yesterday.
All version are similar, I've tried downgrade react-script as other suggest, doesn't work at all

[mehmetegemen]

Assuming the devs are working with the latest deps, I upgraded all of the packages with https://www.npmjs.com/package/npm-check-updates to the latest and npm install.It fixed.

[129emma]

Assuming the devs are working with the latest deps, I upgraded all of the packages with https://www.npmjs.com/package/npm-check-updates to the latest and npm install.It fixed.

it works, thanks!

[devinhalladay]

this is still an issue, i can't deploy a fresh create-react-app application (using npx create-react-app) heroku or now.sh. local builds seem to succeed but any other environment fails.

[k-yle]

I _finally_ solved this issue in my case by adding EXTEND_ESLINT=true in my .env file. Refer to the create-react-app docs.

[jjavierdguezas]

Another example why this is so important: minutes ago #8454
My pipeline is broken again 😥

[ianschmitz]

This is a very tricky problem. Only a lock file can provide some guarantees of a reproducible install. Issues like this we have encountered in the past were often (not always) due to a dependency, of a dependency, of a dependency that changed, of which we have no control over. As you can see the majority of our dependencies _are_ pinned: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/package.json, and yet we still run into these issues from time to time.

On the flip side, we've also encountered some issues due to our pinning: https://github.com/facebook/create-react-app/issues/6756#issuecomment-480147256.

My recommendation is to always use a lock file. They aren't perfect, but they are the best solution we have at this time. You could also try the zero-installs feature in yarn v2 for a much different take on dependency management: https://yarnpkg.com/features/zero-installs.

We'll continue to talk about this among our team. I'll close this for now as there's no immediate action to take.