[Bug]: Cannot use @babel/preset-env in the browser from version 7.24.1

[mstijak]

💻

• Would you like to work on a fix?

How are you using Babel?

babel-loader (webpack)

Input code

import jsx from "@babel/plugin-transform-react-jsx";
import fbind from "@babel/plugin-proposal-function-bind";

import { transform } from "@babel/core";
import * as env from "@babel/preset-env";
import * as cx from "babel-plugin-transform-cx-jsx";

export function transpile(code) {
   try {
      var doc = transform(code, {
         presets: [[env, { loose: true }]],
         plugins: [cx, jsx, fbind],
      });
      return doc.code;
   } catch (e) {
      return `/* Error: ${e.message} \n ${e.stack} */`;
   }
}

Configuration file name

No response

Configuration

No response

Current and expected behavior

import corejs3Polyfills from "core-js-compat/data.json" with { type: "json" };

is compiled into

const corejs3Polyfills = JSON.parse(require("fs").readFileSync(require.resolve("core-js-compat/data.json")));

which makes it impossible to use it in the browser.

I think this commit introduced the problem:
ec0171e#diff-f7b57f023be8b020c8b0a14c39105ee2fb9f3400c0438b9b3e912e78efd266c8

Environment

• Babel version 7.24.4

Possible solution

Reverting to version 7.24.0 helps.

Additional context

babel is loaded in a dev-like online environment:
https://fiddle.cxjs.io/?f=g33HXn2r

[babel-bot]

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

If that line used fetch as a fallback for fs.readFileSync, would it be better?

[mstijak]

I think that might work. As long as it's possible to run it in the browser.