babel-plugin-styled-components: Next.js: `TaggedTemplateExpression` not run when `env`s are defined in .babelrc

I’m seeing something very strange and I don’t know why its happening.

If you have a .babelrc file defined as so:

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

then when you build the app, the TaggedTemplateExpression part of babel-plugin-styled-components is never called. That results in code that looks like this:

var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n  color: red;\n  font-size: 50px;\n'], ['\n  color: red;\n  font-size: 50px;\n']);

var Title = _styledComponents2.default.h1(_templateObject);

rather than the expected:

var Title = _styledComponents2.default.h1.withConfig({
  displayName: 'pages__Title',
  componentId: 'tr8ekl-0'
})(['color:red;font-size:50px;']);

I replicated it using Next.js example with-styled-components.

Could someone verify that they see the same thing?

download that example linked above
change its .babelrc file to the one above
do a npm run build
look at the /.next/dist/pages/index.js file to see if the styled component has a withConfig

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 7
Comments: 23 (2 by maintainers)

Most upvoted comments

@jfhector @joetidee

Looking at the above .babelrc by @zentuit, you would change it from

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

TO:

{
    "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 } ]
    ]
}

So essentially you copy paste that plugins field/prop at the bottom into a prop on dev and prod env.

+97

cyrus-za on Aug 19, 2018

Tried to copy-paste @cyrus-za good answer, but didn’t get it to work due to a missing comma. Also @mxstbr recommend adding the prefix “babel-plugin” before the plugin, so it’s “babel-plugin-styled-components” instead of “styled-components”.

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

+19

arndeash on Aug 19, 2018

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

Thank you, this really helped me in 2020!

+11

PavloPantus on Apr 6, 2020

@philpl @zentuit I’d be really helpful to see how exactly you do this (ie ‘copy the plugin to each env’). Is it something I need to do in .babelrc? An example would really help. Thanks a lot

jfhector on Jan 23, 2018

@zentuit Could you provide an example of where you moved it to?

joetidee on Jan 16, 2018

Still not working with @arndeash’s config.

278kunal on Jul 31, 2019

@yboone Normally you will always create your own custom .babelrc file in the root of your project, same for extending/modifying next.js default behaviour.

Docs for .babelrc from babel & next.js.

.babelrc isn’t generally created for you by npm packages unless the pkg is a cli-tool that is generating a template starter project.

cfnelson on Mar 23, 2018

I think it’s caused by the plugins order of execution i.e. our Babel plugin is run last in this case. It’s probably not sth we can fix. I’m wondering if the property order matters here? XD

Either way, you can just add the plugin to the envs and that should work

kitten on Aug 15, 2017

Follow this steps:

npm install --save-dev babel-plugin-styled-components
create file: .babelrc with content: { "presets": ["next/babel"], "plugins": [["styled-components", { "ssr": true }]] }

marcaum54 on Sep 23, 2020

in case you have a NextJs setup, add .babelrc

.babelrc


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

Delete .Next

install styled-components : npm i babel-plugin-styled-components --save-dev

Greko2017 on Jan 12, 2022

This was bugging me for a long time. I timeboxed solving this many times over months in vain and kept bumping this issue down my priority list. I finally separated some time to solve this - I was following the advice above perfectly. The issue for me was that xstyled was not playing well with nextjs https://github.com/smooth-code/xstyled/issues/138 If you are using xstyled use this

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

mfbx9da4 on Dec 27, 2020

Have same problem But @arndeash’s config doesn’t fit to me, and nothing happens

{
  "env": {
    "development": {
      "plugins": [
        [
          "babel-plugin-styled-components",
          { "ssr": true, "displayName": true, "preprocess": false }
        ]
      ],
      "presets": ["next/babel"]
    },
    "production": {
      "plugins": [
        [
          "babel-plugin-styled-components",
          { "ssr": true, "displayName": true, "preprocess": false }
        ]
      ],
      "presets": ["next/babel"]
    }
  },
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ],
    [
      "babel-plugin-styled-components",
      {
        "ssr": true,
        "displayName": true,
        "fileName": true
      }
    ],
    ["@babel/plugin-proposal-optional-chaining"]
  ]
}

Maybe somebody knows what’s wrong?)

Seresigo on May 19, 2020

this https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js gonna help you… only copy and paste the content of the _document.js file, if you don’t have the _document.js file inside of your project only create it inside of the pages folder.

also you need to paste this in your .babelrc

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

aledgar on Apr 29, 2020

I spent days trying to figure out why this was happening and this post solved it perfectly!

Thanks a lot!

samir-araujo on Apr 17, 2020

@arndeash 's solution worked for me!

ortonomy on Jan 29, 2020

This issue is quite dead, please open a new issue with a reproduction against the latest plugin version if you’re still having problems… thanks.

quantizor on Aug 5, 2019

Does it really need to be added to the general “plugins” section as well?

fabb on Apr 1, 2019

@joetidee you’ll have to copy our plugin to each env unfortunately, to make sure that it keeps its precedence in the execution of all plugins correctly.

kitten on Jan 17, 2018