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

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

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

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

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

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