parcel: 🐛 Can't add more presets to .babelrc (Merge defaults with babelrc file problem)

I’ve run into the same problem with .babelrc:

{
  "presets": ["env", "stage-2", "react"],
}

and compiled success after adding "plugins": ["transform-class-properties"] .babelrc:

{
  "presets": ["env", "stage-2", "react"],
  "plugins": ["transform-class-properties"]
}

Parcel 2 will no longer merge .babelrc with a default config for babel-preset-env. Instead, .babelrc will override the default config.

Commenting certain part of the code it is not working for me anymore… This bug should be top priority to be solved it is very annoying 😦 (can’t do react without transform class properties)

any workaround for now?

Unfortunately none of the .babelrc examples here seem to work for me (even when playing with the order). ["env", "react"] alone won’t work, as the codebase uses the spread operator extensively (and then that fails because of that). If I add that plugin manually, I still get an error, with the .bablerc looking like the following:

{
  "presets": ["env", "react"],
  "plugins": ["transform-class-properties", "transform-object-rest-spread"]
}

I guess the class property thing might actually work for my own codebase (I’m not sure in the processing order of parcel though to be sure), but it definitely fails for dependencies. I get the following error in react-redux-toastr:

.../node_modules/react-redux-toastr/src/ReduxToastr.js:13:21: Unexpected token (13:21)
  11 |
  12 | export class ReduxToastr extends React.Component {
> 13 |   static displayName = 'ReduxToastr';
     |                      ^
  14 |

I get the following error with both “stage-x” or manually adding “transform-class-properties”. (and as I mentioned, the same project setup works with babel-jest and webpack)

{
  "plugins": ["transform-class-properties"],
  "presets": ["react-app"]
}

This works for me.

@devongovett I think this is because the order of plugins and presets matters:

This:

{
  "presets": ["env", "stage-2"]
}

means that stage-2 will be applied first and afterwards env.

Plugins run before presets (https://babeljs.io/docs/plugins/#pluginpreset-ordering), so

{
  "presets": ["env", "stage-2"],
  "plugins": ["transform-class-properties"]
}

will first run transform-class-properties, then stage-2 and then env.

But I think the way that parcel modifies the config (translating env into the individual plugins - why are we even doing that, avoiding a new dependency in the project itself?) breaks that order:

{
  "presets": ["stage-2"],
  "plugins": [/*all the indivial plugins from "env"*/]
}

will behave the same as

{
  "presets": ["stage-2", "env"]
}

which isn’t what we want? (env is somehow always the first entry). I’m guessing, that the error stems from some env plugin, which can’t handle static class properties.

Commenting out only https://github.com/parcel-bundler/parcel/blob/eaf51d01462b353aeaf78ebe80d797477ae1938d/src/transforms/babel.js#L114 fixes the error (but of course no env plugins are applied because "plugins": [/*all the indivial plugins from "env"*/] isn’t added to the config).

EDIT: Specifying the plugin explicitly works because it will be the first plugin listed

{
  "presets": ["stage-0"],
  "plugins": ["transform-class-properties", /*...*/]
}

and Plugin ordering is first to last.

There is some logic here which filters out presets already applied by babel-preset-env. stage-X presets are not in the list though, so I’m a not exactly sure what’s going on. That’s the place to look though, if someone wants to take this on.

https://github.com/parcel-bundler/parcel/blob/0d9d14cbda742e612b36f5c37db55e45a7a1ff1e/src/transforms/babel.js#L98-L103

Have a similar issue with spread operator in a node module:

$ ./node_modules/parcel-bundler/bin/cli.js ./index.html --no-cache
Server running at http://localhost:1234
parcel-test/node_modules/pwa-helpers/lazy-reducer-enhancer.js:37:8:
Unexpected token (37:8)
  35 |       const nextStore = nextCreator(origReducer, preloadedState);
  36 |       return {
> 37 |         ...nextStore,
     |         ^
  38 |         addReducers(newReducers) {
  39 |           this.replaceReducer(combineReducers(lazyReducers = {

Babel preset is installed and working fine with object spreading in the project code. Any suggestions here?

I’ve run into the same problem when using parcel-bundler with babel-preset-react-app.

package.json:

"babel-preset-react-app": "^3.1.1",
"cross-env": "^5.1.3"

.babelrc:

{
  "presets": ["react-app"]
}

Getting Missing class proper error.

@lrn2prgrm I think I was mistaken before, mixing up plugins and presets. If you want to give this a try:

.babelrc

{
  "presets": ["env", "react", "stage-2"],
  "plugins": [ "transform-class-properties",  "transform-es2015-classes",]
}

Just be sure to actually install those plugins first.

Anyone manage to resolve this? I have the same issue with parcel 1.6.x. And adding the plugins manually changed nothing. The same babel conf seems to work for babel-jest and for webpack