Razzle: extending babel plugins with .babelrc

[howardya]

I am using razzle with styled-components.

Specifically, I am doing the following in server.js

import { ServerStyleSheet } from 'styled-components';

const markup = renderToString(sheet.collectStyles(
  <StaticRouter context={context} location={req.url}>
    <App />
  </StaticRouter>
));

const initialPageStyleRaw = sheet.getStyleTags();
...

it works.

However, the className only matches the first time. If I make only changes, the HMR will break the className.

Warning: Prop `className` did not match. Server: "sc-bxivhb Zxven" Client: "sc-bwzfXH cvWBRj"

Anyone knows how to solve this?

[mplis]

@howardya Have you taken a look at this? https://github.com/styled-components/jest-styled-components

I haven't personally used it, but there are some issues on the styled-components repo talking about this problem and most of them refer to that repo.

[howardya]

thanks @mplis
I have not created any test files, so I think it is not jest related?

I suspect I need to add this the babel plugin, https://www.styled-components.com/docs/tooling#babel-plugin

I created a .babelrc in my razzle root folder and added

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

This created a error in compiling. My webpack does not recognize jsx anymore.

Unexpected token 
<BrowserRouter>

Did I add the babelrc correctly? I suspect the babelrc plugins I wrote overwrite the original babelrc, and not extend it.

[howardya]

Changed title. Is it possible to extend the babel plugins with .babelrc?

[jariz]

Please note that when defining a custom .babelrc, you are overriding razzle's own config.
With the babelrc you posted, you now have babel set up with just the babel-plugin-styled-components plugin, and nothing else.
tldr: you also need to add the razzle babel preset as mentioned in the readme:

{
  "presets": [
    "razzle/babel"
   ],
   "plugins": [
    ["babel-plugin-styled-components", {
      "ssr": true
    }]
  ]
}

[howardya]

@jariz thanks. that is very helpful.

[DevanB]

Hate to dig up an old issue, but I'm trying to add babel-plugin-styled-components and getting an error now. When I remove the babel plugin from .babelrc, everything works fine.

components/PlanBlock.js: Property value expected type of string but got null

.babelrc:

{
  "presets": ["razzle/babel"],
  "plugins": [["babel-plugin-styled-components", { "ssr": true }]]
}

[Snowshield]

@jariz solution didnt work for be probably due newer version of babel or razzle.
That worked for me: https://www.npmjs.com/package/babel-preset-razzle

Also babel-plugin-styled-components plugin doesnt require { "ssr": true }. SSR is enabled by default.

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