.babelrc does not override correctly - info inside

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• I’m reporting the issue to the correct repository (not related to Angular, AngularCLI or any dependency)

Expected Behavior

A babel plugin should run by overriding the .babelrc.

Current Behavior

Style components babel plugin is not transforming anything.

I am using styled components and it states here that we can add a .babelrc file

https://www.styled-components.com/docs/tooling#babel-plugin

but it ALSO states that

NOTE
⚠️ The plugin call order in your .babelrc file matters. If you're using the env property in your babel 
configuration, then putting this plugin into the plugins array won't suffice. Instead it needs to be 
put into each env's plugins array to maintain it being executed first. See this for more information.

I have placed a .babelrc inside my app and I know its being picked up by nrwl because if I make a mistake in the file then npm run start - complains… So I know its being picked up.

My file is this

{
  "plugins": ["babel-plugin-styled-components"]
}

But I assume its being MERGED or something so technically this is NOT the only content of the .babelrc that is being provided.

Is this the case ?

There is a link here that states if we are using the ENV in the baberc then the plugin for each env should be provided - here is the link

https://github.com/styled-components/babel-plugin-styled-components/issues/78

and here is an example

{
    "env": {
        "development": {
            "plugins": [
                ["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ]
            ],
            "presets": ["next/babel"]
        },
        "production": {
            "plugins": [
                ["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ]
            ],
            "presets": ["next/babel"]
        }
    },
    "plugins": [
        ["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ]
    ]
}

Are we merging the .babelrc - so behind the scenes there is a “env” section/s ?

If this is the case, would it not be possible to allow non-merging OR maybe how we can override, like webpack config in NRWL does it, - by writing a JS file and the current config being passed in so we can iterate over the existing config and add more things ?

Failure Information (for bugs)

[iangregsondev]

Hi, I finally managed to get it working without using the macro plugin. The reason behind it is that the plugin must be the first one loaded… Can’t use the .babelrc because babel-loader (webpack config) adds plugins before the .babelrc gets executed.

Here is what I ended up with, not really that difficult at all. Would be great if it could be documented somewhere - maybe it would help others.

module.exports = (config, options) => {
  const babelConfig = require("@nrwl/react/plugins/babel")(config)

  const babelRulePluginOptions = babelConfig.module.rules.find(r => r.loader === "babel-loader").options.plugins

  // Add styled-component plugin, the plugin must come before all others.
  const styledPlugin = [
    "babel-plugin-styled-components",
    {
      pure: true
    }
  ]
  babelRulePluginOptions.splice(0, 0, styledPlugin)

  return babelConfig
}

All confirmed as working!

[jaysoo]

We’ll look into this one soon. I think we should be able to get .babelrc support working since that is a pretty common way to override configuration.