sass imported styles are null on server, but correct on client

[SimonErich]

Hi,

we are thinking about using your package in one of our projects and we usually really like to use sass with css-modules on every component for styling. We tried to implement it the way, we always do, but there seems to be a problem with the serverside rendering part.

We import the styles with

import * as styles from './STYLEFILE.scss

Then we want to access the different style Classnames like

<div className={styles.ClassName} />

The problem now is, that we end up getting undefined as the className, but if we change something and use hotreload (so it rerenders on the client side only), it works and shows the className correctly. Also console.logging the className gives the correct result.

Here is our example DemoComponent:

import * as React from "react";
import { GetHackerNewsTopStoriesQuery } from "@/graphql";
import * as styles from './DemoListing.scss';

interface IDemoListingPropType {
  data?: GetHackerNewsTopStoriesQuery,
}

export class DemoListing extends React.PureComponent<IDemoListingPropType> {
  public render() {
    const { data } = this.props;
    
    console.log('Check it here: ', styles.List);

    return (
      <ul className={styles.List}>
        {data!.hn!.topStories!.map(story => (
          <li key={story!.id!}>
            <a href={story!.url!} target="_blank">
              {story!.title}
            </a>
          </li>
        ))}
      </ul>
    );
  }
}

And here is our DemoListing.scss file:

.List {
  list-style-type:none;
  margin:0;
  padding:0;

  li {
    display:block;
    border-bottom:1px solid #e7e7e7;
    padding:10px 0;
    font-size:12px;
  }
}

[SimonErich]

Btw: I also get the following error in my console:

react-dom.development.js:507 Warning: Prop `className` did not match. Server: "la undefined" Client: "la List-25PR_C19jEn_aOuzjpgfiz"

[Valerko]

the same here. Any news?