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

DaveLo · 2020-11-26T00:10:22Z

Describe the bug

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

npx create-react-app --template typescript
wait on install
set workspace typescript version (read solution in pinned issue)
Code shows no errors, I haven't changed anything from the template yet
npm start
wait for build
app crashes with error

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?

No version of chokidar is available
chokidar
typescript

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

npx create-react-app --template typescript .
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.

The text was updated successfully, but these errors were encountered:

DaveLo · 2020-11-26T00:16:33Z

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

imrishav · 2020-11-27T05:05:35Z

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

npm i -D chokidar

then

npm start

DaveLo · 2020-11-27T12:13:14Z

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 · 2021-03-26T18:38:12Z

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 · 2021-04-07T11:36:06Z

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 · 2021-04-11T15:37:15Z

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 · 2021-04-13T14:34:45Z

any update here?

SQReder · 2021-04-16T16:37:17Z

bump

EVRUSIN · 2021-04-17T13:13:56Z

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 · 2021-04-19T13:15:40Z

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

DaveLo added issue: bug report needs triage labels Nov 26, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

DaveLo commented Nov 26, 2020 •

edited

DaveLo commented Nov 26, 2020

imrishav commented Nov 27, 2020

DaveLo commented Nov 27, 2020

EVRUSIN commented Mar 26, 2021 •

edited

m-nathani commented Apr 7, 2021

Leonelmarianog commented Apr 11, 2021

VGamezz19 commented Apr 13, 2021

SQReder commented Apr 16, 2021

EVRUSIN commented Apr 17, 2021

m-nathani commented Apr 19, 2021 •

edited

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

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

Comments

DaveLo commented Nov 26, 2020 • edited

Describe the bug

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to reproduce

Expected behavior

Actual behavior

Reproducible demo

DaveLo commented Nov 26, 2020

imrishav commented Nov 27, 2020

DaveLo commented Nov 27, 2020

EVRUSIN commented Mar 26, 2021 • edited

m-nathani commented Apr 7, 2021

Leonelmarianog commented Apr 11, 2021

VGamezz19 commented Apr 13, 2021

SQReder commented Apr 16, 2021

EVRUSIN commented Apr 17, 2021

m-nathani commented Apr 19, 2021 • edited

DaveLo commented Nov 26, 2020 •

edited

EVRUSIN commented Mar 26, 2021 •

edited

m-nathani commented Apr 19, 2021 •

edited