Create-react-app: Unable to recover from dependency issues

[kimfucious]

Is this a bug report?

Yes, although it's highly probable that I've done something stupid.

For the record everything was working yesterday, and today it's not. Today I added redux, react-redux, and redux-thunk, which may have (but probably didn't) caused this issue. I removed them, and did multiple dependency resets, but to no avail.

My main issue is that I cannot determine how to resolve the dependency issue described in the form below, which seems to be that there are two (different) versions of babel-loader being loaded.

When I add SKIP_PREFLIGHT_CHECK=true in .env, I get a different error:

Error: Cannot find module 'fork-ts-checker-webpack-plugin'

running npm ls fork-ts-checker-webpack-plugin returns empty, and I believe this is a dependency of react-scripts.

I did a look-see in the yarn-lock and found the following entry for an alt version, and this is where I'm pretty much stuck trying to figure this out, as I don't want to proceed to start trying to manually add dependencies willy-nilly.

[email protected]:
  version "0.4.14"
  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin-alt/-/fork-ts-checker-webpack-plugin-alt-0.4.14.tgz#1bd6c0d97b7d4682dde61255fcbd78b72f7473a0"
  integrity sha512-s0wjOBuPdylMRBzZ4yO8LSJuzem3g0MYZFxsjRXrFDQyL5KJBVSq30+GoHM/t/r2CRU4tI6zi04sq6OXK0UYnw==
  dependencies:
    babel-code-frame "^6.22.0"
    chalk "^2.4.1"
    chokidar "^2.0.4"
    lodash "^4.17.11"
    micromatch "^3.1.10"
    minimatch "^3.0.4"
    resolve "^1.5.0"
    tapable "^1.0.0"

Did you try recovering your dependencies?

I've done this several times before submitting this issue.

Yarn version 1.13.0

FYI: yarn is what I usually use, and I know not to mix package managers; however, in troubleshooting this issue, I've also done dependency resets and tried to re-install with npm version 6.7.0

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Environment

Environment Info:

System:
OS: Linux 4.4 Ubuntu 18.04.1 LTS (Bionic Beaver)
CPU: x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
Binaries:
Node: 10.13.0 - ~/.nvm/versions/node/v10.13.0/bin/node
Yarn: 1.13.0 - ~/.yarn/bin/yarn
npm: 6.7.0 - ~/.nvm/versions/node/v10.13.0/bin/npm
npmPackages:
react: ^16.7.0 => 16.8.1
react-dom: ^16.7.0 => 16.8.1
react-scripts: 2.1.3 => 2.1.3
npmGlobalPackages:
create-react-app: 2.1.3

Steps to Reproduce

(Write your steps here:)

1. delete node_modules
2. delete yarn.lock
3. run "yarn"
4. run "yarn start"

I've actually tried the above with npm as well, like this:

1. delete node_modules
2. delete package.lock.json
3. run "npm install"
4. run "npm run start"

Expected Behavior

The app should run...

Actual Behavior

After a dependency reset using yarn, yarn start errors out with the below. Note that this does not show when pre-flight check is skipped (in .env), and it goes straight to the fork-ts-checker-webpack-plugin error as shown in the npm error (shown after this):

The react-scripts package provided by Create React App requires a dependency:
"babel-loader": "8.0.4"

The command exits with the following:

error Command failed with exit code 1.

When I enter npm ls babel-loader, I get:
└─┬ [email protected]
├── [email protected]
└─┬ [email protected]
└── [email protected]

After a dependency reset with npm, npm run start errors out with the below:

Error: Cannot find module 'fork-ts-checker-webpack-plugin'

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

[6footGeek]

Same here - just installed a new library 'react-pose' on a fresh install and fell over immediately, deleted package-lock.json and removed library and still falling over.
Try:

npm install fork-ts-checker-webpack-plugin && npm install typescript

This gets create-react-build to actually spin up the dev environment but not sure why they are needed.

[kimfucious]

@6footGeek nice workaround, thanks. Hoping we find root cause at some point.

[kimfucious]

oddly, while installing firebase, I've got a new dependency requirement, tslint:

I feel like I'm live coding against updating dependencies here...

[email protected] requires a peer of tslint@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.

[piotr-cz]

Possible fix: #6395

[ianschmitz]

We decided to revert #5903 to fix react-dev-utils for downstream consumers. This will give us a bit of time to figure out the best solution for how to consume the fork-ts-checker-webpack-plugin dependency.

2.1.5 is now available

[kimfucious]

Hey @ianschmitz ... thanks, but still trying to recover here. I've done a dependency refresh with yarn, and I'm still stuck at (see original problem description for details):

The react-scripts package provided by Create React App requires a dependency:

"babel-loader": "8.0.4"

2nd question: is there a way to not receive breaking changes, like by setting explicit version in package.json?

[kimfucious]

even better...

[email protected]" has unmet peer dependency "webpack@^2.3.0 || ^3.0.0 || ^4.0.0".

[kimfucious]

Not to be a prat, but hey, @gaearon (Dan), WTF is going on here?

[6footGeek]

@kimfucious you can set a specific version like: "my_dep": "2.2.0" which will only install that specific version forever.
To keep on top of new package releases (if your app is quite large) you can build a CI integration that will do an update / install of the latest versions across the board and run your tests against the new versions. breaking changes will fail this build and then you don't auto-deploy it.

https://docs.npmjs.com/about-semantic-versioning

[kimfucious]

thanks, @6footGeek

Maybe, I'm being idealistic, but my hope is that apps don't crash right after yarn / npm install 😉 when they worked an hour ago, esp. create-react-app.

If I actually knew where to fix fork-ts-checker-webpack-plugin, I'd set it and be done with it, but it seems a moving target three sheets deep at the moment.

[6footGeek]

Alas, this is the world of the javascript friend! There isn't a lot you can do other than specify the specific versions you need and keep them untouched, your installs will work fine then as long as you keep your package-lock around :)
Have a look at your package.json - does it have the '^' character before any of the packages? that will try and pull in anything above that version.

For more reading of some of the consequences of changes in packages, you can read

https://www.theregister.co.uk/2016/03/23/npm_left_pad_chaos/

I recommend popcorn, its quite the story haha

[kimfucious]

thanks for the laugh, @6footGeek

I'm aware of said pitfalls, it's just that with CRA, I'd expect that things not to roll down the pike and into my peas and mash so readily. Something strange seems to be going on here.

Dumb question: fork-whatever-blah-blah is not something I'd normally control in my package.json, as I'm using CRA. Am I wrong to assume that using CRA to build an app would provide a stable environment?

Dumb question 2: is there a "stable release" of CRA that doesn't have said pitfalls?

Best,

Kim

[kimfucious]

And for the record:

"dependencies": {
    "axios": "^0.18.0",
    "firebase": "^5.8.2",
    "fork-ts-checker-webpack-plugin": "^0.5.2", <= added manually to prevent crash
    "history": "^4.7.2",
    "jstz": "^2.1.1",
    "moment": "^2.24.0",
    "numeral": "^2.0.6",
    "prop-types": "^15.6.2",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.3",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "typescript": "^3.3.3", <= added manually to prevent crash
    "uuid": "^3.3.2",
    "yup": "^0.26.10"
  },

[kimfucious]

  "devDependencies": {
    "dom-testing-library": "^3.16.5",
    "jest-dom": "^3.0.1",
    "react-testing-library": "^5.4.4",
    "react-test-renderer": "^16.7.0",
    "tslint": "^5.12.1", <= added manually to prevent crash
    "user-event": "^1.4.4"
  }

[ianschmitz]

2.1.5 was released which reverted the change to react-dev-utils that was importing fork-ts-checker-webpack-plugin.

Can you remove your work arounds and delete your node_modules and any lock files and try [email protected]? I tried creating a fresh app and yarn start worked as expected.

[mikew]

This was another thing I noticed in https://github.com/facebook/create-react-app/pull/5903#issuecomment-457461152. I should have mentioned that a package was requiring fork-ts-checker-plugin without adding it to its own package.json

I was able to solve it by passing fork-ts-checker-plugin from one package to another, to avoid installing it in two places.

[kimfucious]

Hi @ianschmitz ,

I've removed workarounds updated to [email protected] did another dependency reset using npm.

It's all good! Thanks for helping to sort this out.