Import statement in module error with Yarn 3.x

Describe the bug

I can’t run Jest with Yarn 3 and CRA 5

Did you try recovering your dependencies?

yes; yarn --version is 3.1.1

Which terms did you search for in User Guide?

n/a

Environment

yarn dlx create-react-app --info:

Environment Info:

  current version of create-react-app: 5.0.0
  running from /Users/suman/.yarn/berry/cache/create-react-app-npm-5.0.0-afe57ebee6-8.zip/node_modules/create-react-app

  System:
    OS: macOS 12.1
    CPU: (4) x64 Intel(R) Core(TM) i5-5350U CPU @ 1.80GHz
  Binaries:
    Node: 17.2.0 - /private/var/folders/j8/_wc022w91rvctlq5_t8xqcvc0000gn/T/xfs-bcd1d987/node
    Yarn: 3.1.1 - /private/var/folders/j8/_wc022w91rvctlq5_t8xqcvc0000gn/T/xfs-bcd1d987/yarn
    npm: 8.1.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 96.0.4664.93
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.1
  npmPackages:
    react: Not Found
    react-dom: Not Found
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

(Write your steps here:)

1. yarn create react-app my-app --template typescript && cd my-app
2. yarn set version berry
3. yarn dedupe
4. yarn run test outputs the error below

Expected behavior

I expect jest to run normally

Actual behavior

yarn run etst outputs this:

Error: Failed to initialize watch plugin ".yarn/__virtual__/jest-watch-typeahead-virtual-7373570042/0/cache/jest-watch-typeahead-npm-1.0.0-0c228b0e38-388d518974.zip/node_modules/jest-watch-typeahead/build/file_name_plugin/plugin.js":

  ● Test suite failed to run

    .../tmp/my-app/.yarn/__virtual__/jest-watch-typeahead-virtual-7373570042/0/cache/jest-watch-typeahead-npm-1.0.0-0c228b0e38-388d518974.zip/node_modules/jest-watch-typeahead/build/file_name_plugin/plugin.js:1
    import { Prompt } from 'jest-watcher';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      25811 |     try {
      25812 |       module.isLoading = true;
    > 25813 |       module.load(modulePath);
            |              ^
      25814 |       hasThrown = false;
      25815 |     } finally {
      25816 |       module.isLoading = false;

      at Function.external_module_.Module._load (.pnp.cjs:25813:14)

Reproducible demo

repro steps above—no other code or files required

[virtuoushub]

👍 I am having the same issue. Would love to know a workaround. Unable to run tests from CLI.

@jasongonzales23 (cc @sumanthratna)

I do not think this is a long term fix; however here is what I did to get this to work, as I was also running into the same issue:

yarn add -D jest-watch-typeahead@0.6.4

I used this comment as the basis for this work around.

---

note: 0.6.5 also seems to work, it is when it is 1.0.0 that the issue arises.

yarn add -D jest-watch-typeahead@0.6.5

[virtuoushub]

Once again thanks for the hand up mate! This isn’t an issue with CRA per se, but now the only remaining issue I’m having is that VSCode ‘Cannot find module ‘react’ (or any other for that matter) or its corresponding type declarations.’

Real head scratcher this one.

@jasongonzales23 - please try yarn dlx @yarnpkg/sdks vscode. This should allow you to use Workspace’s TypeScript Version in VS Code which should get rid of those “'Cannot find module ‘react’” and similar issues.

see also: https://stackoverflow.com/a/56831926