React-rails: Invariant Violation in Server-Side Rendering after import css styles

[bragovo]

Steps to reproduce

New rails project with webpacker 4.0.0.rc.7 and react-rails from github (master).
Only one component:

import React, { Component } from 'react'

import styles from './App.module.css'

class App extends Component {
  render () {
    return (
      <div className={styles.root}>
         APP
      </div>
    );
  }
}

export default App

In view: <%= react_component('App', {}, { prerender: true }) %>

Expected behavior

Prerender html and working fine in browser.

Actual behavior

Encountered error "#

System configuration

Webpacker version: 4.0.0.rc.7
React-Rails version: master from github
Rails version: 5.2.2
Ruby version: 2.6.0

---

If disable prerender everything working fine. If remove import styles and all styles from className too. I don't need styles for prerender, maybe I must disable it for ssr? But how?

[joshleblanc]

Try turning off webpack-dev-server and reloading the page

[bragovo]

@HorizonShadow didn't help. Error still exists.

[joshleblanc]

Do you have <%= stylesheet_pack_tag 'application' %> in your layout?

[bragovo]

Sure.

[joshleblanc]

The only other thing I can think of is you don't have css-modules enabled in css-loader.

https://github.com/rails/webpacker/blob/master/docs/webpack.md#overriding-loader-options-in-webpack-3-for-css-modules-etc

The invariant violation just means the component failed to compile. You'll see it if you try to run SSR with webpack-dev-server, too, for some reason.

[bragovo]

Without styles SSR working fine with webpack-dev-server =) This is example app https://github.com/bragovo/wrr SSR working fine with WDS until this line commented https://github.com/bragovo/wrr/blob/master/app/javascript/components/App.js#L3
Uncomment it you'll see error.

[bragovo]

It's works fine with webpacker 3.5.5. Problem only with 4.x version.

[dachinat]

I have the same problem.

[dachinat]

Any idea what do do?

[dachinat]

~For now, as a workaround I have used babel-plugin-transform-require-ignore~

~babel.config.js~

~ ... plugins: [ ..., ['babel-plugin-transform-require-ignore', { extensions: ['.scss'] } ], ... ~

~or better, disregard previous code~

---

~For now I use:~

~ try { require('./../scss/main.scss'); } catch(e) { console.error('In server environment'); } ~

[dachinat]

I found a solution:

[bragovo]

@dachinat yes, it's help me too.