Updated `babel` installation broken: Unhappy about preset(s) configuration?

Question

I recently updated my system and therefore had to reinstall a few tool-chains. This broke my usage of babel.

Before the update (WORKING)

I had babel installed as follows ...

npm install -g babel-cli
npm install -g babel-preset-env

... within a Python virtual environment that had node integrated via nodeenv. This would give me babel in my PATH.

Next, I had a .babelrc located in the current working directory with the following content:

{
    "compact": false,
    "presets": [
        [
            "env",
            {
                "targets": [
                    "cover 99.5% in EU",
                    "Firefox ESR",
                    "not ie"
                ]
            }
        ]
    ]
}

I would then invoke babel as follows:

babel input.js -o output.js

This worked fine with a two to three-ish years old setup. The .babelrc file itself is probably even a few years older than that.

After the update (BROKEN)

I am dealing with:

$ babel --version
6.26.0 (babel-core 6.26.3)
$ node --version
v18.8.0
$ npm --version
8.19.1

The configuration, the integration via nodeenv and the way I invoke babel are identical. babel input.js -o output.js fails as follows:

Error: Couldn't find preset "env" relative to directory "/working/directory"
    at /env/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
[...]

I tried to make sense of the current documentation on presets, babel-preset-env and cofiguring babel, but honestly, I am stuck.

How can I make this work with contemporary babel 6?

---

Sorry for a potentially very naive and stupid question question. I rarely work with JS and related tools.

Answer 1

This issue actually has multiple layers.

First problem: babel-cli and babel-preset-env are outdated packages. babel now uses a different structure, so one must install it instead as follows:

npm install -g @babel/core @babel/cli @babel/preset-env

This also implies a change from "env" to "@babel/preset-env" in the configuration file.

Second problem: Although a "global" installation worked before, this is actually something that babel does not really support. babel will fail to locate @babel/preset-env.

There are two things that can be done: Install the three packages mentioned above locally, i.e. without the -g flag but instead with --save-dev. This dumps everything into the current working directory. If this is not desired, there is an ugly hack: Linking the node_modules from within the Python virtual environment into the working directory, i.e.

ln -s /path/to/python/env/lib64/node_modules node_modules

Third problem: Outdated configuration. It's details, but the region is now named alt-EU instead of EU. Besides, not ie is not a valid option anymore. not ie <= 11 is, however. Ultimately, the new configuration has to look as follows:

{
    "compact": false,
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": [
                    "cover 99.5% in alt-EU",
                    "Firefox ESR",
                    "not ie <= 11"
                ]
            }
        ]
    ]
}

Hope this helps someone to NOT burn a crazy amount of time ...