2.1.4 Update cause "Cannot find module '/Users/.../node_modules/react-scripts/node_modules/@babel/runtime/helpers/interopRequireDefault' from 'setupTests.ts'"

[VincentLanglet]

Environment

 System:
    OS: macOS 10.14.2
    CPU: x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 11.6.0 - ~/.nvm/versions/node/v11.6.0/bin/node
    Yarn: 1.12.3 - ~/.nvm/versions/node/v11.6.0/bin/yarn
    npm: 6.5.0-next.0 - ~/.nvm/versions/node/v11.6.0/bin/npm
  Browsers:
    Chrome: 72.0.3626.96
    Firefox: 64.0
    Safari: 12.0.2
  npmPackages:
    react: ^16.8.1 => 16.8.1 
    react-dom: ^16.8.1 => 16.8.1 
    react-scripts: ^2.1.4 => 2.1.4 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to Reproduce

Starting from my project with react-scripts: 2.1.3,

• yarn
• yarn test working
• yarn add react-scripts@2.1.4
• yarn test working
• yarn-deduplicate what is this

Introducing these modifications in the yarn.lock

-"@babel/plugin-transform-destructuring@7.3.2":
+"@babel/plugin-transform-destructuring@7.3.2", "@babel/plugin-transform-destructuring@^7.0.0", "@babel/plugin-transform-destructuring@^7.2.0":
   version "7.3.2"
 
-"@babel/plugin-transform-destructuring@^7.0.0", "@babel/plugin-transform-destructuring@^7.2.0":
-  version "7.2.0"
-

-ajv@^6.1.0, ajv@^6.5.3, ajv@^6.5.5:
-  version "6.7.0"
-
-ajv@^6.9.1:
+ajv@^6.1.0, ajv@^6.5.3, ajv@^6.5.5, ajv@^6.9.1:
   version "6.9.1"

-autoprefixer@^9.3.1:
-  version "9.4.6"
-
-autoprefixer@^9.4.2:
+autoprefixer@^9.3.1, autoprefixer@^9.4.2:
   version "9.4.7"

-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000884, caniuse-lite@^1.0.30000929:
-  version "1.0.30000929"
-
-caniuse-lite@^1.0.30000918, caniuse-lite@^1.0.30000932:
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000884, caniuse-lite@^1.0.30000918, caniuse-lite@^1.0.30000929, caniuse-lite@^1.0.30000932:
   version "1.0.30000936"

-core-js@2.6.4:
+core-js@2.6.4, core-js@^2.4.0, core-js@^2.4.1, core-js@^2.5.0, core-js@^2.5.7:
   version "2.6.4"
 
-core-js@^2.4.0, core-js@^2.4.1, core-js@^2.5.0, core-js@^2.5.7:
-  version "2.6.3"
-

-postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.13, postcss@^7.0.2, postcss@^7.0.5:
-  version "7.0.13"
-
-postcss@^7.0.14, postcss@^7.0.6:
+postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.2, postcss@^7.0.5, postcss@^7.0.6:
   version "7.0.14"

-react-error-overlay@^5.1.0:
-  version "5.1.2"
-
-react-error-overlay@^5.1.3:
+react-error-overlay@^5.1.0, react-error-overlay@^5.1.3:
   version "5.1.3"

-resolve@1.10.0, resolve@^1.9.0:
+resolve@1.10.0, resolve@^1.1.6, resolve@^1.1.7, resolve@^1.2.0, resolve@^1.3.2, resolve@^1.5.0, resolve@^1.6.0, resolve@^1.8.1, resolve@^1.9.0:
   version "1.10.0"
 
-resolve@^1.1.6, resolve@^1.1.7, resolve@^1.2.0, resolve@^1.3.2, resolve@^1.5.0, resolve@^1.6.0, resolve@^1.8.1:
-  version "1.9.0"
-

• yarn
• yarn test not working anymore

 Test suite failed to run

    Cannot find module '/Users/.../node_modules/react-scripts/node_modules/@babel/runtime/helpers/interopRequireDefault' from 'setupTests.ts'

      1 | import { configure } from 'enzyme';
      2 | import Adapter from 'enzyme-adapter-react-16';
    > 3 | import 'jest-extended';
        |                              ^
      4 | import 'jest-localstorage-mock';
      5 | import { getSnapshotDiffSerializer, toMatchDiffSnapshot } from 'snapshot-diff';
      6 | 

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:221:17)
      at Object.<anonymous> (src/setupTests.ts:3:30)

If needed I'll try to make a reproductible demo. My actual project is for work (and not open-source...).

[VincentLanglet]

I have to manually add @babel/runtime inside react-scripts/node-modules to fix this...

[Tenshock]

I have the same issue with the module babel-preset-react-app since I updated to react-script@2.1.4

the module babel-preset-react-app doesn't have a node_modules/ folder anymore. I have to fix it the same way you fix your problem. I have to add manually the entire node_modules/@babel inside babel-preset-react-app

> tree project/node_modules/babel-preset-react-app
.
├── LICENSE
├── README.md
├── create.js
├── dependencies.js
├── dev.js
├── index.js
├── node_modules  // <= This one is missing since the react-scripts@2.1.4 update
├── package.json
├── prod.js
├── test.js
└── webpack-overrides.js

[jeremyckahn]

I was able to work around this issue with:

npm i babel-preset-react-app@7.0.0

The latest version as of this writing is 7.0.1. It appears that something related to #6393 is causing this issue.

Relevant commits:

• b02f181#diff-5a51074922f8107dc611b7e125130e7e
• b7e0158#diff-5a51074922f8107dc611b7e125130e7e

FYI @ianschmitz. I'm not sure if this is related to your work, but your name popped up.

[bugzpodder]

I had a workaround where I told yarn not to hoist
"**/babel-preset-react-app/@babel/runtime"
It might be because previously two different versions of @babel/runtime were used so it was not hoisted when installed, but now that the versions match the package is hoisted to the top level node modules..

[jeremyckahn]

@bugzpodder Do you know if there is a comparable solution for npm users?

[bugzpodder]

Sorry I only use yarn on this project because of workspaces. I tried a fresh install of create-react-app but didn't run into this issue.

[jeremyckahn]

@bugzpodder understood. I also can't repro this on a fresh CRA install. I think this issue may be related to the testing toolchain, as my error output looks very similar to @VincentLanglet's:

FAIL src/components/MyComponent/MyComponent.test.js
  ● Test suite failed to run

    Cannot find module '/Users/jeremykahn/[PROJECT]/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault' from 'setupTests.js'

      1 | import { configure } from 'enzyme';
      2 | import Adapter from 'enzyme-adapter-react-16';
    > 3 | import 'jest-enzyme';
        |                      ^
      4 | 
      5 | configure({ adapter: new Adapter() });
      6 | 

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:221:17)
      at Object.<anonymous> (src/setupTests.js:3:30)

[VincentLanglet]

I tried to make a minimal repo with this bug. But I really don't understand what happend.

cd my-project
yarn test

Produce the error

cd my-project
rm -rf node_modules
yarn
yarn test

Still the error

cp -R my-project copy
cd copy
yarn test

No error (WHAT THE F$$$)

rm -rf my-project
git clone my-project
yarn
yarn test

Still the error

cd my-project
cp node_modules/@babel/runtime node_modules/react-scripts/node_modules/@babel/runtime
yarn test

No error

[VincentLanglet]

I had a workaround where I told yarn not to hoist
"**/babel-preset-react-app/@babel/runtime"
It might be because previously two different versions of @babel/runtime were used so it was not hoisted when installed, but now that the versions match the package is hoisted to the top level node modules..

@bugzpodder How do you do this ?
(In my case, it's for "**/react-scripts/@babel/runtime"

[bkd705]

Adding @babel/runtime to dependencies in our app worked for us. Hopefully this is just a temporary solution.

[chranderson]

I was getting the error after the update due to the moduleNameMapper argument in my test script.

react-scripts test --env=jsdom moduleNameMapper='{\"match-sorter\": \"<rootDir>/mocks/matchSorterMock.js\"}'

Once I removed moduleNameMapper, all my tests ran successfully (execpt for the ones using match-sorter mock)
react-scripts test --env=jsdom

[olessavluk]

For me error gone after doing cp -R my-project copy or clonning project into directory with a different name. ¯\(ツ)/¯

[mrmckeb]

Hi all, I've had this report from some colleagues too. I'm not sure what's causing it, we're looking into it.