Error using react-router component and CSS.

darkadept commented 7 years ago

This is a bit of an odd error. I made a layout component that renders a bit of markup and then this.props.children and added some CSS markup in a separate .css file. I add it to the root route at src/universal/routes/index.js like this:

return {
  component: Layout,
  childRoutes: [
    require('./home').default(store),
  ]
}

When I try to run in dev mode I get this error:

SyntaxError: /home/mike/dev/crater/src/universal/components/Header.css: Unexpected token (1:0)
> 1 | .header {
    | ^
  2 |   background-color: mediumpurple;
  3 | }
  4 | 
    at Parser.pp.raise (/home/mike/dev/crater/node_modules/babylon/lib/parser/location.js:22:13)
    at Parser.pp.unexpected (/home/mike/dev/crater/node_modules/babylon/lib/parser/util.js:91:8)
    at Parser.pp.parseExprAtom (/home/mike/dev/crater/node_modules/babylon/lib/parser/expression.js:512:12)
    at Parser.parseExprAtom (/home/mike/dev/crater/node_modules/babylon/lib/plugins/jsx/index.js:16:22)
    at Parser.pp.parseExprSubscripts (/home/mike/dev/crater/node_modules/babylon/lib/parser/expression.js:270:19)
    at Parser.pp.parseMaybeUnary (/home/mike/dev/crater/node_modules/babylon/lib/parser/expression.js:250:19)
    at Parser.pp.parseExprOps (/home/mike/dev/crater/node_modules/babylon/lib/parser/expression.js:180:19)
    at Parser.pp.parseMaybeConditional (/home/mike/dev/crater/node_modules/babylon/lib/parser/expression.js:157:19)
    at Parser.pp.parseMaybeAssign (/home/mike/dev/crater/node_modules/babylon/lib/parser/expression.js:120:19)
    at Parser.parseMaybeAssign (/home/mike/dev/crater/node_modules/babylon/lib/plugins/flow.js:447:20)

I have a repro here: https://github.com/koretech/crater/tree/router-component-css-error

If you comment out the CSS imports it works fine.

If I get rid of the component: Layout line in the route file and instead wrap what's in App.js with <Layout></Layout> it works fine. You can see the CSS and component working fine here: https://github.com/koretech/crater/tree/router-component-css-alternative.

It almost seems like this is a webpack or babel issue but I can't seem to pin it down.

jedwards1211 commented 7 years ago

Ah, shoot, I was accidentally loading makeRoutes on the server side in dev mode even though they're only meant to be used in prod. In dev mode (which doesn't do full SSR) it doesn't work because there's no babel plugin configured to handle CSS requires.

darkadept commented 7 years ago

Ahh that makes sense. I have to admit I still don't 100% understand the createSSR file. It's still magic to me. :-) I'll need to parse over it line by line one of these days. The PR fixes this issue, thanks!

jedwards1211 commented 7 years ago

No problem, thanks for reporting this!

jedwards1211 commented 7 years ago

createSSR is not too complicated, it parses assets.json which contain paths to the files produced by webpack.config.prod.js. It passes those to <Html>, which creates <script> tags for the assets. The other thing it does it call react-router's match to get all the props for the route requested, and sends those into <Html> as well. The only other tricky thing is it has to do store.dispatch(push(location)) before rendering.

jcoreio / crater

Error using react-router component and CSS. #41