Babel-loader: How can I configure babel preset options with query params?

Created on 15 Aug 2016 · 10Comments · Source: babel/babel-loader

E.g. say I have babel?presets[]=es2015 and I want to disable modules (see https://github.com/babel/babel/blob/master/CHANGELOG.md#preset-options-babelnotes) how can I do that? Is there an example available?

Is this the best way?

`babel?${JSON.stringify({
  presets: [
    [ 'babel-preset-es2015' , { modules: false } ]
  ]
})}`

Source

donaldpipowitch

Most helpful comment

I'm experiencing the same problem, can't seem to figure out why.

scottbedard on 4 Jan 2017

👍5

All 10 comments

There is also a "query" property on each object in loaders that will be converted to JSON. Ex:

{
  test: /\.js$/,
  loader: 'babel',
  query: {
    presets: [
      [ 'babel-preset-es2015' , { modules: false } ]
    ]
  },
  exclude: /node_modules/
}

aarongodin on 16 Aug 2016

If I have something like this in my project:

{
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: "babel",
                query: {
                    presets: [
                        "react",
                        ["es2015", { modules: false }],
                        "stage-0",
                    ],
                },
            }

I get the following error output:

ERROR in ./src/client/main.js
Module build failed: TypeError: [BABEL] /Users/fkrauthan/WebstormProjects/west-coast-sailing-club/web-ui/src/client/main.js: Invalid options type for foreign
    at Logger.error (/Users/fkrauthan/WebstormProjects/west-coast-sailing-club/web-ui/node_modules/babel-core/lib/transformation/file/logger.js:41:11)
    at OptionManager.mergeOptions (/Users/fkrauthan/WebstormProjects/west-coast-sailing-club/web-ui/node_modules/babel-core/lib/transformation/file/options/option-manager.js:211:16)
    at /Users/fkrauthan/WebstormProjects/west-coast-sailing-club/web-ui/node_modules/babel-core/lib/transformation/file/options/option-manager.js:289:14
    at /Users/fkrauthan/WebstormProjects/west-coast-sailing-club/web-ui/node_modules/babel-core/lib/transformation/file/options/option-manager.js:316:22
    at Array.map (native)
    at OptionManager.resolvePresets (/Users/fkrauthan/WebstormProjects/west-coast-sailing-club/web-ui/node_modules/babel-core/lib/transformation/file/options/option-manager.js:305:20)
    at OptionManager.mergePresets (/Users/fkrauthan/WebstormProjects/west-coast-sailing-club/web-ui/node_modules/babel-core/lib/transformation/file/options/option-manager.js:288:10)
    at OptionManager.mergeOptions (/Users/fkrauthan/WebstormProjects/west-coast-sailing-club/web-ui/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:14)
    at OptionManager.init (/Users/fkrauthan/WebstormProjects/west-coast-sailing-club/web-ui/node_modules/babel-core/lib/transformation/file/options/option-manager.js:360:12)
    at File.initOptions (/Users/fkrauthan/WebstormProjects/west-coast-sailing-club/web-ui/node_modules/babel-core/lib/transformation/file/index.js:223:65)
 @ multi app

If I replace ["es2015", { modules: false }], with "es2015", everything is working fine. Any idea what I need to change?

fkrauthan on 17 Aug 2016

👍5

@fkrauthan Which version of babel are you using? Plugin options are only supported as of 6.13.0.

If that's not the issue, there might be something between any of the presets included from stage-0 and es2015 that are conflicting. Is there anything you absolutely need from stage-0? It's fairly dangerous for production applications.

aarongodin on 18 Aug 2016

Here the output of my babel dependencies:

fkrauthan$ npm list | grep babel
+-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| +-- [email protected]
+-- [email protected]
| +-- [email protected]
| +-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| `-- [email protected]
|   `-- [email protected]
+-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| `-- [email protected]
+-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| `-- [email protected]
|   +-- [email protected]
|   | `-- [email protected]
|   +-- [email protected]
|   | `-- [email protected]
|   `-- [email protected]
|     +-- [email protected]
|     | `-- [email protected]
|     +-- [email protected]
|     | +-- [email protected]
|     | | `-- [email protected]
|     | `-- [email protected]
|     +-- [email protected]
|     | `-- [email protected]
|     `-- [email protected]
|       +-- [email protected]
|       +-- [email protected]
|       | `-- [email protected]
|       `-- [email protected]
|         +-- [email protected]
|         | `-- [email protected]
|         `-- [email protected]
+-- [email protected]
| | +-- [email protected]

fkrauthan on 18 Aug 2016

here is the correct setup, look at the babel release notes

presets: [
  ['es2015', { loose: true, modules: false }]
]

blacksonic on 22 Aug 2016

I'm experiencing the same problem, can't seem to figure out why.

scottbedard on 4 Jan 2017

👍5

I am facing the exact same problem.. Did anyone figure out how to fix this.. The below is my configuration in .babelrc.

{ "presets": [[ "env", { "targets": { "node": true }, "loose": true, "includes": ["babel-plugin-transform-object-rest-spread"] } ], "stage-0"] }

sylvesteraswin on 24 Jan 2017

I was having this issue and got it resolved by removing babel-preset-stage-0 and adding latest babel-preset-stage-1.

I wasn't including 'stage-0' in the presets inside my webpack config, but it seemed to matter that it was present. Also, as @aarongodin mentioned, updating to latest babel may help. In my case, not the issue though.

bodhiprice on 3 May 2017

can some one please explain what is the preset. I couldnt find this in webpack configuration documentation.
Thanks in advance

siddiq-rehman on 31 May 2017

I'm triaging old issues on babel-loader. Since this has been inactive for ages, I'm going to close it. Feel free to re-open if there's still something to discuss, but I'm assuming at this point it's been too long to address in a useful way.