Styled-components: [v2] SSR with babel-plugin-styled-components not working as expected

Created on 6 Feb 2017 · 3Comments · Source: styled-components/styled-components

ENV :
node v7.0.0
webpack ^2.2.1
express ^4.14.1
styled-components@next with babel-plugin-styled-components

.babelrc

["styled-components", {
  "transpileTemplateLiterals": true,
  "ssr": true,
  "displayName": false,
  "minify": true
}]

Actual Behavior

yarn run v0.16.1
$ NODE_ENV=server node server 
Listening http://localhost:5050
.sc-bdVaJa {}
.sc-bdVaJa {}

Expected Behavior

.sc-bdVaJa {}.jiiHOZ {width: 100px;height: 100px;background-color: red;}
.sc-bdVaJa {}.jiiHOZ {width: 100px;height: 100px;background-color: red;}

bug

Source

garmjs

All 3 comments

What's the code for the components?

mxstbr on 6 Feb 2017

simple enough @mxstbr

import React from 'react'
import styled from 'styled-components'

const Box = styled.div`
  width: 100px;
  height: 100px;
  background-color: red;
`

const Home = () => {
  return (
    <div>
      <Box />
    </div>
  )
}

export default Home

server

require('babel-register')
const express = require('express')
const React = require('react')
const ReactDOMServer = require('react-dom/server')
const ReactRouter = require('react-router-dom')
const App = require('../src/app').default
const path = require('path')
const Helmet = require('react-helmet')
const styleSheet = require('styled-components/lib/models/StyleSheet')
const compression = require('compression')
const _ = require('lodash')
const StaticRouter = ReactRouter.StaticRouter

const server = express()
server.use(compression())
server.use('/static', express.static(path.join(__dirname, '../public/static')))

styleSheet.reset()
server.use((req, res) => {
  const context = {}
  const body = ReactDOMServer.renderToString(
    React.createElement(StaticRouter, {
      location: req.url,
      context: context
    },
    React.createElement(App))
  )

  console.log(
    styleSheet.getCSS()
  )

  const seo = Helmet.rewind()
  const html = `
      <!doctype html>
      <html ${seo.htmlAttributes.toString()}>
          <head>
              ${seo.title.toString()}
              ${seo.meta.toString()}
              ${seo.link.toString()}
          </head>
          <body>
              <div id='root'>
                <%= body %>
              </div>
              <script src='/static/js/bundle.app.js'></script>
          </body>
      </html>
  `
  const makeTemplate = _.template(html)
  if (context.url) {
    res.writeHead(302, {
      Location: context.url
    })
    res.end()
  } else {
    res.write(makeTemplate({body: body}))
    res.end()
  }
})

const PORT = 5050
server.listen(PORT, () => {
  console.log(`Listening http://localhost:5050`)
})

garmjs on 6 Feb 2017

This is a duplicate of #378, thanks for the detailed bug report! Please track that issue.

mxstbr on 7 Feb 2017

😕1 👍1

Was this page helpful?

0 / 5 - 0 ratings