[Bug]: runtime/helpers/esm/*.js import the CJS version of "typeof"

[pmcelhaney]

💻

• Would you like to work on a fix?

How are you using Babel?

Other (Next.js, Gatsby, vue-cli, ...)

Input code

This lines from node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn.js

import _typeof from "@babel/runtime/helpers/typeof";
import assertThisInitialized from "./assertThisInitialized.js";

should be

import _typeof from "./typeof.js";
import assertThisInitialized from "./assertThisInitialized.js";

In other words, the second line should match the first. It should import the ESM version of typeof.js rather than the CJS version which lives in the parent directory. Every file in that directory that imports typeof.js has the same problem, and for some reason it's specific to typeof.js. Other siblings are imported the same as they are in line 2 above.

Configuration file name

No response

Configuration

n/a

Current and expected behavior

Current:

Uncaught SyntaxError: The requested module '../typeof.js' does not provide an export named 'default'

Expected:

No error, because it's loading the ESM version of typeof.js instead of the CJS version.

Environment

Babel version 7.15.4

Possible solution

This looks like a trivial fix. I just can't figure out where the source code that generates these files lives.

Additional context

I encountered this error when importing i18next in a browser. I was able to fix it by changing that import directly in node_modules. I then installed @babel/runtime directly in a clean npm repo to confirm my node_modules wasn't altered by some other process.

[babel-bot]

Hey @pmcelhaney! 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]

The code which should "fix" the imports in the helpers is at in

babel/packages/babel-plugin-transform-runtime/scripts/build-dist.js

Line 260 in 178d43f

function buildRuntimeRewritePlugin(runtimeName, helperName) {

.

I'm assigning tihs to you, since you selected "Would you like to work on a fix?"!

If it is the first time that you contribute to Babel, follow these steps: (you need to have make and yarn available on your machine)

1. Write a comment there to let other possible contributors know that you are working on this bug.
2. Fork the repo
3. Run git clone https://github.com/<YOUR_USERNAME>/babel.git && cd babel
4. Run yarn && make bootstrap
5. Wait ⏳
6. Whenever you want to re-generate the helpers run build-dist. For a full build, run make build
7. Update the code!
8. If it is working, run make test to run all the tests
9. It might make sense to commit @babel/runtime/helpers/esm/possibleConstructorReturn.js, so that we notice if we break it again.
10. Run git push and open a PR!

[pmcelhaney]

I spent a few hours looking into it and I'm lost. :(

With most of the runtime helpers, path.get("arguments")[0].node is just the name of the helper, e.g. "assertThisInitialized". But for typeof, it's the full path to the file without the esm directory ("@babel/runtime/helpers/typeof").

babel/packages/babel-plugin-transform-runtime/scripts/build-dist.js

Line 298 in 178d43f

adjustImportPath(path.get("arguments")[0].node);

I can't figure out where the code to stick the import for the typeof helper at the top of the file is.

I noticed there's a babel-runtime/helpers/typeof.js but its counterpart is missing from babel-runtime/helpers/esm/. Also typeof seems to be a special case here:

babel/packages/babel-plugin-transform-runtime/scripts/build-dist.js

Lines 238 to 258 in 178d43f

	return babel.transformFromAst(tree, null, {
	filename: helperFilename,
	presets: [
	[
	"@babel/preset-env",
	{ modules: false, exclude: ["@babel/plugin-transform-typeof-symbol"] },
	],
	],
	plugins: [
	[transformRuntime, { corejs, version: runtimeVersion }],
	buildRuntimeRewritePlugin(runtimeName, helperName),
	esm ? null : addDefaultCJSExport,
	].filter(Boolean),
	overrides: [
	{
	exclude: /typeof/,
	plugins: ["@babel/plugin-transform-typeof-symbol"],
	},
	],
	}).code;
	}

Not sure if either of those has anything to do with it.

[nicolo-ribaudo]

@pmcelhaney It looks like this is a problem when injecting an import because the helpers is being transpiled and depends on another helper, not for normal helper dependencies. In the possibleConstructorReturn, the helper itself does not depend on typeof:

babel/packages/babel-helpers/src/helpers.ts

Lines 618 to 630 in 89cab43

	helpers.possibleConstructorReturn = helper("7.0.0-beta.0")`
	import assertThisInitialized from "assertThisInitialized";
	export default function _possibleConstructorReturn(self, call) {
	if (call && (typeof call === "object" || typeof call === "function")) {
	return call;
	} else if (call !== void 0) {
	throw new TypeError("Derived constructors may only return object or undefined");
	}
	return assertThisInitialized(self);
	}
	`;

A working workaround would be to remove the "@babel/runtime/helpers/" prefix in adjustImportPath.

[nicolo-ribaudo]

Hi @pmcelhaney! Are you still working on this?

[FuryACE007]

Hi,
I am a newbie and I want to make my first open-source contribution. Could you please assign this bug to me?

[nicolo-ribaudo]

Sure, thanks! If you need any help, feel free to ask here or on slack.

[exb]

Hi @FuryACE007! 👋 Still working on this? If not, I’d like to pick this up.

[nicolo-ribaudo]

@exb If @FuryACE007 doesn't respond within Monday, this bug is yours!

[azeez1776]

Hey @nicolo-ribaudo can I try working on the problem?

[nicolo-ribaudo]

@exb Are you still working on this?

[exb]

Hi @nicolo-ribaudo, I started working on this yesterday :)

[azeez1776]

Hey @exb , pls let me know when your done