Skip to content

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

@mstijak

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    i: needs triageoutdatedA closed issue/PR that is archived due to age. Recommended to make a new issue

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions