react-scripts@3.4.1 has higher dependency versions than react-scripts@3.4.3?

[AmyShackles]

Is your proposal related to a problem?

Starting a project with npx create-react-app app-name currently uses react-scripts@3.4.3. I was surprised to see that this brought in the dependency of left-pad. Digging into it further, I noticed that there were several dependencies that were higher-versioned in react-scripts@3.4.1 than they are in @3.4.3. Here's a table of the dependencies listed in the two package.json versions of react-scripts. In bold are the dependencies that have a higher version listed in 3.4.1.

Dependency	React Scripts @3.4.1	React Scripts @3.4.3
@babel/core	7.11.6	7.9.0
@pmmmwh/react-refresh-webpack-plugin	0.4.2	-
@svgr/webpack	5.4.0	4.3.3
@typescript-eslint/eslint-plugin	^4.1.0	^2.10.0
@typescript-eslint/parser	^4.1.0	^2.10.0
babel-eslint	^10.1.0	10.1.0
babel-jest	^26.3.0	^24.9.0
babel-loader	8.1.0	8.1.0
babel-plugin-named-asset-import	^0.3.6	^0.3.6
babel-preset-react-app	^9.1.2	^9.1.2
bfj	^7.0.2	-
camelcase	^6.0.0	^5.3.1
case-sensitive-paths-webpack-plugin	2.3.0	2.3.0
css-loader	4.3.0	3.4.2
dotenv	8.2.0	8.2.0
dotenv-expand	5.1.0	5.1.0
eslint	^7.9.0	^6.6.0
eslint-config-react-app	^5.2.1	^5.2.1
eslint-loader	^4.0.2	3.0.3
eslint-plugin-flowtype	^5.2.0	4.6.0
eslint-plugin-import	^2.22.0	2.20.1
eslint-plugin-jest	^24.0.1	-
eslint-plugin-jsx-a11y	^6.3.1	6.2.3
eslint-plugin-react	^7.20.6	7.19.0
eslint-plugin-react-hooks	^4.1.2	^1.6.1
file-loader	6.1.0	4.3.0
fs-extra	^9.0.0	^8.1.0
html-webpack-plugin	4.4.1	4.0.0-beta.11
identity-obj-proxy	3.0.0	3.0.0
jest	26.4.2	24.9.0
jest-circus	26.4.2	-
jest-resolve	26.4.0	24.9.0
jest-watch-typeahead	0.6.1	0.4.2
mini-css-extract-plugin	0.11.2	0.9.0
optimize-css-assets-webpack-plugin	5.0.4	5.0.3
pnp-webpack-plugin	1.6.4	1.6.4
postcss-flexbugs-fixes	4.2.1	4.1.0
postcss-loader	3.0.0	3.0.0
postcss-normalize	8.0.1	8.0.1
postcss-preset-env	6.7.0	6.7.0
postcss-safe-parser	5.0.0	4.0.1
react-app-polyfill	^1.0.6	^1.0.6
react-dev-utils	^10.2.1	^10.2.1
react-refresh	^0.8.3	-
resolve	1.17.0	1.15.0
resolve-url-loader	3.1.1	3.1.1
sass-loader	8.0.2	8.0.2
semver	7.3.2	6.3.0
style-loader	1.2.1	0.23.1
terser-webpack-plugin	4.2.0	2.3.8
ts-pnp	1.2.0	1.1.6
url-loader	4.1.0	2.3.0
webpack	4.44.1	4.42.0
webpack-dev-server	3.11.0	3.11.0
webpack-manifest-plugin	2.2.0	2.2.0
workbox-webpack-plugin	5.1.4	4.3.1
fsevents	-	2.1.2
jest-environment-jsdom-fourteen	-	1.0.1

Describe the solution you'd like

Upgrade the dependencies in react-scripts@3.4.3 to be consistent with what versions they were in @3.4.1 (unless these were intentionally lower-versioned between versions of react-scripts.... though the changelog seems to suggest that dependencies were only meant to be upgraded, not downgraded).

Describe alternatives you've considered

If the downgrading of these versions was intentional, make a note in the documentation/changelog to reflect that. The fact that the version of react-scripts that's versioned in Github is different than the one that resolves if one uses create-react-app is also very confusing as a user.

Additional context

A few of the issues currently open seem to be related to these changes.
#9707
#9737
#8529

[eddiemonge]

@gaearon

[DanielRuf]

It seems there is also no release / tag regarding this at https://github.com/facebook/create-react-app/releases and https://github.com/facebook/create-react-app/tags

So where are the tags and releases for this?

[DanielRuf]

The fact that the version of react-scripts that's versioned in Github is different than the one that resolves if one uses create-react-app is also very confusing as a user.

In my opinion it's more suspicious than confusing.

[DanielRuf]

See https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/package.json, there was no 3.4.3 in the code, same for 3.4.2.

[DanielRuf]

Diffs between .1 => .2 and .2 => .3 at https://gist.github.com/DanielRuf/af5313341e7784677bca5b4147cf2d75

[DanielRuf]

React Scripts @3.4.1

Interestingly here it is still ^6.6.0: https://github.com/facebook/create-react-app/blob/react-scripts%403.4.1/packages/react-scripts/package.json#L45
And I get eslint 6 when I install react-script 3.4.1.
58b4738

[DanielRuf]

cc @iansu as he published the previous tags and releases.
Currently we can also not use our eslint 7 setup due to this.

[gaearon]

A few of the issues currently open seem to be related to these changes.
#9707
#9737
#8529

Hmm, I don't see the evidence that either of these are related to those releases. Wondering why you think they are related?

Digging into it further, I noticed that there were several dependencies that were higher-versioned in react-scripts@3.4.1 than they are in @3.4.3.

How did you determine that? This doesn't sound right:

https://unpkg.com/browse/react-scripts@3.4.1/package.json
https://unpkg.com/browse/react-scripts@3.4.2/package.json
https://unpkg.com/browse/react-scripts@3.4.3/package.json

You can see @babel/core and other dependencies are exactly the same.

3.4.2 only bumped webpack-dev-server from 3.10.3 to 3.11.0.
3.4.3 only bumped terser-webpack-plugin from 2.3.5 to 2.3.8.

These releases were in response to false positive Snyk audits and contain no other changes than package.json version bump. I didn't make commits for them because they weren't even made from a branch — the versions in master are for 4.x and much further ahead. But again, literally the only difference between those releases are the two version numbers above.

[DanielRuf]

Ok, so no eslint 7 support as I understand correctly? Any plans to support eslint 7 by increasing this or is there some pre-release that we can use for eslint 7
Besides this I still think that the tagged releases should be on GitHub to verify them.

[gaearon]

@DanielRuf I don't understand what this thread has to do with ESLint 7. You're welcome to file a new issue to discuss this, but it doesn't seem relevant to what is being asked (differences between these three releases).

Besides this I still think that the tagged releases should be on GitHub to verify them.

I agree but there is no real commit I can tag. Of course I can just make a fake one if that would help.

[DanielRuf]

I agree but there is no real commit I can tag.

3.4.2 only bumped webpack-dev-server from 3.10.3 to 3.11.0.
3.4.3 only bumped terser-webpack-plugin from 2.3.5 to 2.3.8.

Wouldn't this be reflected / visible in package.json which is versioned?
At least this is commitable I guess ;-)

@DanielRuf I don't understand what this thread has to do with ESLint 7. You're welcome to file a new issue to discuss this, but it doesn't seem relevant to what is being asked (differences between these three releases).

Thanks, we'll check if we can resolve the eslint 7 issue somehow.
At least it seems we can use yarn add react-scripts@4.0.0-next.98 for eslint 7.

[AmyShackles]

A few of the issues currently open seem to be related to these changes.
#9707
#9737
#8529

Hmm, I don't see the evidence that either of these are related to those releases. Wondering why you think they are related?

Digging into it further, I noticed that there were several dependencies that were higher-versioned in react-scripts@3.4.1 than they are in @3.4.3.

How did you determine that? This doesn't sound right:

https://unpkg.com/browse/react-scripts@3.4.1/package.json
https://unpkg.com/browse/react-scripts@3.4.2/package.json
https://unpkg.com/browse/react-scripts@3.4.3/package.json

You can see @babel/core and other dependencies are exactly the same.

3.4.2 only bumped webpack-dev-server from 3.10.3 to 3.11.0.
3.4.3 only bumped terser-webpack-plugin from 2.3.5 to 2.3.8.

These releases were in response to false positive Snyk audits and contain no other changes than package.json version bump. I didn't make commits for them because they weren't even made from a branch — the versions in master are for 4.x and much further ahead. But again, literally the only difference between those releases are the two version numbers above.

If you run npx create-react-app, and look in node_modules/react-scripts, the package.json for 3.4.3 has the lower version dependencies I listed. When I git cloned this repo and ran the commands to run create-react-app locally, the dependencies listed in the package.json were the higher versioned ones you’re seeing.

The reason I felt that this was related to the other issues was that some of the other issues were discussing issues related to having lower-versioned packages.

If you run npx create-react-app and check the react-scripts package.json, do you see what I’m seeing?

[DanielRuf]

As the whole repo is a monorepo you need something like yarn or lerna normally.
The package that you mean is at https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/package.json#L47

You probably got the dependencies from https://github.com/facebook/create-react-app/blob/master/package.json#L27 or https://github.com/facebook/create-react-app/blame/master/packages/react-scripts/package.json#L47 which is for the latest version (4.0.0-next.98).

There is only the 3.4.1 tag at https://github.com/facebook/create-react-app/releases/tag/react-scripts%403.4.1 and the relevant code at https://github.com/facebook/create-react-app/tree/react-scripts%403.4.1/packages/react-scripts

[AmyShackles]

As the whole repo is a monorepo you need something like yarn or lerna normally.
The package that you mean is at https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/package.json#L47

You probably got the dependencies from https://github.com/facebook/create-react-app/blob/master/package.json#L27 or https://github.com/facebook/create-react-app/blame/master/packages/react-scripts/package.json#L47 which is for the latest version (4.0.0-next.98).

There is only the 3.4.1 tag at https://github.com/facebook/create-react-app/releases/tag/react-scripts%403.4.1 and the relevant code at https://github.com/facebook/create-react-app/tree/react-scripts%403.4.1/packages/react-scripts

Again, I'm talking about when you start a new React project using the preferred npx create-react-app {app_name} command and you inspect node_modules/react-scripts, the package.json looks like this:

{
  "bin": {
    "react-scripts": "bin/react-scripts.js"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "bugs": {
    "url": "https://github.com/facebook/create-react-app/issues"
  },
  "bundleDependencies": false,
  "dependencies": {
    "@babel/core": "7.9.0",
    "@svgr/webpack": "4.3.3",
    "@typescript-eslint/eslint-plugin": "^2.10.0",
    "@typescript-eslint/parser": "^2.10.0",
    "babel-eslint": "10.1.0",
    "babel-jest": "^24.9.0",
    "babel-loader": "8.1.0",
    "babel-plugin-named-asset-import": "^0.3.6",
    "babel-preset-react-app": "^9.1.2",
    "camelcase": "^5.3.1",
    "case-sensitive-paths-webpack-plugin": "2.3.0",
    "css-loader": "3.4.2",
    "dotenv": "8.2.0",
    "dotenv-expand": "5.1.0",
    "eslint": "^6.6.0",
    "eslint-config-react-app": "^5.2.1",
    "eslint-loader": "3.0.3",
    "eslint-plugin-flowtype": "4.6.0",
    "eslint-plugin-import": "2.20.1",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-react": "7.19.0",
    "eslint-plugin-react-hooks": "^1.6.1",
    "file-loader": "4.3.0",
    "fs-extra": "^8.1.0",
    "fsevents": "2.1.2",
    "html-webpack-plugin": "4.0.0-beta.11",
    "identity-obj-proxy": "3.0.0",
    "jest": "24.9.0",
    "jest-environment-jsdom-fourteen": "1.0.1",
    "jest-resolve": "24.9.0",
    "jest-watch-typeahead": "0.4.2",
    "mini-css-extract-plugin": "0.9.0",
    "optimize-css-assets-webpack-plugin": "5.0.3",
    "pnp-webpack-plugin": "1.6.4",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-normalize": "8.0.1",
    "postcss-preset-env": "6.7.0",
    "postcss-safe-parser": "4.0.1",
    "react-app-polyfill": "^1.0.6",
    "react-dev-utils": "^10.2.1",
    "resolve": "1.15.0",
    "resolve-url-loader": "3.1.1",
    "sass-loader": "8.0.2",
    "semver": "6.3.0",
    "style-loader": "0.23.1",
    "terser-webpack-plugin": "2.3.8",
    "ts-pnp": "1.1.6",
    "url-loader": "2.3.0",
    "webpack": "4.42.0",
    "webpack-dev-server": "3.11.0",
    "webpack-manifest-plugin": "2.2.0",
    "workbox-webpack-plugin": "4.3.1"
  },
  "deprecated": false,
  "description": "Configuration and scripts for Create React App.",
  "devDependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },
  "engines": {
    "node": ">=8.10"
  },
  "files": [
    "bin",
    "config",
    "lib",
    "scripts",
    "template",
    "template-typescript",
    "utils"
  ],
  "gitHead": "d2f813f8897ffcd2f0b0d2da75d0c44924c92f4d",
  "homepage": "https://github.com/facebook/create-react-app#readme",
  "license": "MIT",
  "name": "react-scripts",
  "optionalDependencies": {
    "fsevents": "2.1.2"
  },
  "peerDependencies": {
    "typescript": "^3.2.1"
  },
  "peerDependenciesMeta": {
    "typescript": {
      "optional": true
    }
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/facebook/create-react-app.git",
    "directory": "packages/react-scripts"
  },
  "types": "./lib/react-app.d.ts",
  "version": "3.4.3"
}

Please note that it says that it's version 3.4.3. And that the dependencies are the lower-versioned ones I specified earlier.

[DanielRuf]

Please note that it says that it's version 3.4.3. And that the dependencies are the lower-versioned ones I specified earlier.

Yes, this is the correct one. The question is from where the higher ones are. Because they just forgot to bump the version number here in the repo but increased the versions. You can not compare the current master branch (which is 4.0.0-next.98) against the npm releases.

[DanielRuf]

I'm talking about when you start a new React project using the preferred npx create-react-app {app_name} command

Do you have two seprate projects which were created with this command and have the different dependency versions / entries and use 3.4.1 and 3.4.3?

[gaearon]

@DanielRuf The discussion is about what's on npm, so I think you're causing more confusion by suggesting to look at GitHub. Those versions are not relevant.

[DanielRuf]

I'm not confusing things.

See #9747 (comment)

If you run npx create-react-app, and look in node_modules/react-scripts, the package.json for 3.4.3 has the lower version dependencies I listed. When I git cloned this repo and ran the commands to run create-react-app locally, the dependencies listed in the package.json were the higher versioned ones you’re seeing.

[gaearon]

Ahhhhh

[gaearon]

Ok this makes sense now. Thanks @DanielRuf and @AmyShackles for the extra details.

Both 3.4.1, 3.4.2, and 3.4.3 have the "lower" versions. There is no difference between them except for the two packages I mentioned above.

However, the versions you get if you git clone the repo are going to be higher because the master branch is much ahead of what's on npm. The master branch has no relation to the 3.4.1 release, even though package.json on the master branch still says 3.4.1. This is just because there hasn't been a release from master since 3.4.1, so the version has not been edited on GitHub since then.

When 4.0.0 is released, the versions on GitHub will match what's on npm. In the meantime, you're welcome to try the 4.x beta (4.0.0-next.98) which has the "higher" versions.

[AmyShackles]

AH! THAT makes sense. Sorry to be a bother! 😓

[DanielRuf]

No worries. Thanks to this I found the 4.0.0-next.98 pre-release on npm which uses eslint 7 so we could continue with our project. The version string in the package.json file here in the repo and the missing .2 and .3 releases were also confusing to me. So it was very helpful as @gaearon could clear the things up.