Geek Answers Handbook

How to deal with css import for server side response

this is very similar to Import CSS files into Isomorphic React Components

but the proposed solution offered a conditional instruction that checks if the import is from a server or browser. The problem is that I am using the import object in the component itself, as shown below

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

but style- undefined, because I do not import it to the server. Another method suggested webpack-isomorphic-tools, which requires me to also link the server side code. This approach also forces you to use a web package on the server side, which I am not interested in.

this is basically 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>
    )
  }
}

server side rendering causes an 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)

Anyway, can I handle this problem without using webpack?

+4
1

, https://github.com/michalkvasnicak/babel-plugin-css-modules-transform

package.json

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

+1

More articles:


All Articles