7.13 "_interopRequireDefault is not a function"

[KyleAMathews]

In addition to #12851

If you set resolutions for @babel/core to ~7.12.0 you then get this error:

   8 | exports.navigateTo = exports.replace = exports.push = exports.navigate = exports.default = void 0;
   9 |
> 10 | var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
     | ^
  11 |
  12 | var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
  13 |


  WebpackError: TypeError: _interopRequireDefault is not a function

  - index.js:10
    node_modules/gatsby-link/index.js:10:1

  - utils.js:136
    node_modules/@reach/router/lib/utils.js:136:1

gatsby-link requires babel/runtime/helpers/interopRequireDefault which seems to no longer exist in @babel/runtime@7.13

[babel-bot]

Hey @KyleAMathews! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite."

[nicolo-ribaudo]

Niiice we have a ton of tests in theory for this.

[KyleAMathews]

well that's strange... https://unpkg.com/@babel/runtime@7.13.0/helpers/interopRequireDefault/index.js

Lemme look again

[hzoo]

Think we tried to change to a folder in a backwards compatible way

https://unpkg.com/browse/@babel/runtime@7.12.18/helpers/interopRequireDefault.js vs
https://unpkg.com/browse/@babel/runtime@7.13.0/helpers/interopRequireDefault/index.js

[nicolo-ribaudo]

This is the same as #12853

[nicolo-ribaudo]

@KyleAMathews I know it's probably easy to reproduce this, but do you have a project which already shows the error I can start from? 😅

[KyleAMathews]

@nicolo-ribaudo use the gatsby default again but with the fix in #12852 applied but run gatsby build this time :-D

[nicolo-ribaudo]

Ok thanks 😂

[gillkyle]

@nicolo-ribaudo you can use this repo! https://github.com/gillkyle/babel-repro

It's got even less packages than the default starter if you're looking for something you can just clone.

I'm getting this error locally when running gatsby build:

failed Building production JavaScript and CSS bundles - 0.973s

 ERROR #98123  WEBPACK

Generating JavaScript bundles failed

Cannot read property 'resolved' of undefined

File: .cache/polyfill-entry.js


 ERROR #98123  WEBPACK

Generating JavaScript bundles failed

Cannot read property 'resolved' of undefined

File: .cache/production-app.js

EDIT: realizing now how useless that output is (besides file paths) 😅

[KyleAMathews]

realizing now how useless that output is (besides file paths)

yeah, we kill internal stack traces which isn't so helpful when that's where they're happening.

[nicolo-ribaudo]

I know the problem and the fix, working on the PR.

Babel injects this code:

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Webpack sees this exports map

And replaces it with (because that's what we are telling it to do)

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault/index.mjs");

[JLHwung]

This issue is not reproducible on Webpack 5, which supports exports map. For Webpack 4, a workaround is to configure resolve.extensions to

['.wasm', '.js', '.mjs', '.json']

So webpack will resolve @babel/runtime/helpers/interopRequireDefault to @babel/runtime/helpers/interopRequireDefault/index.js.

[dlong500]

This bug is NOT fixed (as evidenced by the many new issues being opened within the last few hours). It would appear that a LOT of dependencies are pulling in the latest versions of babel automatically which makes it difficult to even temporarily roll back to an earlier babel version (unless you commit a yarn.lock file). Don't mean to complain--just trying to get the word out that there are still some serious issues unresolved.

[fantasticsoul]

I HAVE MET THIS PROBLEM TOO, SOMEBODY HELP ME PLEASE

[nicolo-ribaudo]

Could you two share your lockfiles please? 🙏

[AndriusBil]

@nicolo-ribaudo
Example repo with package-lock:
https://github.com/AndriusBil/babel-require-example

EDIT: It works with "@babel/runtime": "7.12.18" and does not work with either "7.13.0" or "7.13.1" or "7.13.2"

[JoeeeeeWu]

_interopRequireDefault is not a function

this bug is not solved

@nicolo-ribaudo could you fixed it as soon as possible?

[nicolo-ribaudo]

Yes, I'll start working on this in 10 mins

[wangcherry]

In addition to #12851

If you set resolutions for @babel/core to ~7.12.0 you then get this error:

   8 | exports.navigateTo = exports.replace = exports.push = exports.navigate = exports.default = void 0;
   9 |
> 10 | var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
     | ^
  11 |
  12 | var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
  13 |


  WebpackError: TypeError: _interopRequireDefault is not a function

  - index.js:10
    node_modules/gatsby-link/index.js:10:1

  - utils.js:136
    node_modules/@reach/router/lib/utils.js:136:1

gatsby-link requires babel/runtime/helpers/interopRequireDefault which seems to no longer exist in @babel/runtime@7.13

Are you ok? I am error now

[nicolo-ribaudo]

@wangcherry Could you upload your lockfile? 🙏

[dlong500]

I haven't tested any new developments yet since early this morning (EST).
Here is my yarn.lock in case it is still useful (note that this lock file is with my immediate babel dependences locked to 7.12.x, so only the nested dependencies are using later babel versions).
yarn.lock.txt

[dlong500]

Ok, it looks like at least my particular issue is resolved with the latest babel release. After doing a clean install (wiping node_modules and the lock file) everything seems to be working again.

[gglee89]

Hopefully this isn't gibberish from my end.
But I'm getting the "same or similar" error in the browser at this point:

I've tried running a clean build my React app with these settings:

"dependencies": {
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
},
"devDependencies": {
    "@babel/core": "^7.13.1",
    "@babel/plugin-transform-runtime": "^7.13.6",
    "@babel/preset-env": "^7.13.5",
    "@babel/preset-react": "^7.12.13",
    "webpack": "^5.4.0",
    "webpack-bundle-analyzer": "^4.1.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^5.4.0",
}

Also tried running @babel with version @7.12, but I got the same error in the browser.

[nicolo-ribaudo]

Can you share your lockfile?

[gglee89]

Sorry to bother!

I got it fixed, but I had to install npm install --save-dev @babel/runtime to solved it.
The strange is that I didn't need to install it before until today. I don't know what's changed.

@nicolo-ribaudo Let me know if you still need to see my Lockfile.
@AndriusBil your comment was what made me attempt to install it. Thanks!

[nicolo-ribaudo]

Oh I think that the reason was that one of your dependency was using @babel/runtime@7.13.0 as a dependency, and by explicitly installing it you forced npm to update it. You can probably remove @babel/runtime from your deps now.

[matyasf]

Hi!
Is this issue fixed in 7.13? If yes which version? Thanks!

[nicolo-ribaudo]

7.13.10 should be working.