question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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® Core™ 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.

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:3
  • Comments:10

github_iconTop GitHub Comments

9reactions
DaveLocommented, Nov 27, 2020

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.

6reactions
EVRUSINcommented, Mar 26, 2021

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!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Troubleshooting - Create React App
Check that your file is imported by your entrypoint. TypeScript will show errors on any of your source files, but webpack only reloads...
Read more >
Error when updating create-react-app to 4.0 with typescript ...
This can be fixed by enabling noFallthroughCasesInSwitch option in your tsconfig.json . See the discussion here for more info.
Read more >
How To Create New React App With TypeScript ... - YouTube
react # typescript Let's create a new React app with TypeScript from Terminal (or command line) And basically here is the command:npx ...
Read more >
Typescript React project crashes. - Visual Studio Feedback
Microsoft Visual Studio Community 2022 (64-bit) - Current Version 17.1.0. I simply create a new ts react proj, clicked the start button(localhost(Chrome) ) ......
Read more >
Create React App and TypeScript: A Quick How-To | Built In
You can start a new TypeScript app using templates. To use our provided TypeScript template, append --template typescript to the creation ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found