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

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

Open dannyskoog opened this issue 2 years ago • 17 comments

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 [email protected] solves the problem (as suggested here https://github.com/facebook/create-react-app/issues/11043#issuecomment-942472592)

Dec 17 '21 14:12 dannyskoog

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

npx [email protected] test-jest-watch --template typescript
cd test-jest-watch
npm run test

All green

Dec 18 '21 09:12 raix

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

Dec 18 '21 10:12 dannyskoog

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.

Dec 18 '21 22:12 jbprat

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.

Dec 18 '21 22:12 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.

Dec 21 '21 12:12 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

Dec 21 '21 15:12 dannyskoog

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 👍

Dec 21 '21 15:12 dannyskoog

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?

Feb 03 '22 22:02 vishnu4

the comand

npm i -D --exact [email protected]

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

Feb 09 '22 05:02 yoss5u

npm i -D --exact [email protected] works for me, thanks a lot

Feb 24 '22 02:02 andersonar12

@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

Mar 02 '22 00:03 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

Good catch. Updated 🙏

Mar 26 '22 20:03 dannyskoog