Babel runtime fail after react-scripts update to 2.1.8 (tests fail) #6802

lkostrowski · 2019-04-11T15:10:06Z

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"
    },

The text was updated successfully, but these errors were encountered:

mrmckeb · 2019-04-17T07:14:08Z

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?

lkostrowski · 2019-04-17T07:47:54Z

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 · 2019-04-17T08:00:31Z

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

mrmckeb · 2019-04-21T15:11:21Z

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?

lkostrowski · 2019-04-21T15:15:43Z

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

lkostrowski · 2019-04-23T06:58:01Z

Bump to 3.0.0. fixes the problem

panmona · 2019-04-23T07:55:00Z

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 #6398
I was able to use the workaround described in that other thread and a straight downgrade didn't help unfortunately.

mrmckeb · 2019-04-24T08:51:49Z

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?

panmona · 2019-04-24T09:26:57Z

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.

mrmckeb · 2019-04-24T09:41:37Z

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

panmona · 2019-04-24T10:08:26Z

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

stale · 2019-05-24T10:54:59Z

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.

panmona · 2019-05-27T07:11:12Z

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

mrmckeb · 2019-05-27T09:13:47Z

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.

panmona · 2019-05-27T10:53:26Z

I only had this error since CRA 3.

mrmckeb · 2019-05-28T08:26:37Z

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.

panmona · 2019-05-28T15:55:59Z

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

mrmckeb · 2019-05-29T09:00:16Z

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.

bleucitron · 2019-06-17T16:02:00Z

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

belyas · 2019-07-04T12:49:39Z

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

mrmckeb · 2019-07-15T14:21:08Z

@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 · 2019-07-15T14:22:58Z

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.

yxizzy · 2019-08-07T11:32:34Z

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 · 2019-08-07T11:48:45Z

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

MalteDot4 · 2019-08-13T12:10:46Z

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

thanks in advance

bugzpodder · 2019-08-13T15:55:22Z

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.

stale · 2019-09-12T16:13:33Z

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.

mrmckeb self-assigned this Apr 17, 2019

lkostrowski closed this as completed Apr 23, 2019

mrmckeb reopened this Apr 24, 2019

stale bot added the stale label May 24, 2019

stale bot removed the stale label May 27, 2019

stale bot added the stale label Sep 12, 2019

lkostrowski closed this as completed Sep 14, 2019

lock bot locked and limited conversation to collaborators Sep 19, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Babel runtime fail after react-scripts update to 2.1.8 (tests fail) #6802

Babel runtime fail after react-scripts update to 2.1.8 (tests fail) #6802

lkostrowski commented Apr 11, 2019

mrmckeb commented Apr 17, 2019

lkostrowski commented Apr 17, 2019 •

edited

Loading

lkostrowski commented Apr 17, 2019 •

edited

Loading

mrmckeb commented Apr 21, 2019

lkostrowski commented Apr 21, 2019

lkostrowski commented Apr 23, 2019

panmona commented Apr 23, 2019 •

edited

Loading

mrmckeb commented Apr 24, 2019

panmona commented Apr 24, 2019

mrmckeb commented Apr 24, 2019

panmona commented Apr 24, 2019 •

edited

Loading

stale bot commented May 24, 2019

panmona commented May 27, 2019

mrmckeb commented May 27, 2019

panmona commented May 27, 2019

mrmckeb commented May 28, 2019

panmona commented May 28, 2019 •

edited

Loading

mrmckeb commented May 29, 2019 •

edited

Loading

bleucitron commented Jun 17, 2019 •

edited

Loading

belyas commented Jul 4, 2019 •

edited

Loading

mrmckeb commented Jul 15, 2019

mrmckeb commented Jul 15, 2019

yxizzy commented Aug 7, 2019

yxizzy commented Aug 7, 2019

MalteDot4 commented Aug 13, 2019

bugzpodder commented Aug 13, 2019

stale bot commented Sep 12, 2019

Babel runtime fail after react-scripts update to 2.1.8 (tests fail) #6802

Babel runtime fail after react-scripts update to 2.1.8 (tests fail) #6802

Comments

lkostrowski commented Apr 11, 2019

Is this a bug report?

Did you try recovering your dependencies?

Environment

mrmckeb commented Apr 17, 2019

lkostrowski commented Apr 17, 2019 • edited Loading

lkostrowski commented Apr 17, 2019 • edited Loading

mrmckeb commented Apr 21, 2019

lkostrowski commented Apr 21, 2019

lkostrowski commented Apr 23, 2019

panmona commented Apr 23, 2019 • edited Loading

mrmckeb commented Apr 24, 2019

panmona commented Apr 24, 2019

mrmckeb commented Apr 24, 2019

panmona commented Apr 24, 2019 • edited Loading

stale bot commented May 24, 2019

panmona commented May 27, 2019

mrmckeb commented May 27, 2019

panmona commented May 27, 2019

mrmckeb commented May 28, 2019

panmona commented May 28, 2019 • edited Loading

mrmckeb commented May 29, 2019 • edited Loading

bleucitron commented Jun 17, 2019 • edited Loading

belyas commented Jul 4, 2019 • edited Loading

mrmckeb commented Jul 15, 2019

mrmckeb commented Jul 15, 2019

yxizzy commented Aug 7, 2019

yxizzy commented Aug 7, 2019

MalteDot4 commented Aug 13, 2019

bugzpodder commented Aug 13, 2019

stale bot commented Sep 12, 2019

lkostrowski commented Apr 17, 2019 •

edited

Loading

lkostrowski commented Apr 17, 2019 •

edited

Loading

panmona commented Apr 23, 2019 •

edited

Loading

panmona commented Apr 24, 2019 •

edited

Loading

panmona commented May 28, 2019 •

edited

Loading

mrmckeb commented May 29, 2019 •

edited

Loading

bleucitron commented Jun 17, 2019 •

edited

Loading

belyas commented Jul 4, 2019 •

edited

Loading