Why babel-loader may ignore .babelrc?

Question

I’ve bootstrapped an app using create-react-app, then eject it and now configuring it further. But I have a problem, webpack doesn’t respect the presets declared in .babelrc?

I have that error, because of “lack” of stage-1 preset.

Syntax error: Missing class properties transform

Meanwhile, if I replace loader with a string notation, like this babel?presets[]=react,presets[]=es2015,presets[]=stage-1, it works well.

What can be done to fix it?

.babelrc:

{
  "presets": [
    "es2015",
    "react",
    "stage-1"
  ],
  "plugins": [
    "transform-flow-strip-types",
    "transform-react-remove-prop-types"
  ]
}

Webpack babel loader configuration:

{
    test: /\.(js|jsx)$/,
    include: paths.appSrc,
    loader: 'babel',
}

Answer 1

It will ignore your custom babelrc. You have to either...

1) provide them in the in webpack config, as you mentioned

2) eject by running npm run eject and use a custom babelrc

3) use a fork of create-react-app like this one

create-react-app intentionally abstracts away the process of configuring babel. After all, its goal is to remove the headache of setting up a project for people coming to react for the first time or just hoping to get started quickly. Configuring babel is a big part of that headache. Hence, it does not let you configure babel.

It does, however, provide the ability to eject for exactly this reason. See this github issue for more discussion on this.

Answer 2

Adding transform-class-properties plugin into .babelrc helped. So everything is fine with a loader itself. But still there is no an answer why stage-1 preset in a .babelrc array is ignoring, while with a string notation it works. Hope, it helps someone anyway.