question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

babel seems to ignore .browserslistrc

See original GitHub issue

Bug Report

Current Behavior Babel is not compiling code as expected (even const / let stays in code). I am using following CLI command: watchify main.js -t babelify -o build/main.js

Input Code

  • REPL or Repo link if applicable:
import 'regenerator-runtime/runtime';
const ytdl = require('ytdl-core');

ytdl.getInfo("YySiE8DsQ0M").then(function(value) {
  // execution
  console.log(value)
}, function(reason) {
  // refuse
  console.log(reason)
});

Expected behavior/code I do expect that babel should transform code to ie8 - compatible (es5)

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

  • Filename: babel.config.js
module.exports = {
    presets : [
        [
            "@babel/preset-env"
        ]
    ]
}
  • Filename: .browserslistrc
last 1 version
> 0.25%
IE 8 # sorry

I have also tried .babelrc:

  • Filename .babelrc
{
    "presets": [
        ["@babel/preset-env", {
            "useBuiltIns": "entry",
            "targets": {
                "browsers": ["ie >= 7"]
            }
        }]
    ]
}

Environment

    OS: Linux 4.15 Linux Mint 19.1 (Tessa)
  Binaries:
    Node: 10.19.0 - /usr/bin/node
    npm: 6.14.3 - /usr/local/bin/npm
  npmPackages:
    @babel/cli: ^7.8.4 => 7.8.4 
    @babel/core: ^7.9.0 => 7.9.0 
    @babel/plugin-transform-block-scoping: ^7.8.3 => 7.8.3 
    @babel/polyfill: ^7.8.7 => 7.8.7 
    @babel/preset-env: ^7.9.5 => 7.9.5 
    babel-core: ^6.26.3 => 6.26.3 
    babel-preset-env: ^1.7.0 => 1.7.0 
    babelify: ^10.0.0 => 10.0.0 
  • Babel version(s): 7.9.0
  • Node/npm version: 10.19.0 / 6.4.13
  • OS: Linux Mint 19.1 Cinnamon x64
  • Monorepo: no
  • How you are using Babel: via CLI with watchify & browserify

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:18 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
thasmocommented, May 30, 2020

I’ve reported a similar issue in #11651 but it is not related to node_modules.

0reactions
JMarkoskicommented, May 14, 2020

@ak1987 Try this. First:

npm install --save-dev @babel/preset-env @babel/transform-runtime npm install --save @babel/runtime-corejs3

and try this config: babel.config.json:

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["ie >= 8"]
      }
    }]
  ],
  "plugins": [
    ["@babel/transform-runtime", {
      "corejs": 3,
      "absoluteRuntime": true
    }]
  ]
}

and this:

var fs = require("fs");
var browserify = require("browserify");

(async ()=>{
  await browserify({ entries: ["main.js"] })
  .transform("babelify", {
    global: true,
  })
  .bundle()
  .pipe(fs.createWriteStream("bundle.js"));
})();
Read more comments on GitHub >

github_iconTop Results From Across the Web

Babel with babel-preset-env seems to ignore browserslist config
But, the problem is that Babel seems to ignore the browserslist key. The same is true if I use a .browserslistrc file containing:...
Read more >
babel/preset-env
By default @babel/preset-env will use browserslist config sources unless either the targets or ignoreBrowserslistConfig options are set. Please note that if you ...
Read more >
How babel preset-env, core-js, and browserslistrc work together
Modern frontend tools like babel seem almost magical. What do they do really?
Read more >
browserslist - npm
... target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-env-preset. ... Or in .browserslistrc config:.
Read more >
Problem: Babel isn't compiling my code how I expected
The browserslist is a way to specify targets for browsers or node for frontend tools! You can add this either through the explicit...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found