how to deal with css imports for react server-side render

Question

this is quite similar to Importing CSS files in Isomorphic React Components

but the suggested solution proposed a conditional statement which checks if the import is done from the server or browser. The problem is that i use the import object in the component itself like below

<a href="/auth/github" className={style.link}>Sign up with github </a>

but style is undefined because i dont import it on the server. The other method suggested webpack-isomorphic-tools which require me to bundle up the server side code as well. This approach also forces you to use webpack on the server side which i'm not keen on.

basically this is my component

import React from 'react';
import SignUp from './SignUp'
import {Link} from 'react-router'
import {connect} from 'react-redux';
import Modal from 'react-modal'
import style from './app.css'

class App extends React.Component{

  componentDidMount(){
    console.log('mounted')
  }

  render(){
    return (
      <div>
        <p> Hello Kj</p>
          <a href="/auth/github" className={style.link}>Sign up with github </a>
          <a href="/logout" className={style.logout}> Logout </a>
          <Link to ='/project'>Project</Link>
          <button onClick={this.openModal}> Login </button>
        <h1> {this.props.username} </h1>
        <h2> {this.props.email} </h2>
        <div> {this.props.children} </div>
      </div>
    )
  }
}

rendering from the server side throws the error

 [Error] SyntaxError: /home/avernus/Desktop/projects/node-sc-react/client/app.css: Unexpected token (1:0)
> 1 | .link{
    | ^
  2 |   text-decoration: none;
  3 |   border: 1px solid black;
  4 |   background-color: blue;
    at Parser.pp.raise (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/location.js:22:13)
    at Parser.pp.unexpected (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/util.js:89:8)
    at Parser.pp.parseExprAtom (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/expression.js:522:12)
    at Parser.parseExprAtom (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/plugins/jsx/index.js:18:22)
    at Parser.pp.parseExprSubscripts (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/expression.js:277:19)
    at Parser.pp.parseMaybeUnary (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/expression.js:257:19)
    at Parser.pp.parseExprOps (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/expression.js:188:19)
    at Parser.pp.parseMaybeConditional (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/expression.js:165:19)
    at Parser.pp.parseMaybeAssign (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/parser/expression.js:128:19)
    at Parser.parseMaybeAssign (/home/avernus/Desktop/projects/node-sc-react/node_modules/babylon/lib/plugins/flow.js:460:20)

is there anyway i can deal with this issue without using webpack?

You could try to use the webpack extract-text-webpack-plugin when bundling for the client, and then just reference the extracted file on the server. — Davin Tryon, Jul 13 '16 at 12:12
@DavinTryon - i actually do use extract-text-webpack and bundled the css files to a folder which express hosts. but i think the problem is when the server renders the component which has a dependency on app.css, - babel throws the error because it cant parse css. — Jayaram, Jul 13 '16 at 12:14
I you use loader for `css-modules` how do you expect to work on backend without webpack and loaders? Just drop idea of `css-modules` or accept bundling with webpack on backend - it's not that bad. — Everettss, Jul 13 '16 at 13:40
Without processing the server code with Webpack too, this isn't possible. — Ambroos, Jul 13 '16 at 15:13
@Everettss i used css-modules-transform and it seems to work. Do you think its advisable to use this? — Jayaram, Jul 13 '16 at 16:50

score 4 · Answer 1 · answered Jul 13 '16 at 16:48

4

I actually figured out a way using https://github.com/michalkvasnicak/babel-plugin-css-modules-transform

in my package.json file i use

"start": "nodemon server/server.js --exec babel-node --plugins css-modules-transform"

it works for now

answered Jul 13 '16 at 16:48

Jayaram

6,276
12
42
78

So you transpile styles in runtime? Ask yourself if it is good solution. In my opinion generated css-modules static files are better solution. But it's great that you found workaround. – Everettss Jul 13 '16 at 16:54
yea .. you're right .. i tried compiling the entire directory using the plugin `babel server --out-dir serverLib --plugins css-modules-transform` . the compiled version still doesnt work :( – Jayaram Jul 13 '16 at 16:56
Do you have any particular example i can look at which uses webpack on the server side? The ones i've seen so far are a bit too terse and confusing – Jayaram Jul 13 '16 at 16:59
You can look on my answer here http://stackoverflow.com/questions/38264260/webpack-react-es6-transpile-every-template-src-to-dist/38266266#38266266 it contains server side webpack. You can also examine the most popular react-starter-kit also with webpack on backend https://github.com/kriasoft/react-starter-kit/blob/master/tools/webpack.config.js#L260-L303 – Everettss Jul 15 '16 at 15:29

how to deal with css imports for react server-side render

1 Answers1