Monday, 12 June 2017

babel-register issues when using css modules

So I have a react app that's using css modules for styling. I'm trying to make the app server rendered, however since it wasn't made with this in mind, I'm using import everywhere which is breaking node since import isn't supported there yet, and as a workaround I decided to use babel-register for the time being until I can convert the rest of the codebase to something more production friendly.

The issue I'm facing is that since I'm using css modules along with babel-register, when I import my sass file I'm getting

header.scss: Leading decorators must be attached to a class declaration (1:7)
> 1 | @media all {
    |        ^
  2 |
  3 |   .header {
  4 |     width: 100%;

This seems to make sense, since it looks like babel-register is expecting all imports to be js files, I'm not sure if there are any workarounds with this or if I should take a different approach all together. The end goal is to be able to hit the url, and have the html returned contain the rendered components instead of just the placeholder div my app targets.

Any help is appreciated! Thanks =p



via Colton

No comments:

Post a Comment