[Bug]: 'return' outside of function.

[kungfooman]

💻

• Would you like to work on a fix?

How are you using Babel?

@rollup/plugin-babel

Input code

(there is no input code)

Configuration file name

No response

Configuration

No response

Current and expected behavior

Current behaviour: SyntaxError
Expected behaviour: no SyntaxError

Environment

Babel ^7.22.6
Node v18.12.1

Possible solution

Finally ship proper MJS files.

Additional context

Install @babel/core and you will find this file:

node_modules/@babel/types/lib/index.js

"use strict";

if (typeof process === "object" && process.version === "v20.6.0") {
  if (exports["___internal__alreadyRunning" + ""]) return;
  Object.defineProperty(exports, "___internal__alreadyRunning", {
    value: true,
    enumerable: false,
    configurable: true
  });
}
Object.defineProperty(exports, "__esModule", {
  value: true
});
// and more...

Error is in line 4: if (exports["___internal__alreadyRunning" + ""]) return;

You are not allowed to output a return in module scope:

[!] (plugin commonjs--resolver) SyntaxError: /var/www/html/RuntimeTypeInspector.js/node_modules/@babel/types/lib/index.js: 'return' outside of function. (4:51)

I'm not sure why this project is shipping such old-fashioned and buggy files. Projects like Monaco editor ship browser-consumable MJS files - via importmap.

So this is a bug report, but at the same time a feature request.

Any thoughts why there are no browser-consumable MJS files yet in the released package?

[babel-bot]

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

That file is a CommonJS file, and CommonJS supports top-level return.

If you wish, you can use Babel 8.0.0-alpha.2 that is published as ESM (make sure that all your @babel/ dependencies are on the same alpha version)

[kungfooman]

Very nice, thank you for the information @nicolo-ribaudo!

npm install @babel/core@8.0.0-alpha.2
npm install @babel/preset-env@8.0.0-alpha.2

Makes everything so much easier 👍

[nicolo-ribaudo]

If needed, we are working on a migration guide: https://next.babeljs.io/docs/v8-migration

[kungfooman]

Thank you @nicolo-ribaudo, you are the one who worked it out - huge respect and congratulations!

I would like to consume @babel/core entirely in the browser via <script type="importmap"> because that makes debugging so easy:

https://github.com/kungfooman/babel-8-via-importmap

However, right now I'm stuck in an endless loop for module resolvings:

I already used importmaps with some other projects, but this is the first time I encounter this infinite-resolve issue. Do you happen to have experience with the modern way to use ES modules (via <script type="importmap"> tag)?

Basically I developed a Babel plugin, but for "live testing" (a bit like the Babel REPL or TS Playground) I also want to run it easily in the browser to show off its features.

[nicolo-ribaudo]

I don't really know what could be causing that, maybe a demo hosted somewhere would help.

However, for your use case you may also consider loading @babel/standalone from a CDN, which is a browser-ready pre-bundled version of Babel. It's not ESM (yet) but UMD, so you would have to load it with a script tag and use the Babel global.

[kungfooman]

Thank you @nicolo-ribaudo, the only issue I have with @babel/standalone that it doesn't export parseSync (even though it contains it). It can be fixed by editing the file:

  exports.availablePlugins = availablePlugins;
  exports.availablePresets = availablePresets;
  exports.buildExternalHelpers = buildExternalHelpers;
  exports.disableScriptTags = disableScriptTags;
  exports.registerPlugin = registerPlugin;
  exports.registerPlugins = registerPlugins;
  exports.registerPreset = registerPreset;
  exports.registerPresets = registerPresets;
  exports.transform = transform;
  exports.transformFromAst = transformFromAst;
  exports.transformScriptTags = transformScriptTags;
  exports.version = version;
  exports._babel = _babel; // HACK
  Object.defineProperty(exports, '__esModule', { value: true });

Then I can access parseSync like:

But I would prefer to not hack UMD outputs 😅 Maybe I'm just missing something?

In any case, thank you for your support! I will keep an eye on the ESM version and I'm sure it will work one day directly in the browser. 🚀

[nicolo-ribaudo]

If you have a demo with the import map I would still be happy to take a look and figure out if it's a problem on our end :)

[kungfooman]

If you have a demo with the import map I would still be happy to take a look and figure out if it's a problem on our end :)

Yep, that's what I'm wondering too, but I had no time to fully investigate so far.

Here is a live demo: https://killtube.org/~playcanvas/babel-8-via-importmap/test.html

However, I think it's easiest to clone my little test repo to be able to quickly change the importmap for example:

https://github.com/kungfooman/babel-8-via-importmap

[nicolo-ribaudo]

I'm confused as to why it causes an infinite loading loop, but it's due to line 2 of https://unpkg.com/browse/@babel/core@8.0.0-alpha.2/lib/config/helpers/config-api.js (we'll fix it).

[nicolo-ribaudo]

Actually, it might be fixed by #15892 and we just need to release it.

[kungfooman]

Wow, I can't believe how quick you are! It probably would have taken me hours/days to figure that out, my entire browser was just freezing 😅

[nicolo-ribaudo]

Could you open a new issue and show the stack trace? That's a different error.

[kungfooman]

Without inspecting too much, the error is coming from:

babel/packages/babel-core/cjs-proxy.cjs

Lines 48 to 53 in e976248

	function notLoadedError(name, keyword) {
	return new Error(
	`The \`${name}\` export of @babel/core is only ${keyword}` +
	` from the CommonJS version after that the ESM version is loaded.`
	);
	}

Seems like your build tool is picking the wrong entry in @babel/core package.json - the require field:

  "exports": {
    ".": {
      "require": "./cjs-proxy.cjs",
      "default": "./lib/index.js"
    },
    "./package.json": "./package.json"
  },

But hard to say why in your particular case because of missing information.

On my end, this works perfectly:

npm install @babel/core@8.0.0-alpha.2
node
> const { traverse } = await import("@babel/core");