[Bug] Console error: Uncaught TypeError: Cannot set properties of undefined (setting 'default') #14628

gongshun · 2022-06-01T08:50:29Z

💻

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;
};

QQ20220601-163039-HD.mp4

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;
};

QQ20220601-163301-HD.mp4

Additional context

it works normally when I use @babel/runtime v7.17.9

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

babel-bot · 2022-06-01T08:50:49Z

Hey @gongshun! 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.

Annshuk · 2022-06-01T09:36:29Z

same issue with React project, got the excat same issue with @babel/runtime 7.18.3

Annshuk · 2022-06-01T09:38:16Z

System:
OS: window 10
Binaries:
Node: 16.13.2
Yarn: 1.22.18
npm: 8.10.0
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 => 8.2

using lerna with rollup

possible solution would be, if we can check first and then assign would be work

// node_modules/@babel/runtime/helpers/esm/regeneratorRuntime.js 
 var exports = exports || {}
_regeneratorRuntime = function _regeneratorRuntime() {
     return exports;
};

var Op = Object.prototype,
      hasOwn = Op.hasOwnProperty,
      $Symbol = "function" == typeof Symbol ? Symbol : {},
      iteratorSymbol = $Symbol.iterator || "@@iterator",
      asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator",
      toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";

nicolo-ribaudo · 2022-06-01T12:48:03Z

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 point exports 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" string

Annshuk · 2022-06-01T15:13:48Z

so i am, but the function is calling before excution and getting undfined default value error.

nicolo-ribaudo · 2022-06-01T15:20:42Z

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.

Annshuk · 2022-06-01T15:50:21Z

it is looking into esm ->

is should be minified or is it not correctly picking up?

nicolo-ribaudo · 2022-06-01T15:53:06Z

Are you bundling your app?

That code contained in @babel/runtime/helpers/esm/regeneratorRuntime.js never calls the function _regeneratorRutime() { return exports } function before defining var 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.

Annshuk · 2022-06-01T16:06:01Z

so the config is as below

import babel from "@rollup/plugin-babel";
import { nodeResolve } from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import image from "@rollup/plugin-image";
import { terser } from "rollup-plugin-terser";

import pkg from "./package.json";

const dependencies = [
  ...Object.keys(pkg.peerDependencies),
  ...Object.keys(pkg.devDependencies),
];

export default {
  input: "src/index.js",
  output: [
    { file: pkg.main, format: "cjs", sourcemap: true },
    { file: pkg.module, format: "esm", sourcemap: true },
  ],
  plugins: [
    nodeResolve({
      extensions: [".js", ".ts", ".tsx"],
    }),
    commonjs(),
    babel({
      babelHelpers: "bundled",
      exclude: "node_modules/**",
    }),
    image(),
    terser(),
  ],
  external: [...dependencies],
};

nicolo-ribaudo · 2022-06-01T16:08:54Z

You need to check the contents of the file specified in "main": in your package.json.

Annshuk · 2022-06-01T16:59:19Z

so it is generating like this, so here no export is defined, that means it export default would be undefined

nicolo-ribaudo · 2022-06-01T17:05:47Z

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?

Annshuk · 2022-06-01T17:14:08Z

no, you dint understand my point, somehow while testing our application jest is throughing error Uncaught TypeError: Cannot set properties of undefined (setting 'default'), so how it can be excuted that time even not calling that function

nicolo-ribaudo · 2022-06-01T17:16:09Z

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.

Annshuk · 2022-06-01T17:20:56Z

so do u means that it correct , as here m also not able to c efault, as what i can see in prevsiouly

nicolo-ribaudo · 2022-06-01T17:53:43Z

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?

Annshuk · 2022-06-01T17:57:47Z

so as per above, seems missing with some configuration which is not correctly building. Thanks you very much to pointing this out

nicolo-ribaudo · 2022-06-01T18:04:46Z

Could you try removing sourcemap: true from your rollup config (both of them), rebuilding your project, and share the stack trace?

Annshuk · 2022-06-01T18:21:12Z

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.

import babel from "@rollup/plugin-babel";
import { nodeResolve } from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import image from "@rollup/plugin-image";
import replace from "@rollup/plugin-replace";
import { terser } from "rollup-plugin-terser";

import pkg from "./package.json";

const dependencies = [
  ...Object.keys(pkg.peerDependencies),
  ...Object.keys(pkg.devDependencies),
];

export default {
  input: "src/index.js",
  output: [
    { file: pkg.main, format: "cjs" },
    { file: pkg.module, format: "esm" },
  ],
  plugins: [
    replace({ exclude: "node_modules/**", preventAssignment: true }),
    nodeResolve(),
    babel({
      babelHelpers: "bundled",
      exclude: "node_modules/**",
    }),
    commonjs(),
    image(),
    //  terser(),
  ],
  external: [...dependencies],
};


//babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "env": {
      "test": {
        "presets": [
          ["@babel/preset-env", { "modules": "cjs" }]
        ]
      },
      "build": {
         "presets": [
            ["@babel/preset-env", { "modules": false }]
          ]
       }
    },
    "plugins": [[
      "babel-plugin-module-resolver",
      {
        "root": [
          "./src"
        ]
      }
    ]]
  }

https://github.com/Annshuk/microfrotend-lerna/tree/main/packages/design-system/dist <- can refer this

gongshun · 2022-06-02T01:37:22Z

After I build it becomes like this ：

nicolo-ribaudo · 2022-06-03T13:24:48Z

@gongshun Thanks, that screenshot is definitely buggy code! However, that is not the code published by us in @babel/runtime, as you already noticed: that e.default = assignment is injected by something else (webpack? rollup? I don't know what bundler vue-cli uses). I suggest reporting this bug to them so that they can fix it 🙏

@Annshuk How can I use your repository to see this bug? I tried running the following commands:

yarn in the monorepo root
yarn build in packages/design-system
yarn test in packages/design-system

but all the tests passed without errors. I also tried yarn storybook (after fixing the Button import in packages/design-system/src/components/Button/Button.stories.js), and even aftrer clicking on the button in the browser a few times I still don't see the error.

Annshuk · 2022-06-03T15:50:49Z

The problems is with different system with same configuratio, so there when bundles creating it taking from
var _regeneratorRuntime = require('@babel/runtime/helpers/esm/regeneratorRuntime')
which i dont wana, how can i use
var _regeneratorRuntime = require('@babel/runtime/helpers/regeneratorRuntime') `

all the errors is happening while running test, so it throwing that regeneratorRuntime error

@nicolo-ribaudo any Suggestion or is this issue.

nicolo-ribaudo · 2022-06-05T06:30:16Z

@Annshuk I'll need a repository I can use to reproduce the bug. Unfortunately I ran out of ideas for this, I don't know what is causing the error 😅

gongshun · 2022-06-06T01:37:35Z

@nicolo-ribaudo it works normally when I use @babel/runtime v7.17.9

Annshuk · 2022-06-08T12:14:07Z

@nicolo-ribaudo thought my bundler cjs having var _regeneratorRuntime = require('@babel/runtime/helpers/esm/regeneratorRuntime') which i am expecting to be var _regeneratorRuntime = require('@babel/runtime/regeneratorRuntime')` so not sure why it budle in cjs

DevSysEngineer · 2022-06-16T12:52:32Z

I have exactly the same issue as the issue starter. The given solution is also working on our side. The variable exports can not be found and when this function will call we got this strange error.

nicolo-ribaudo · 2022-06-17T11:18:19Z

@KvanSteijn Can you provide a repository I can clone to reproduce the problem? It's imposble for us to understand what's causing the bug otherwise.

DevSysEngineer · 2022-06-17T11:30:43Z

@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.

nicolo-ribaudo · 2022-06-17T13:37:39Z

I'm sorry but I will need a repository. This bug is probably caused by a specific combination of different tools (Babel, webpack, terser maybe? Or other bundlers/minifiers), and without seeing how they are interacting I cannot guess what's happened.

codeHessel · 2022-06-29T02:56:07Z

sameproblem，is there any solution to fix it？ @nicolo-ribaudo

codeHessel · 2022-06-29T03:34:08Z

I have found something, when I change the code from "async await" to a Promise, it work! so, does the babel 's update have an influence on es6 compiling?

nicolo-ribaudo · 2022-06-29T07:31:06Z

Can you provide a repository I can clone to reproduce the problem? It's imposble for us to understand what's causing the bug otherwise.

nicolo-ribaudo · 2022-06-29T07:39:46Z

Note: from the screenshots and stack traces its clear that this is almost certainly not a Babel bug. There is some tool that you are all using that incorrectly rewrites exports.default in that Babel helper. The reason you are seeing this error after a Babel update is because we had to change the contents of that helper.

I'm being nice and offering to help all of you for free by cloning a repository that reproduces the bug, debug it and find which tool is broken, so that we can report the bug in the correct place. However, if none of you can provide such demo that shows the bug (and I now asked for or 4 times) I'm going to close this issue and you all will have to figure out which tool is transforming the helper code incorrectly by yourself.

nicolo-ribaudo · 2022-06-29T07:49:18Z

Ok, lets try to make things simpler. @codeHung shows almost certainly that it's a webpack bug. Which webpack version are you using?

MuppetPower · 2022-06-29T07:58:53Z

@nicolo-ribaudo I have the same issue (I don't have repository I can share unfortunately). My Webpack is at version 4.4.6 if that helps - for some other reasons I'm blocked in using Webpack 5 for the time being, so its the latest 4.x I'm using.

Thanks for taking the time to help us with this!

nicolo-ribaudo · 2022-06-29T08:25:31Z

Ohh maybe I have an idea. I found a similar Babel bug, but it shouldn't affect you if you are using babel-loader (i.e. Babel in webpack) or #14628 (comment).

However, I'll fix it and maybe it will solve this problem. It could only affect you if you are using Babel to compile ESM to CJS in webpack (you shouldn't! Webpack prefers ESM to CommonJS) and you are compiling your dependencies.

MuppetPower · 2022-06-29T08:29:48Z

I'll confess to not fully understanding what you said, but perhaps this config from my webpack is relevant if by CJS you mean corejs?

const babelLoader = {
		loader: 'babel-loader',
		options: {
			presets: [['@babel/preset-env', { useBuiltIns: 'entry', corejs: 3 }]],
			compact: false,
			plugins: [
				'@babel/plugin-transform-async-to-generator',
				'@babel/plugin-transform-arrow-functions',
				'@babel/plugin-transform-modules-commonjs',
				['inline-dotenv', { path: `.env.${argv.mode}`, unsafe: true }],
				['import', { libraryName: 'antd', style: true }],
			],
		},
	};

nicolo-ribaudo · 2022-06-29T08:58:22Z

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 · 2022-06-29T09:29:10Z

I opened #14708 which might hopefully fix this. Babel was broken when compiling a specific exoprts combination at least since Babel 7.0.0, but the problem now is that @babel/runtime is using that specific combination 😅

For most of you, the best solution is to not transform CommonJS modules when using Rollup or Webpack, since bundlers can optimize your code better when they see the original ESM code.

MuppetPower · 2022-06-29T10:04:40Z

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.

Thanks so much - this fixed the issue for me.

I inherited the project so perhaps they didn't used to part of @babel/preset-env - I'll remove them now.

gongshun added the i: needs triage label Jun 1, 2022

liuxingbaoyu added i: question i: third party The report is a problem of third party and removed i: needs triage labels Jun 3, 2022

nicolo-ribaudo mentioned this issue Jun 29, 2022

Unshadow cjs exports when transforming mutations #14708

Merged

nicolo-ribaudo closed this as completed in #14708 Jun 29, 2022

github-actions bot added the outdated A closed issue/PR that is archived due to age. Recommended to make a new issue label Sep 29, 2022

github-actions bot locked as resolved and limited conversation to collaborators Sep 29, 2022

[Bug] Console error: Uncaught TypeError: Cannot set properties of undefined (setting 'default') #14628

[Bug] Console error: Uncaught TypeError: Cannot set properties of undefined (setting 'default') #14628

Comments

gongshun commented Jun 1, 2022 • edited

💻

How are you using Babel?

Input code

Configuration file name

Configuration

Current and expected behavior

Environment

Possible solution

Additional context

babel-bot commented Jun 1, 2022

Annshuk commented Jun 1, 2022

Annshuk commented Jun 1, 2022 • edited

nicolo-ribaudo commented Jun 1, 2022

Annshuk commented Jun 1, 2022

nicolo-ribaudo commented Jun 1, 2022

Annshuk commented Jun 1, 2022

nicolo-ribaudo commented Jun 1, 2022 • edited

Annshuk commented Jun 1, 2022

nicolo-ribaudo commented Jun 1, 2022

Annshuk commented Jun 1, 2022 • edited

nicolo-ribaudo commented Jun 1, 2022

Annshuk commented Jun 1, 2022

nicolo-ribaudo commented Jun 1, 2022

Annshuk commented Jun 1, 2022

nicolo-ribaudo commented Jun 1, 2022

Annshuk commented Jun 1, 2022

nicolo-ribaudo commented Jun 1, 2022

Annshuk commented Jun 1, 2022 • edited

gongshun commented Jun 2, 2022

nicolo-ribaudo commented Jun 3, 2022 • edited

Annshuk commented Jun 3, 2022 • edited

nicolo-ribaudo commented Jun 5, 2022

gongshun commented Jun 6, 2022

Annshuk commented Jun 8, 2022

DevSysEngineer commented Jun 16, 2022

nicolo-ribaudo commented Jun 17, 2022

DevSysEngineer commented Jun 17, 2022

nicolo-ribaudo commented Jun 17, 2022

codeHessel commented Jun 29, 2022

codeHessel commented Jun 29, 2022

nicolo-ribaudo commented Jun 29, 2022

nicolo-ribaudo commented Jun 29, 2022

nicolo-ribaudo commented Jun 29, 2022

MuppetPower commented Jun 29, 2022

nicolo-ribaudo commented Jun 29, 2022 • edited

MuppetPower commented Jun 29, 2022 • edited by nicolo-ribaudo

nicolo-ribaudo commented Jun 29, 2022 • edited

nicolo-ribaudo commented Jun 29, 2022

MuppetPower commented Jun 29, 2022

gongshun commented Jun 1, 2022 •

edited

Annshuk commented Jun 1, 2022 •

edited

nicolo-ribaudo commented Jun 1, 2022 •

edited

Annshuk commented Jun 1, 2022 •

edited

Annshuk commented Jun 1, 2022 •

edited

nicolo-ribaudo commented Jun 3, 2022 •

edited

Annshuk commented Jun 3, 2022 •

edited

nicolo-ribaudo commented Jun 29, 2022 •

edited

MuppetPower commented Jun 29, 2022 •

edited by nicolo-ribaudo

nicolo-ribaudo commented Jun 29, 2022 •

edited