'Failed to initialize watch plugin' when running tests for newly created app

dannyskoog commented 2 years ago

Describe the bug

Running tests (using npm test) for a newly created app throws the error:

Error: Failed to initialize watch plugin "node_modules/jest-watch-typeahead/filename.js":

  ● Test suite failed to run

    file:///Users/dannyskoog/GIT/test-version-5/node_modules/jest-watch-typeahead/build/file_name_plugin/prompt.js:4
    import { PatternPrompt, printPatternCaret, printRestoredPatternCaret } from 'jest-watcher';
                            ^^^^^^^^^^^^^^^^^
    SyntaxError: Named export 'printPatternCaret' not found. The requested module 'jest-watcher' is a CommonJS module, which may not support all module.exports as named exports.
    CommonJS modules can always be imported via the default export, for example using:

    import pkg from 'jest-watcher';
    const { PatternPrompt, printPatternCaret, printRestoredPatternCaret } = pkg;

      at async requireOrImportModule (node_modules/jest-util/build/requireOrImportModule.js:65:32)
      at async watch (node_modules/@jest/core/build/watch.js:337:34)
      at async _run10000 (node_modules/@jest/core/build/cli/index.js:311:7)
      at async runCLI (node_modules/@jest/core/build/cli/index.js:173:3)

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

https://create-react-app.dev/docs/troubleshooting/

Environment

node (via nvm): 14.15.4 npm (via nvm): 6.14.10 create-react-app: 5.0.0

Steps to reproduce

(Write your steps here:)

npx create-react-app my-app --template typescript
cd my-app
npm test

Expected behavior

Tests should be executed

Actual behavior

An error is thrown before the watcher is set up and tests are ran

Workaround

Running npm i -D --exact jest-watch-typeahead@0.6.5 solves the problem (as suggested here https://github.com/facebook/create-react-app/issues/11043#issuecomment-942472592)

raix commented 2 years ago

Hi @dannyskoog thanks for reporting, I cannot replicate, my steps could be slightly different though - here goes:

npx create-react-app@5.0.0 test-jest-watch --template typescript
cd test-jest-watch
npm run test

All green

dannyskoog commented 2 years ago

@raix Thanks. Your steps seem equivalent.

Let me try to scaffold a few more apps + try different variations of Node.

Will report back once I've done so.

jbprat commented 2 years ago

I had the same issue with Node 14.7.0 but it's working fine with Node 16.1.0, on an intel mac book pro! The create-react-app script required at least Node 14 but it may not be enough.

dannyskoog commented 2 years ago

Thanks @jbprat!

Yeah it's clearly indicated here that Node 14 is supposed to be supported.

And if it's of any worth - I'm also on a MacBook Pro.

dannyskoog commented 2 years ago

I scaffolded a few new apps using different versions of Node (via nvm). And then ran npm test Here are the results:

🔴 Error (Node 14.15.4 & Npm 6.14.10) 🔴 Error (Node 15.11.0 & Npm 7.6.0) ✅ Success (Node 16.13.1 & Npm 8.1.2)

So it seems quite clear that the issue is related to what Node version that is used and that the node engines section (here) isn't accurate.

dannyskoog commented 2 years ago

Okay. So I believe I found out the actual root cause behind the issue. I will explain:

react-scripts (5.0.0) has a dependency on jest-watch (1.0.0) (reference https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/package.json#L55)
jest-watch (1.0.0) requires a Node version of ^12.22.0 || ^14.17.0 || >=16.0.0 (reference https://github.com/jest-community/jest-watch-typeahead/blob/ba70243cded73d798102d6d6c3f9fd11a344c0d9/package.json#L96)

And I tried out using Node 14.17.0 for scaffolding a new app and then running the npm test script. It worked fine.

TL;DR; The react-scripts test command works with the following Node versions:

Major version 14 and minimum minor version 17 (^14.17.0)
Major version 16 (>=16.0.0)

@raix It would be nice to update https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/package.json#L12 to ^14.17.0 || >=16.0.0

dannyskoog commented 2 years ago

I noticed that there is a PR up for changing the minimum supported Node version to 16 https://github.com/facebook/create-react-app/pull/11747

That should take care of this issue 👍

vishnu4 commented 2 years ago

since react-script 5 was meant to support 14, and now you're basically breaking that by saying you'll only support 16, don't you need to increment react-script to 6 now?

yoss5u commented 2 years ago

the comand

npm i -D --exact jest-watch-typeahead@0.6.5

work for me! thanks node version: 14.0.0 npm v6.14.4

andersonar12 commented 2 years ago

npm i -D --exact jest-watch-typeahead@0.6.5 works for me, thanks a lot

MrBrN197 commented 2 years ago

@dannyskoog I think you wanted to link this https://github.com/jest-community/jest-watch-typeahead/blob/ba70243cded73d798102d6d6c3f9fd11a344c0d9/package.json#L96 instead for your second point

dannyskoog commented 2 years ago

@dannyskoog I think you wanted to link this https://github.com/jest-community/jest-watch-typeahead/blob/ba70243cded73d798102d6d6c3f9fd11a344c0d9/package.json#L96 instead for your second point

Good catch. Updated 🙏