Css-loader: Modules. Different hash on server and client

Created on 24 Apr 2016 · 4Comments · Source: webpack-contrib/css-loader

Trying to use css modules with SSR. My css loader configs:

// client
      test: /\.css$/,
      loader: ExtractTextPlugin.extract(
        'style',
        'css?modules&localIdentName=[hash]&camelCase&importLoaders=1!postcss'
      )

// server
      test: /\.css$/,
      loader: 'css/locals?modules&localIdentName=[hash]&camelCase'

It generates different hashes for server and client. Hence React throw an error:

How a hash generate, based on what? What could I be doing wrong?

UPD
This problem is somehow connected to entry point in webpack server bundle config:

// with this working well
  context: path.join(__dirname, 'server'),
  entry: {
    server: './index.js'
  },

// with this generating wrong hashes
  context: __dirname,
  entry: {
    server: './server/index.js'
  },

Source

osenvosem

Most helpful comment

The path of the resource relative to context is used to create the hash, so this is expected behaviour. If But, if I'm following the code correctly you can pass a context in the loader query, i.e.:

'css?context=../server'

But the easiest thing to do would probably be to make sure the shared files are at the same place relative to both client and server.

alexanderchr on 28 Apr 2016

👍5

All 4 comments

'css?context=../server'

But the easiest thing to do would probably be to make sure the shared files are at the same place relative to both client and server.

alexanderchr on 28 Apr 2016

👍5

If someone is dummy like me and unable to solve it, just pass { context: } to css-loader options for both client and server. (Note: this might break something, but works for me)