babel: [Bug] Console error: Uncaught TypeError: Cannot set properties of undefined (setting 'default')
š»
- Would you like to work on a fix?
How are you using Babel?
Other (Next.js, Gatsby, vue-cli, ā¦)
Input code
same as https://ask.dcloud.net.cn/question/145538.
I wrote async/await
in the project created by vue-cli v4.5.17
Configuration file name
babel.config.json
Configuration
No response
Current and expected behavior
Console error: Uncaught TypeError: Cannot set properties of undefined (setting ādefaultā)ļ¼Then I click on the error to view the source codeļ¼I saw the code below:
// node_modules/@babel/runtime/helpers/esm/regeneratorRuntime.js
_regeneratorRuntime = function _regeneratorRuntime() {
return exports;
};
Environment
System: OS: macOS 12.4 Binaries: Node: 10.24.1 - ~/.nvm/versions/node/v10.24.1/bin/node Yarn: 1.22.18 - ~/.nvm/versions/node/v10.24.1/bin/yarn npm: 6.14.12 - ~/.nvm/versions/node/v10.24.1/bin/npm npmPackages: @babel/plugin-transform-modules-commonjs: ^7.7.5 => 7.18.2 babel-eslint: ^10.1.0 => 10.1.0 babel-plugin-import: 1.13.3 => 1.13.3 eslint: ^6.7.2 => 6.8.0
Possible solution
When I moved the code that reported the error below, it worked fineļ¼like this:
// node_modules/@babel/runtime/helpers/esm/regeneratorRuntime.js
var exports = {},
Op = Object.prototype,
hasOwn = Op.hasOwnProperty,
$Symbol = "function" == typeof Symbol ? Symbol : {},
iteratorSymbol = $Symbol.iterator || "@@iterator",
asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator",
toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
_regeneratorRuntime = function _regeneratorRuntime() {
return exports;
};
Additional context
it works normally when I use @babel/runtime v7.17.9
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 1
- Comments: 40 (18 by maintainers)
@nicolo-ribaudo we are using React Dropdown (https://github.com/react-component/dropdown), this package used multiple other packages. One of this packages is rc-trigger. When we are compiling our code, async (https://github.com/react-component/trigger/blob/f5fb0e980698a97fce0e531a78087fc8a38b4757/src/Popup/useVisibleStatus.ts#L86 )will be transformed to _regeratorRuntime. But itās look like that this function is broken after couple of modifications.
Yes, that code looks correct. We need to understand what code is throwing about default, because the source maps are pointing at the wrong code.
Would you be able to push a repository that reproduces the bug?
You need to check the contents of the file specified in
"main":
in yourpackage.json
.Sorry, CommonJS.
If you delete
@babel/plugin-transform-modules-commonjs
, this bug should disappear (if my intuition is correct) and you should get a lightly smaller webpack output.Btw, is there any reason why you enabled
@babel/plugin-transform-async-to-generator
and@babel/plugin-transform-arrow-functions
? They are already included in@babel/preset-env
.@nicolo-ribaudo it works normally when I use @babel/runtime v7.17.9
also one thing notice, if using babelHelper: runtime, that time it making an issue so it importing from esm
var _regeneratorRuntime = require(
ā@babel/runtime/helpers/esm/regeneratorRuntimeā)`could this be the issue, because it not shown in the building as like below.
https://github.com/Annshuk/microfrotend-lerna/tree/main/packages/design-system/dist <- can refer this
Could you try removing
sourcemap: true
from your rollup config (both of them), rebuilding your project, and share the stack trace?But that code is not trying to set any property named
default
, so the error is probably pointing to the wrong location. If you disable source maps, we can see the correct location where something is trying to set a.default
property.Yes, itās defined at line 18 in your screenshot.
Could you try disabling source maps, and check what code in that bundled file is throwing exactly?
Are you bundling your app?
That code contained in
@babel/runtime/helpers/esm/regeneratorRuntime.js
never calls thefunction _regeneratorRutime() { return exports }
function before definingvar exports = {}
, so the problem arises after a transform that is applied to that file by your build process (a bundler, or a minifier, or something else).You need to find the
_regeneratorRuntime
code in the bundle that you then serve to the browser, to see how it has been transformed.EDIT: I see that you said that you are using rollup. You need to look at the file generated by rollup.
Can you share your bundle? I donāt understand how
function _regeneratorRuntime() { return exports; }
can be called before that the subsequent code has been executed.Iām really confused by this error.
function _regeneratorRuntime() { return exports; }
is never called during the execution of the āouterā_regeneratorRuntime
function, so at that pointexports
should be already defined.Could you open your bundle and check the source of the (outer)
_regeneratorRuntime
function? If itās minified, you can probably find it by looking for the"@@asyncIterator"
stringsame issue with React project, got the excat same issue with @babel/runtime 7.18.3