Create-react-app: [email protected] has higher dependency versions than [email protected]?
Is your proposal related to a problem?
Starting a project with npx create-react-app app-name currently uses [email protected]. 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 [email protected] 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 [email protected] 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.
https://github.com/facebook/create-react-app/issues/9707
https://github.com/facebook/create-react-app/issues/9737
https://github.com/facebook/create-react-app/issues/8529
AmyShackles
All 22 comments
@gaearon
eddiemonge
on 6 Oct 2020
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
on 7 Oct 2020
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
on 7 Oct 2020
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
on 7 Oct 2020
Diffs between .1 => .2 and .2 => .3 at https://gist.github.com/DanielRuf/af5313341e7784677bca5b4147cf2d75
DanielRuf
on 7 Oct 2020
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.
https://github.com/facebook/create-react-app/commit/58b4738a490f9643f540e9fdb74431c4d73e3ad7
DanielRuf
on 7 Oct 2020
cc @iansu as he published the previous tags and releases.
Currently we can also not use our eslint 7 setup due to this.
DanielRuf
on 7 Oct 2020
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 [email protected] than they are in @3.4.3.
How did you determine that? This doesn't sound right:
https://unpkg.com/browse/[email protected]/package.json
https://unpkg.com/browse/[email protected]/package.json
https://unpkg.com/browse/[email protected]/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.
gaearon
on 7 Oct 2020
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.
DanielRuf
on 7 Oct 2020
@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.
gaearon
on 7 Oct 2020
I agree but there is no real commit I can tag.
3.4.2 only bumped
webpack-dev-serverfrom3.10.3to3.11.0.
3.4.3 only bumpedterser-webpack-pluginfrom2.3.5to2.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 [email protected] for eslint 7.
DanielRuf
on 7 Oct 2020
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 [email protected] than they are in @3.4.3.
How did you determine that? This doesn't sound right:
https://unpkg.com/browse/[email protected]/package.json
https://unpkg.com/browse/[email protected]/package.json
https://unpkg.com/browse/[email protected]/package.jsonYou can see
@babel/coreand other dependencies are exactly the same.3.4.2 only bumped
webpack-dev-serverfrom3.10.3to3.11.0.
3.4.3 only bumpedterser-webpack-pluginfrom2.3.5to2.3.8.These releases were in response to false positive Snyk audits and contain no other changes than
package.jsonversion bump. I didn't make commits for them because they weren't even made from a branch — the versions inmasterare 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?
AmyShackles
on 7 Oct 2020
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
DanielRuf
on 7 Oct 2020
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#L47You 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.
AmyShackles
on 7 Oct 2020
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
on 7 Oct 2020
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?
DanielRuf
on 7 Oct 2020
@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.
gaearon
on 7 Oct 2020
I'm not confusing things.
See https://github.com/facebook/create-react-app/issues/9747#issuecomment-704996285
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.
DanielRuf
on 7 Oct 2020
Ahhhhh
gaearon
on 7 Oct 2020
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.
gaearon
on 7 Oct 2020
AH! THAT makes sense. Sorry to be a bother! 😓
AmyShackles
on 7 Oct 2020
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.
DanielRuf
on 7 Oct 2020
Related issues
fson
·
3Comments
adrice727
·
3Comments
alleroux
·
3Comments
DaveLindberg
·
3Comments
oltsa
·
3Comments