Create-react-app: Babel runtime fail after react-scripts update to 2.1.8 (tests fail)

Created on 11 Apr 2019  ·  27Comments  ·  Source: facebook/create-react-app

Is this a bug report?

YES

After I upgraded from 2.1.5 to 2.1.8, my tests (with Jest) fail, giving the same error with each run.

Cannot find module '/Users/lukasz/projects/***/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault' from 'user-button.test.tsx'

at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:221:17)
at Object.<anonymous> (src/app/layout/user-button/user-button.test.tsx:3:30)

Downgrade to 2.1.5 fixes the problem.
Also app works properly, only tests fail

Did you try recovering your dependencies?

Yes

Environment

Environment Info:

  System:
    OS: macOS 10.14.4
    CPU: x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 10.15.1 - ~/.nvm/versions/node/v10.15.1/bin/node
    Yarn: 1.13.0 - ~/.nvm/versions/node/v10.15.1/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.15.1/bin/npm
  Browsers:
    Chrome: 73.0.3683.103
    Safari: 12.1
  npmPackages:
    react: ^16.8.6 => 16.8.6 
    react-dom: ^16.8.6 => 16.8.6 
    react-scripts: ^2.1.8 => 2.1.8 
  npmGlobalPackages:
    create-react-app: 2.1.8

Package json:

"dependencies": {
        "@rematch/core": "^1.1.0",
        "classnames": "^2.2.6",
        "downloadjs": "^1.4.7",
        "formik": "^1.5.2",
        "history": "^4.9.0",
        "include-media": "^1.4.9",
        "include-media-export": "^1.0.3",
        "leaflet": "^1.4.0",
        "lodash": "^4.17.11",
        "moment": "^2.24.0",
        "react": "^16.8.6",
        "react-compound-slider": "^1.2.1",
        "react-dom": "^16.8.6",
        "react-leaflet": "^2.2.1",
        "react-redux": "^7.0.1",
        "react-router": "^5.0.0",
        "react-router-dom": "^5.0.0",
        "react-scripts": "^2.1.5",
        "react-testing-library": "^6.1.2",
        "recompose": "^0.30.0",
        "reselect": "^4.0.0",
        "typescript": "^3.4.3",
        "use-media": "^1.3.0",
        "yup": "^0.26.10"
    },
"devDependencies": {
        "@types/classnames": "^2.2.7",
        "@types/downloadjs": "^1.4.1",
        "@types/jest": "23.3.13",
        "@types/leaflet": "^1.4.3",
        "@types/lodash": "^4.14.120",
        "@types/react": "^16.8.10",
        "@types/react-dom": "^16.8.3",
        "@types/react-leaflet": "^2.2.1",
        "@types/react-redux": "^7.0.6",
        "@types/react-router-dom": "^4.3.1",
        "@types/recompose": "^0.30.5",
        "@types/yup": "^0.26.9",
        "husky": "^1.3.1",
        "jest-dom": "^3.1.2",
        "lint-staged": "^8.1.3",
        "node-sass": "^4.11.0",
        "prettier": "^1.16.4",
        "tslint": "^5.12.1",
        "tslint-react": "^3.6.0"
    },
stale
Source
picture lkostrowski
👀1 👍1

All 27 comments

This seems related to a recurring issue that is very hard to solve.

Can I confirm that you removed your node_modules folder completely, and then reinstalled?

Can you run npm ls @babel/runtime and paste the result here?

mrmckeb picture mrmckeb on 17 Apr 2019

On 2.1.5 @babel/runtime:

├─┬ [email protected]
│ └── @babel/[email protected] 
├─┬ [email protected]
│ └── @babel/[email protected] 
├─┬ [email protected]
│ └── @babel/[email protected]  deduped
├─┬ [email protected]
│ └── @babel/[email protected] 
├─┬ [email protected]
│ └── @babel/[email protected]  deduped
├─┬ [email protected]
│ └── @babel/[email protected]  deduped
├─┬ [email protected]
│ └─┬ [email protected]
│   └── @babel/[email protected]  deduped
├─┬ [email protected]
│ ├── @babel/[email protected] 
│ └─┬ [email protected]
│   └── @babel/[email protected] 
├─┬ [email protected]
│ └── @babel/[email protected]  deduped
└─┬ [email protected]
  └── @babel/[email protected]

After bump to 2.1.8 @babel/runtime:

├─┬ [email protected]
│ └── @babel/[email protected] 
├─┬ [email protected]
│ └── @babel/[email protected] 
├─┬ [email protected]
│ └── @babel/[email protected]  deduped
├─┬ [email protected]
│ └── @babel/[email protected] 
├─┬ [email protected]
│ └── @babel/[email protected]  deduped
├─┬ [email protected]
│ └── @babel/[email protected]  deduped
├─┬ [email protected]
│ └─┬ [email protected]
│   └── @babel/[email protected]  deduped
├─┬ [email protected]
│ ├── @babel/[email protected] 
│ └─┬ [email protected]
│   └── @babel/[email protected] 
├─┬ [email protected]
│ └── @babel/[email protected]  deduped
└─┬ [email protected]
  └── @babel/[email protected]

Removing node_modules and reinstall doesn't help. BTW I use npm (not Yarn, if it matters)

Babel runtime after removing node_modules nad reinstall:

├─┬ [email protected]
│ └── @babel/[email protected] 
├─┬ [email protected]
│ └── @babel/[email protected] 
├─┬ [email protected]
│ └── @babel/[email protected]  deduped
├─┬ [email protected]
│ └── @babel/[email protected] 
├─┬ [email protected]
│ └── @babel/[email protected]  deduped
├─┬ [email protected]
│ └── @babel/[email protected]  deduped
├─┬ [email protected]
│ └─┬ [email protected]
│   └── @babel/[email protected]  deduped
├─┬ [email protected]
│ ├── @babel/[email protected] 
│ └─┬ [email protected]
│   └── @babel/[email protected] 
├─┬ [email protected]
│ └── @babel/[email protected]  deduped
└─┬ [email protected]
  └── @babel/[email protected]
lkostrowski picture lkostrowski on 17 Apr 2019

One more thing. After upgrade to 2.1.8, downgrade to 2.1.5 by npm i [email protected] doesnt fix the problem because package-lock is different.
Here is the diff compared to working version, maybe it helps.
https://pastebin.com/d7fjE6fg

lkostrowski picture lkostrowski on 17 Apr 2019

Thanks @lkostrowski.

Unfortunately there isn't anything obvious here... as I said, this is an issue we're aware of, but are having a lot of trouble identifying the root cause of.

In the meantime, are you able to fix the issue manually in your package-lock.json?

mrmckeb picture mrmckeb on 21 Apr 2019

No, I wasn't trying. Will try my luck when new CRA is released with some must-have feature

lkostrowski picture lkostrowski on 21 Apr 2019

Bump to 3.0.0. fixes the problem

lkostrowski picture lkostrowski on 23 Apr 2019
👍1

For me I didn't have this issue before using CRA 3 but the error is a bit different (can't find it from setupTests) so I think it's more related to https://github.com/facebook/create-react-app/issues/6398
I was able to use the workaround described in that other thread and a straight downgrade didn't help unfortunately.

maracuja-juice picture maracuja-juice on 23 Apr 2019
😕1

I've seen this too (outside of CRA, but with babel-preset-react-app), @maracuja-juice, and will try to investigate this weekend. Did you remove your packages and lockfile?

Can you run npm ls @babel/runtime for us and post the results here?

mrmckeb picture mrmckeb on 24 Apr 2019

So I should remove my workaround, properly reinstall and then run npm ls @babel/runtime for you to investigate? I tried removing the lockfile and packages before but that didn't help.
I'm using yarn by the way.

maracuja-juice picture maracuja-juice on 24 Apr 2019

That would help, @maracuja-juice. We need more information, so we can understand where the issue is coming from.

mrmckeb picture mrmckeb on 24 Apr 2019
👍1
  • Removed the workaround
  • deleted node_modules and yarn.lock file
  • ran yarn
  • verified that I still run into the same problem with yarn test

Here's the output of npm ls @babel/runtime:

├─┬ @storybook/[email protected]
│ ├─┬ @storybook/[email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── @babel/[email protected]  deduped
│ │ │ └─┬ [email protected]
│ │ │   └── @babel/[email protected]  deduped
│ │ ├─┬ [email protected]
│ │ │ ├── @babel/[email protected]  deduped
│ │ │ └─┬ [email protected]
│ │ │   └── @babel/[email protected]  deduped
│ │ ├─┬ [email protected]
│ │ │ └── @babel/[email protected]  deduped
│ │ └─┬ [email protected]
│ │   └── @babel/[email protected]  deduped
│ └─┬ [email protected]
│   └── @babel/[email protected]  deduped
├─┬ @storybook/[email protected]
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └─┬ [email protected]
│       └── @babel/[email protected]  deduped
├─┬ @storybook/[email protected]
│ ├─┬ @storybook/[email protected]
│ │ ├─┬ [email protected]
│ │ │ └── @babel/[email protected]  deduped
│ │ └─┬ [email protected]
│ │   └── @babel/[email protected]  deduped
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │   └── @babel/[email protected]  deduped
│ └─┬ [email protected]
│   └── @babel/[email protected] 
├─┬ [email protected]
│ └── @babel/[email protected] 
├─┬ [email protected]
│ ├── @babel/[email protected]  deduped
│ └─┬ [email protected]
│   └── @babel/[email protected]  deduped
├─┬ [email protected]
│ └── @babel/[email protected]  deduped
└─┬ [email protected]
  ├─┬ [email protected]
  │ └── @babel/[email protected]  deduped
  └─┬ [email protected]
    ├── @babel/[email protected]  deduped
    └─┬ [email protected]
      └── @babel/[email protected]  deduped
maracuja-juice picture maracuja-juice on 24 Apr 2019

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

stale[bot] picture stale[bot] on 24 May 2019

This is still an issue. Have you been able to investigate yet Brody?

maracuja-juice picture maracuja-juice on 27 May 2019

Hi @maracuja-juice, we think we've resolved this issue now. It was complex, and it should be working in the latest v3 releases. Have you tried that? It likely won't have any breaking changes for you.

mrmckeb picture mrmckeb on 27 May 2019

I only had this error since CRA 3.

maracuja-juice picture maracuja-juice on 27 May 2019

Can I confirm, as I _just_ had this issue two minutes ago and solved it, have you tried this?

  • Delete package-lock.json.
  • Delete node_modules folder.
  • Run npm i.
mrmckeb picture mrmckeb on 28 May 2019

Yes that's what I did. (yarn.lock though)

maracuja-juice picture maracuja-juice on 28 May 2019

OK, thanks @maracuja-juice. Can you also share the output of yarn list @babel/runtime?

Sorry you're facing this issue. I do want to help you get to the bottom of it.

mrmckeb picture mrmckeb on 29 May 2019

Hi there !
I am experiencing kind of the same problem, but i'm not sure if it's related.

I am using react-scripts 3.0.1.

My tests run fine when using npm run test, but when running tests with lint-staged (with verbose), i get the following error:

 FAIL  src/app/App.test.jsx
● Test suite failed to run

  Jest encountered an unexpected token

  This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

  By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

  Here's what you can do:
   • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
   • If you need a custom transformation specify a "transform" option in your config.
   • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

  You'll find more details and examples of these config options in the docs:
  https://jestjs.io/docs/en/configuration.html

  Details:

  SyntaxError: /Users/Romain/Code/natural-pad/autonomoov/src/app/App.test.jsx: Unexpected token (13:20)

    11 |   it('renders without crashing', () => {
    12 |     const div = document.createElement('div');
  > 13 |     ReactDOM.render(<App />, div);
       |                     ^
    14 |     ReactDOM.unmountComponentAtNode(div);
    15 |   });
    16 |

    at Parser.raise (node_modules/@babel/parser/lib/index.js:6344:17)
    at Parser.unexpected (node_modules/@babel/parser/lib/index.js:7659:16)
    at Parser.parseExprAtom (node_modules/@babel/parser/lib/index.js:8828:20)
    at Parser.parseExprSubscripts (node_modules/@babel/parser/lib/index.js:8413:23)
    at Parser.parseMaybeUnary (node_modules/@babel/parser/lib/index.js:8393:21)
    at Parser.parseExprOps (node_modules/@babel/parser/lib/index.js:8280:23)
    at Parser.parseMaybeConditional (node_modules/@babel/parser/lib/index.js:8253:23)
    at Parser.parseMaybeAssign (node_modules/@babel/parser/lib/index.js:8200:21)
    at Parser.parseExprListItem (node_modules/@babel/parser/lib/index.js:9475:18)
    at Parser.parseCallExpressionArguments (node_modules/@babel/parser/lib/index.js:8620:22)

Here is my .lintstagedrc

'src/**/*.{js,jsx}':
  - prettier
  - eslint --fix
  - git add
  - npm run test
iOiurson picture iOiurson on 17 Jun 2019

Hello @mrmckeb

I've got an issue with setupTests.js file which is actuallt not read by jest on my tests, the file is inside /src folder here's a repo url https://github.com/belyas/node-commerce/tree/master/client/src so I'm trying to access localStorage object but in vain, can you please help?

Ah by the way I'm on mac OS
node: 12.4.0
npm: 6.10.0

belyas picture belyas on 4 Jul 2019

@iOiurson I think that's a different issue, could you open a new ticket and mention me? I'll pick it up. It looks like a configuration issue... assuming tests work in other cases :)

mrmckeb picture mrmckeb on 15 Jul 2019

Hi @belyas, that is an interesting issue... it looks OK at first glance. Can you open a ticket for this one, so I can investigate it with you? Just mention me in the ticket and be sure to fill in the template.

mrmckeb picture mrmckeb on 15 Jul 2019

Hi @mrmckeb, I'm still experiencing same problem and I'm running latest version of [email protected]

My app stopped working, so I tried creating a new app with create-react-app and yarn start, but I still got same error for the new create-react-app.

Yxizzy picture Yxizzy on 7 Aug 2019

To fix it, I always copy babelruntimehelper file from another repository and paste into every new create-react-app app I create. Is there anyway to solve this?

Yxizzy picture Yxizzy on 7 Aug 2019

We ran into the same issue today and we still try to fix that. Does anybody have a clean solution yet :) ?

thanks in advance

MalteDot4 picture MalteDot4 on 13 Aug 2019

Upgrade to latest react-scripts (3.1)
Do a clean install (remove node_modules, possibly yarn.lock)
try adding "**/babel-preset-react-app/@babel/runtime" to "nohoist" option for yarn in package.json.

bugzpodder picture bugzpodder on 13 Aug 2019

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

stale[bot] picture stale[bot] on 12 Sep 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

dualcnhq picture dualcnhq  ·  3Comments
AlexeyRyashencev picture AlexeyRyashencev  ·  3Comments
barcher picture barcher  ·  3Comments
Evan-GK picture Evan-GK  ·  3Comments
xgqfrms-GitHub picture xgqfrms-GitHub  ·  3Comments