Prop `className` did not match between client and server

[hansiemithun]

When configuring react-flexbox-grid along with sass inside Next.js. Facing this challenge.

The project created using latest: create-next-app and I do not have any custom changes in .babelrc

Error

index.js:2178 Warning: Prop className did not match. Server: "col-xs-12 col-md-4 col-lg-2" Client: "col-xs-12flexboxgrid2AdoKE col-md-4flexboxgrid23pbbS col-lg-2flexboxgrid21x6vt"

Sass Configuration Looks like this:

const sassConfig = {
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: '[local]__[name]__[hash:base64:5]'
  }
};

Some more:

module.exports = withPlugins(
  [[withSass, sassConfig], [withCss], [optimizedImages, optimizedImagesConfig]],
  nextConfiguration
);

Tried including and excluding flexboxgrid inside sass configuration above, but still no luck. Any help would be much appreciated

Stackoverflow: https://stackoverflow.com/questions/53905586/react-flexbox-grid-prop-classname-did-not-match-between-client-and-server