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

[dannyskoog]

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:)

1. npx create-react-app my-app --template typescript
2. cd my-app
3. 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 #11043 (comment))

[raix]

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

1. npx create-react-app@5.0.0 test-jest-watch --template typescript
2. cd test-jest-watch
3. npm run test

All green

[dannyskoog]

@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]

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]

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]

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]

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]

I noticed that there is a PR up for changing the minimum supported Node version to 16 #11747

That should take care of this issue 👍

[vishnu4]

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]

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]

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

[MrBrN197]

@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]

@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 🙏

[surajsgh]

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

This solution is working absolutely fine for me.

[reddyabilash919]

npm i -D --exact jest-watch-typeahead@0.6.5 worked for me on Node version: 14.16.0 V

[prabingeorge]

npm i -D --exact jest-watch-typeahead@0.6.5 worked for me on Node version: 14.15.5 V

worked for me

[MadhaviMadhavi]

the command worked for me. Much thanks!
npm i -D --exact jest-watch-typeahead@0.6.5
node version: 14.0.0 , npm v6.14.4

[deBilla]

Upgrading the node version worked for me.

[mwaqarshahid]

The command:

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

worked for me! Thanks 🙏
node version: 14.15.2
npm version: 6.14.18