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?

Answer 1

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