search

facebook / create-react-app

Set up a modern web app by running one command.
https://create-react-app.dev
MIT License
102.8k stars 26.87k forks source link

using create-react-app typescript template app crashes during startup #10152

Open DaveLo opened 3 years ago

DaveLo commented 3 years ago

Describe the bug

I'm attempting to run through a tutorial, so I start a new project with

Error looks like: 

/Users/**/**/Learn/React/testing-hooks/node_modules/watchpack/lib/chokidar.js:17
throw new Error(
^

Error: No version of chokidar is available. Tried chokidar@2 and chokidar@3.
You could try to manually install any chokidar version.
chokidar@3: Error: Cannot find module 'chokidar'
Require stack:
- /Users/**/**/Learn/React/testing-hooks/node_modules/watchpack/lib/chokidar.js
- /Users/**/**/Learn/React/testing-hooks/node_modules/watchpack/lib/DirectoryWatcher.js
- /Users/**/**/Learn/React/testing-hooks/node_modules/watchpack/lib/watcherManager.js
- /Users/**/**/Learn/React/testing-hooks/node_modules/watchpack/lib/watchpack.js
- /Users/**/**/Learn/React/testing-hooks/node_modules/webpack/lib/node/NodeWatchFileSystem.js
- /Users/**/**/Learn/React/testing-hooks/node_modules/webpack/lib/node/NodeEnvironmentPlugin.js
- /Users/**/**/Learn/React/testing-hooks/node_modules/webpack/lib/webpack.js
- /Users/**/**/Learn/React/testing-hooks/node_modules/react-scripts/scripts/start.js
chokidar@2: Error: Cannot find module 'watchpack-chokidar2'
Require stack:
- /Users/**/**/Learn/React/testing-hooks/node_modules/watchpack/lib/chokidar.js
- /Users/**/**/Learn/React/testing-hooks/node_modules/watchpack/lib/DirectoryWatcher.js
- /Users/**/**/Learn/React/testing-hooks/node_modules/watchpack/lib/watcherManager.js
- /Users/**/**/Learn/React/testing-hooks/node_modules/watchpack/lib/watchpack.js
- /Users/**/**/Learn/React/testing-hooks/node_modules/webpack/lib/node/NodeWatchFileSystem.js
- /Users/**/**/Learn/React/testing-hooks/node_modules/webpack/lib/node/NodeEnvironmentPlugin.js
- /Users/**/**/Learn/React/testing-hooks/node_modules/webpack/lib/webpack.js
- /Users/**/**/Learn/React/testing-hooks/node_modules/react-scripts/scripts/start.js

    at Object.<anonymous> (/Users/**/**/Learn/React/testing-hooks/node_modules/watchpack/lib/chokidar.js:17:7)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/**/**/Learn/React/testing-hooks/node_modules/watchpack/lib/DirectoryWatcher.js:9:16)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! testing-hooks@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the testing-hooks@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/**/.npm/_logs/2020-11-25T23_46_23_673Z-debug.log

Did you try recovering your dependencies?

npm version: 6.14.9

Also, when removing and re-installing I got a lot of deprecation warnings, been a while since I spun up a fresh project so not sure if that's normal

npm WARN deprecated rollup-plugin-babel@4.4.0: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-babel.
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated core-js@2.6.12: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.

> core-js@2.6.12 postinstall /Users/**/**/Learn/React/testing-hooks/node_modules/babel-runtime/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> core-js@3.8.0 postinstall /Users/**/**/Learn/React/testing-hooks/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

> core-js-pure@3.8.0 postinstall /Users/**/**/Learn/React/testing-hooks/node_modules/core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"

> ejs@2.7.4 postinstall /Users/**/**/Learn/React/testing-hooks/node_modules/ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

npm notice created a lockfile as package-lock.json. You should commit this file.
added 1805 packages from 773 contributors and audited 1842 packages in 66.077s

120 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Which terms did you search for in User Guide?

Environment

Environment Info:

current version of create-react-app: 4.0.1 running from /Users/**/.npm/_npx/19711/lib/node_modules/create-react-app

System: OS: macOS 10.15.6 CPU: (4) x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz Binaries: Node: 14.15.0 - ~/.nvm/versions/node/v14.15.0/bin/node Yarn: Not Found npm: 6.14.9 - ~/.nvm/versions/node/v14.15.0/bin/npm Browsers: Chrome: 87.0.4280.67 Edge: Not Found Firefox: Not Found Safari: 13.1.2 npmPackages: react: ^17.0.1 => 17.0.1 react-dom: ^17.0.1 => 17.0.1 react-scripts: 4.0.1 => 4.0.1 npmGlobalPackages: create-react-app: Not Found

Steps to reproduce

(Write your steps here:) Same as description, this is a fresh install

  1. npx create-react-app --template typescript .
  2. npm start

Expected behavior

Template app starts

Actual behavior

Crash with error text from above.

Reproducible demo

Haven't changed a single thing from the template install, no real purpose in creating a repo.

DaveLo commented 3 years ago

If I npm i -D chokidar and then npm start it will load, so maybe just a missing dependency somewhere?

imrishav commented 3 years ago

Yes installing it manually will solve this. Don't start the server, first install it using

npm i -D chokidar

then

npm start

DaveLo commented 3 years ago

Yes installing it manually will solve this. Don't start the server, first install it using

npm i -D chokidar

then

npm start

Yes, but that's not an optimal developer experience for a tool that is supposed to work out of the box. Thus a bug report.

EVRUSIN commented 3 years ago

Got the same issue for ubuntu 20.04 

/home/owner/IdeaProjects/go-insurance/frontend/node_modules/watchpack/lib/chokidar.js:17
throw new Error(
^
Error: No version of chokidar is available. Tried chokidar@2 and chokidar@3.
You could try to manually install any chokidar version.
chokidar@3: Error: Cannot find module 'chokidar'
Require stack:
- /home/owner/IdeaProjects/go-insurance/frontend/node_modules/watchpack/lib/chokidar.js
- /home/owner/IdeaProjects/go-insurance/frontend/node_modules/watchpack/lib/DirectoryWatcher.js
- /home/owner/IdeaProjects/go-insurance/frontend/node_modules/watchpack/lib/watcherManager.js
- /home/owner/IdeaProjects/go-insurance/frontend/node_modules/watchpack/lib/watchpack.js
- /home/owner/IdeaProjects/go-insurance/frontend/node_modules/webpack/lib/node/NodeWatchFileSystem.js
- /home/owner/IdeaProjects/go-insurance/frontend/node_modules/webpack/lib/node/NodeEnvironmentPlugin.js
- /home/owner/IdeaProjects/go-insurance/frontend/node_modules/webpack/lib/webpack.js
- /home/owner/IdeaProjects/go-insurance/frontend/node_modules/react-scripts/scripts/start.js
chokidar@2: Error: Cannot find module 'watchpack-chokidar2'
Require stack:
- /home/owner/IdeaProjects/go-insurance/frontend/node_modules/watchpack/lib/chokidar.js
- /home/owner/IdeaProjects/go-insurance/frontend/node_modules/watchpack/lib/DirectoryWatcher.js
- /home/owner/IdeaProjects/go-insurance/frontend/node_modules/watchpack/lib/watcherManager.js
- /home/owner/IdeaProjects/go-insurance/frontend/node_modules/watchpack/lib/watchpack.js
- /home/owner/IdeaProjects/go-insurance/frontend/node_modules/webpack/lib/node/NodeWatchFileSystem.js
- /home/owner/IdeaProjects/go-insurance/frontend/node_modules/webpack/lib/node/NodeEnvironmentPlugin.js
- /home/owner/IdeaProjects/go-insurance/frontend/node_modules/webpack/lib/webpack.js
- /home/owner/IdeaProjects/go-insurance/frontend/node_modules/react-scripts/scripts/start.js
    at Object.<anonymous> (/home/owner/IdeaProjects/go-insurance/frontend/node_modules/watchpack/lib/chokidar.js:17:7)
    at Module._compile (node:internal/modules/cjs/loader:1092:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
    at Module.load (node:internal/modules/cjs/loader:972:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:996:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.<anonymous> (/home/owner/IdeaProjects/go-insurance/frontend/node_modules/watchpack/lib/DirectoryWatcher.js:9:16)
    at Module._compile (node:internal/modules/cjs/loader:1092:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
npm ERR! code 1
npm ERR! path /home/owner/IdeaProjects/go-insurance/frontend
npm ERR! command failed
npm ERR! command sh -c react-scripts start
npm ERR! A complete log of this run can be found in:
npm ERR!     /home/owner/.npm/_logs/2021-03-26T18_20_51_174Z-debug.log`

But I can't install chokidar

npm ERR! code EBADPLATFORM
npm ERR! notsup Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin"} (current: {"os":"linux","arch":"x64"})
npm ERR! notsup Valid OS:    darwin
npm ERR! notsup Valid Arch:  undefined
npm ERR! notsup Actual OS:   linux
npm ERR! notsup Actual Arch: x64

Please, need some help!

m-nathani commented 3 years ago

getting the same issue as above.. can anyone please look into of whats the cause ?

Compiled successfully!

You can now view webrms in the browser.

  Local:            http://localhost:3001
  On Your Network:  http://192.168.0.160:3001

Note that the development build is not optimized.
To create a production build, use npm run build.

/home/murtaza/umai/webrms/node_modules/watchpack/lib/chokidar.js:17
throw new Error(
^

Error: No version of chokidar is available. Tried chokidar@2 and chokidar@3.
You could try to manually install any chokidar version.
chokidar@3: Error: Cannot find module 'chokidar'
Require stack:
- /home/murtaza/umai/webrms/node_modules/watchpack/lib/chokidar.js
- /home/murtaza/umai/webrms/node_modules/watchpack/lib/DirectoryWatcher.js
- /home/murtaza/umai/webrms/node_modules/watchpack/lib/watcherManager.js
- /home/murtaza/umai/webrms/node_modules/watchpack/lib/watchpack.js
- /home/murtaza/umai/webrms/node_modules/webpack/lib/node/NodeWatchFileSystem.js
- /home/murtaza/umai/webrms/node_modules/webpack/lib/node/NodeEnvironmentPlugin.js
- /home/murtaza/umai/webrms/node_modules/webpack/lib/webpack.js
- /home/murtaza/umai/webrms/scripts/start.js
chokidar@2: Error: Cannot find module 'watchpack-chokidar2'
Require stack:
- /home/murtaza/umai/webrms/node_modules/watchpack/lib/chokidar.js
- /home/murtaza/umai/webrms/node_modules/watchpack/lib/DirectoryWatcher.js
- /home/murtaza/umai/webrms/node_modules/watchpack/lib/watcherManager.js
- /home/murtaza/umai/webrms/node_modules/watchpack/lib/watchpack.js
- /home/murtaza/umai/webrms/node_modules/webpack/lib/node/NodeWatchFileSystem.js
- /home/murtaza/umai/webrms/node_modules/webpack/lib/node/NodeEnvironmentPlugin.js
- /home/murtaza/umai/webrms/node_modules/webpack/lib/webpack.js
- /home/murtaza/umai/webrms/scripts/start.js

    at Object.<anonymous> (/home/murtaza/umai/webrms/node_modules/watchpack/lib/chokidar.js:17:7)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/home/murtaza/umai/webrms/node_modules/watchpack/lib/DirectoryWatcher.js:9:16)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
Leonelmarianog commented 3 years ago

Same issue, only difference is that I was actually able to run npm start once, after that, I could not start the development server anymore.

VGamezz19 commented 3 years ago

any update here?

SQReder commented 3 years ago

bump

EVRUSIN commented 3 years ago

If it can help, I used to pack my project with npm v7.7.5 and I got my issue. When I start packing it with npm v6.14.4, I got no issues.

m-nathani commented 3 years ago

its something definitely wrong with npm 7.*.* .. i tried npm i --legacy-peer-deps and it worked for me...

however it shouldn't be like this and dependencies should handled in latest stable version.. also haven't tried removing node_modules and running npm i after it..

here is the detailed reasoning of why it may cause: https://stackoverflow.com/questions/66239691/what-does-npm-install-legacy-peer-deps-do-exactly-when-is-it-recommended-wh/66620869#66620869