I hate ES6 and I want to use CoffeeScript instead, but people keep calling me a chump for using CoffeeScript.

Hello, I am trying to migrate from babel6 to babel7 and I'm lost in understanding the differences between the babelrc and babel.config.json file. Does it require me to configure my project with both the files or just the babelrc/babel.config.json is enough? I've figured out that the babel.config.json is for looking up at the root level for the modules or something but I am not sure I understood is correct. What exactly is the difference ?

Hi,

If you could advise on how to configure babel-loader in webpack config.

In my webpack config I have the following entry:

        use: {
          loader: "babel-loader",
          options: {
            presets: [
              [
                "@babel/preset-env",
                {
                  targets: {
                    browsers: [
                      "Chrome >= 65"
                    ]
                  },
                  useBuiltIns: "usage",
                  modules: false,
                  corejs: 3,
                  include: [],
                  exclude: []
                }
              ]
            ]
          }
        }

in my .browserslistrc I have

[modern]
last 1 chrome version
last 1 firefox version
last 1 edge version
last 1 iOS version
last 1 Opera version

[production]
Chrome >= 65

[legacy]
ie 11
Firefox ESR
not op_mini all

Instead of having to list browsers in webpack config (i.e. browsers: [ "Chrome >= 65" ]), I would like to use environment name variable from my .browserslistrc (i.e. modern/production/legacy). But babel-loader doesn't seem to like something like env: "modern" or target: "modern" or browsers: [ "modern" ].

Is there a way to use an environment name code block from .browserslistrc in babel-loader config?

Reason is, I have/merge several different webpack configs, and would rather have browser lists placed in one dedicated file (that's what .browserslistrc is for after all).

I'd appreciate advice.

# HELLL MEEE

## WTF addcomponentasrefto

I'm trying to build in react.15.3 and upload it to the Electron browser view, but it doesn't seem to work properly.

Error details

barbell settings

webpack settings

Package Settings

- error

✨setting

>>>webpack.config.js

```js

{

test: /\.(js|jsx)$/,
exclude: path.join(__dirname, 'node_modules'),
loader:"babel-loader",

},

```

>>>babel.config.js

```js

module.exports = {
presets: [
"@babel/preset-env",
"@babel/preset-react",
'@babel/preset-typescript',
  ],
plugins: [
"@babel/plugin-transform-runtime", // polyfill
"@babel/plugin-proposal-export-default-from", // export default
"@babel/syntax-export-extensions", // export default
"@babel/plugin-syntax-dynamic-import",

"@babel/plugin-transform-modules-commonjs"
  ],
};

```

>>> package.json ( dependencies)

```json

{
"dependencies": {
"react": "15.3.2",
"react-dom": "15.3.2"
  },
"devDependencies": {
"@babel/core": "^7.14.0",
"@babel/plugin-proposal-class-properties": "^7.16.0",
"@babel/plugin-proposal-export-default-from": "^7.16.0",
"@babel/plugin-proposal-private-methods": "^7.16.0",
"@babel/plugin-proposal-private-property-in-object": "^7.16.0",
"@babel/plugin-syntax-export-default-from": "^7.14.5",
"@babel/plugin-syntax-export-extensions": "^7.0.0-beta.32",
"@babel/plugin-transform-block-scoping": "^7.16.0",
"@babel/plugin-transform-modules-commonjs": "^7.16.0",
"@babel/plugin-transform-runtime": "^7.16.0",
"@babel/preset-env": "^7.14.1",
"@babel/preset-es2015": "^7.0.0-beta.53",
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.13.0",
"@testing-library/jest-dom": "^5.12.0",
"@testing-library/react": "^11.2.6",
"@types/jest": "^26.0.23",
"@types/testing-library__jest-dom": "^5.9.5",
"@typescript-eslint/eslint-plugin": "^4.25.0",
"@typescript-eslint/parser": "^4.25.0",
"babel": "^5.8.38",
"babel-loader": "^8.2.2",
"core-js": "^3.19.1",
"css-loader": "3.5.3",
"exports-loader": "^3.1.0",
"file-loader": "6.0.0",
"html-webpack-plugin": "^5.3.1",
"path-browserify": "^1.0.1",
"string-replace-loader": "^3.0.3",
"webpack": "^5.36.2",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.3.0"
  }
}

```

Trying to install via Windows VSC. Any ideas as to how I can fix?

I followed http://babeljs.io/docs/setup/#installation. Have basic helloword app in reactjs. There is no way this thing would compile. Keeps throwing SyntaxError: Unexpected token. Does Babel 6 even support React?

Experiencing following transpile errors for setting up new project in babel 7. Help ?

Error: .env["development"].plugins[0][1] must be an object, false, or undefined

- TIA

I'm using eleventy to create a static site with a sprinkle of JavaScript. I'm not using webpack or other bundlers. JavaScript is transpiled by calling 'transformFileAsync' via eleventys beforeBuild event. Here's the relevant part of eleventy config:

babel.transformFileAsync("src/assets/js/index.js").then((result) => {
      fs.outputFile("dist/assets/main.js", result.code, (err) => {
        if (err) throw err;
        console.log("JS transpiled.");
      });
    });

My babel.config.js is as follows:

module.exports = (api) => {
  api.cache(true);

  const presets = [
    [
      "@babel/preset-env",
      {
        bugfixes: true,
        modules: "systemjs",
        useBuiltIns: "usage",
        corejs: { version: 3, proposals: true },
      },
    ],
  ];

  const plugins = [];

  return { presets, plugins };
};

Babel works as advertised and transpiles my js just fine. But I can't figure out how I can include (without help from a bundler) corejs polyfills in the final production bundle.

For example, the following code:

Array.from(document.getElementsByTagName("p")).forEach((p) => {
  console.log(`p ${index}, startsWith('W')`, p, p.innerHTML.startsWith("W"));
});

Is transpiled to:

import "core-js/modules/es.array.for-each";
import "core-js/modules/es.array.from";
import "core-js/modules/es.string.iterator";
import "core-js/modules/es.string.starts-with";
import "core-js/modules/web.dom-collections.for-each";
System.register([], function (_export, _context) {
  "use strict";

  return {
    setters: [],
    execute: function () {
      Array.from(document.getElementsByTagName("p")).forEach(function (p) {
        console.log("p ".concat(index, ", startsWith('W')"), p, p.innerHTML.startsWith("W"));
      });
    }
  };
});

How would I go about having the actual polyfill in the final bundle instead of all the imports?

I assume so since yellow is Babel's color. Coworkers and myself have always argued on how to pronounce 'Babel' and I think this will finally settle the pronunciation.

So this is a mess as hell JavaScript project and I need to add TypeScript support and update all the packages. I want to minimize the number of code changes. I have this problem regarding referencing its own class for static class properties.

I know it is not a standard but we use this transformation because this project comes from Flash.

So I have this class right now

class LocalizedControls {
    static A = "A";
    static B = LocalizedControls.A;
}

This is the babel plugins:

["transform-decorators-legacy", "transform-class-properties", "transform-object-rest-spread", "transform-object-assign"]

And I get this error

TypeError: Cannot read property 'A' of undefined

This is the compiled source code:

var LocalizedControls = (_temp = _class = function LocalizedControls() {
    __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck___default()(this, LocalizedControls);
}, _class.A = "A", _class.B = LocalizedControls.A)

Of course LocalizedControls is undefined because LocalizedControls is not defined here.

I know it works if it can either replace LocalizedControls.A into _class.A, or use semi-colon instead of comma. However I cannot find anyway in babel to fix this.

Either:

var LocalizedControls = (_temp = _class = function LocalizedControls() {
    __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck___default()(this, LocalizedControls);
}); _class.A = "A"; _class.B = LocalizedControls.A;

Or

var LocalizedControls = (_temp = _class = function LocalizedControls() {
    __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck___default()(this, LocalizedControls);
}, _class.A = "A", _class.B = _class.A)

This problem has been a few days already and I couldn't find a solution.

Thanks

I've followed various explanations to this: https://github.com/babel/babel/issues/236#issuecomment-65298807

I still don't find that to be sufficient because - it explains why babel would emulate the ES2015 behavior by assigning arguments to _arguments in the surrounding scope. But not why the declaration of arguments is done.

code is

class MyCoolArray extends Array {
  first() { return this[0];}
 }

var a = new MyCoolArray(1,2,3);
console.log(a.first());// get error 'a.first is not a function'

who knows why? thank you very much

online address is https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Ces2015-loose%2Ces2016%2Ces2017%2Clatest%2Creact%2Cstage-0%2Cstage-1%2Cstage-2%2Cstage-3&code=class%20MyCoolArray%20extends%20Array%20%7B%0A%20%20first()%20%7B%20return%20this%5B0%5D%3B%7D%0A%20%7D%0A%0Avar%20a%20%3D%20new%20MyCoolArray(1%2C2%2C3)%3B%0A%0A%0Aconsole.log(a.first())%3B

Recently I got the following warning when running my React project:

One of your dependencies, babel-preset-react-app, 
is importing the "@babel/plugin-proposal-private-property-in-object" 
package without declaring it in its dependencies. 
This is currently working because 
"@babel/plugin-proposal-private-property-in-object" is already in your node_modules 
folder for unrelated reasons, but it may break at any time.  
babel-preset-react-app is part of the create-react-app project,
 which is not maintained anymore. 
It is thus unlikely that this bug will ever be fixed. 
Add "@babel/plugin-proposal-private-property-in-object" to your 
devDependencies to work around this error. 
This will make this message go away.

I added the quoted Babel dependency to package.json (didn't reinstall node-modules) and commited/pushed the changes but the pipeline failed a few times. I'm not getting the warning anymore so I can't figure why the pipeline keeps failing. I have a hunch it has to do with this dependency since this never happened before. Version of React I'm running is 18.2.0.

Anyone else had this issue? Any input is appreciated.

In my project root folder I have many files and folders . Some of the files happen to have jsx extension and they are randomly located in the project tree .

I want each jsx file , on save , to be compiled to js file that has the same name and is located at the same folder as the original jsx file .

Unfortunately all I have managed to do is a single output file that has all the js concatenated :

npm install --save-dev @babel/cli;
npm install --save-dev @babel/core;
npm install --save-dev @babel/preset-react;

npx babel "./**/*.jsx" --watch -o file.js

I am interested if this problem has a solution by only using babel . If you are curious for a solution that does not solely use babel then this is what I have done so far .

Hi I'm getting this error and I'm using babel 6.24 version and not using webpack or any module bundler for that matter. I'm running a Windows 10 Machine. Can any one please help me resolve this

I have a babel plugin that transforms my code into a code that is again transformed by some other babel plugin from a totally different library. How can I make sure that the other babel plugin runs only after my babel plugin is done tranforming?

I am trying to add a polyfill into babel.config.js, like this:

module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: [
        'url-search-params-polyfill'
      ]
    }]
  ]
}

This makes the build fail with cryptic error:

Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
[BABEL] /opt/ondb/dev-front/ondb-frontend/src/main.js: Cannot read property 'chrome' of undefined (While processing: "/opt/ondb/dev-front/ondb-frontend/node_modules/@vue/babel-preset-app/index.js")

The polyfill is installed, babel is 6.26.0. Any ideas? Googling around reveals nothing.