Next.js: TaggedTemplateExpression not run when envs are defined in .babelrc

[zentuit]

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

[kitten]

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

[zentuit]

@philpl : I can confirm that moving the plugin to the envs works. Thanks! Hopefully this will help others who may stumble upon the same thing.

[joetidee]

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

[kitten]

@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.

[jfhector]

@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

[cyrus-za]

@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.

[yboone]

I just created a react app then npm installed the babel-styled-components plugin, but I don't see a .babelrc file. Would I get this file after I run build?

[cfnelson]

@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.

[andyhennie]

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

[cyrus-za]

Thanks, @ahennie for pointing out the syntax error. I've added the 2 missing commas. That's what you get when trying to write code in the GitHub markdown editor :)

Adding babel-plugin in front is not required but I guess it doesn't hurt either

[fabb]

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

[cyrus-za]

Only if you want it to fall back to that general setting when not in a defined environment (in this case production or development).

[278kunal]

Still not working with @arndeash's config.

[quantizor]

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.

[ortonomy]

@arndeash 's solution worked for me!

[PavloPantus]

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

Thank you, this really helped me in 2020!

[samir-araujo]

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

Thanks a lot!

[aledgar]

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

[Seresigo]

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?)

[marcaum54]

Follow this steps:

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

[SGarcia710]

2. { "presets": ["next/babel"], "plugins": [["styled-components", { "ssr": true }]] }

Thank u. This was the solution for me.

[mfbx9da4]

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 styled-components/xstyled#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 }]
  ]
}

[Greko2017]

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