title: Why does isomorphic-style-loader throw a TypeError: Cannot read property 'apply' of undefined when being used in unison with CSS-Modules
body: <p>I'm currently trying to render the application on the server, which works for the HTML and JS, but found that my styles (.less | .scss) would not load. I did some research and figured, not sure, that I was missing the <code>isomorphic-style-loader</code> in my Webpack configuration based on others running into the same issues. I set it up, at least how I understood it, but am now finding that when running the application I receive the following error:</p>
  
  <p><code>TypeError: Cannot read property 'apply' of undefined at WithStyles.componentWillMount</code></p>
  
  <p>I'm somewhat new to the whole React / Express thing but have been trying to follow along with tutorials and learning as I go, if anything seems out of place, please excuse me. I am hoping to see if anybody can explain what exactly causes this error, and provide me with some idea of what I could follow to resolve this error. Below is some example code that resembles the one I am having issues with, if it helps in any way.</p>
  
  <p>(For reference I was following Tyler McGinnis React Router Server Rendering tutorial and tried to expand upon it to add styling - <a href="https://tylermcginnis.com/react-router-server-rendering/" rel="nofollow noreferrer">Link Here</a>)</p>
  
  <p>Thanks beforehand for any explanation provided as to what may be causing this error.</p>
  
  <hr>
  
  <h3>webpack.config.babel.js</h3>
  
  <pre><code>import path from 'path'
  import webpack from 'webpack'
  import nodeExternals from 'webpack-node-externals'
  
  const paths = {
    browser: path.join(__dirname, './src/browser'),
    server: path.join(__dirname, './src/server'),
    build: path.resolve(__dirname, 'public')
  }
  
  let browserConfig = {
    entry: `${paths.browser}/index.js`,
    output: {
      path: paths.build,
      filename: 'bundle.js',
      publicPath: '/'
    },
    module: {
      rules: [
        {
          test: /\.s?(a|c)ss$/,
          use: [
            'isomorphic-style-loader',
            {
              loader: 'css-loader',
              options: {
                modules: true,
                importLoaders: 1,
                localIdentName: '[name]__[local]___[hash:base64:5]',
                sourceMap: true
              }
            },
            'sass-loader',
            'postcss-loader'
          ]
        }, {
          test: /\.less$/,
          use: [
            'isomorphic-style-loader',
            {
              loader: 'css-loader',
              options: {
                modules: true,
                importLoaders: 1,
                localIdentName: '[name]__[local]___[hash:base64:5]',
                sourceMap: true
              }
            },
            {
              loader: 'less-loader',
              options: {
                javascriptEnabled: true
              }
            },
            'postcss-loader'
          ]
        }, {
          test: /\.jsx?$/,
          loader: 'babel-loader',
          exclude: /node_modules/
        }
      ]
    },
    plugins: [
      new webpack.DefinePlugin({
        __isBrowser__: true
      })
    ],
    resolve: {
      extensions: ['.js', '.jsx', '.json', '.css', '.scss', '.sass', '.less']
    }
  }
  
  let serverConfig = {
    entry: `${paths.server}/index.js`,
    target: 'node',
    externals: [nodeExternals()],
    output: {
      path: __dirname,
      filename: 'server.js',
      publicPath: '/'
    },
    module: {
      rules: [
        {
          test: /\.s?(a|c)ss$/,
          use: [
            'isomorphic-style-loader',
            {
              loader: 'css-loader',
              options: {
                modules: true,
                importLoaders: 1,
                localIdentName: '[name]__[local]___[hash:base64:5]',
                sourceMap: true
              }
            },
            'sass-loader',
            'postcss-loader'
          ]
        }, {
          test: /\.less$/,
          use: [
            'isomorphic-style-loader',
            {
              loader: 'css-loader',
              options: {
                modules: true,
                importLoaders: 1,
                localIdentName: '[name]__[local]___[hash:base64:5]',
                sourceMap: true
              }
            },
            {
              loader: 'less-loader',
              options: {
                javascriptEnabled: true
              }
            },
            'postcss-loader'
          ]
        }, {
          test: /\.jsx?$/,
          loader: 'babel-loader',
          exclude: /node_modules/
        }
      ]
    },
    plugins: [
      new webpack.DefinePlugin({
        __isBrowser__: false
      })
    ],
    resolve: {
      extensions: ['.js', '.jsx', '.json', '.css', '.scss', '.sass', '.less']
    }
  }
  
  module.exports = [browserConfig, serverConfig]
  </code></pre>
  
  <hr>
  
  <h3>server.js</h3>
  
  <pre><code>import express from "express"
  import cors from "cors"
  import React from "react"
  import bodyParser from 'body-parser'
  import serialize from "serialize-javascript"
  import { renderToString } from "react-dom/server"
  import { StaticRouter, matchPath } from "react-router-dom"
  import App from '../shared/App'
  import routes from '../shared/routes'
  
  const app = express()
  const port = process.env.PORT || 3000
  
  app.use(cors())
  app.use(bodyParser.json()) // support json encoded bodies
  app.use(bodyParser.urlencoded({extended: true})) // support encoded bodies
  app.use(express.static("public"))
  
  app.get("*", (req, res, next) =&gt; {
    const activeRoute = routes.find((route) =&gt; matchPath(req.url, route)) || {}
  
    const promise = activeRoute.fetchInitialData
      ? activeRoute.fetchInitialData(req.path)
      : Promise.resolve()
  
    promise.then((data) =&gt; {
      const css = new Set()
      const context = { data, insertCss: (...styles) =&gt; styles.forEach(style =&gt; css.add(style._getCss())) }
      const markup = renderToString(
        &lt;StaticRouter location={req.url} context={context}&gt;
            &lt;App /&gt;
        &lt;/StaticRouter&gt;
      )
  
      res.send(`
        &lt;!DOCTYPE html&gt;
        &lt;html&gt;
          &lt;head&gt;
            &lt;title&gt;React on the Server!&lt;/title&gt;
            &lt;script src="/bundle.js" defer&gt;&lt;/script&gt;
            &lt;script&gt;window.__INITIAL_DATA__ = ${serialize(data)}&lt;/script&gt;
          &lt;/head&gt;
          &lt;body&gt;
            &lt;div id="app"&gt;${markup}&lt;/div&gt;
          &lt;/body&gt;
        &lt;/html&gt;
      `)
    }).catch(next)
  })
  
  app.listen(port, () =&gt; console.log(`Server is listening on port: ${port}`))
  </code></pre>
  
  <hr>
  
  <h3>routes.js</h3>
  
  <pre><code>import AboutMain from './components/About/AboutMain'
  
  const routes =  [
    {
      path: '/about',
      component: AboutMain
    }
  ]
  
  export default routes
  </code></pre>
  
  <hr>
  
  <h3>browser.js</h3>
  
  <pre><code>// Import the neccessary modules for use in file
  import React from 'react' // Main React module
  import { hydrate } from 'react-dom' // render alternative for server rendering
  import App from '../shared/App'
  import { BrowserRouter } from 'react-router-dom' // React Router component for client side routing
  import '../shared/components/global.scss' // Only has general rules, which do get applied
  
  hydrate(
    &lt;BrowserRouter&gt;
      &lt;App /&gt;
    &lt;/BrowserRouter&gt;,
    document.getElementById('app')
  )
  </code></pre>
  
  <hr>
  
  <h3>App.js</h3>
  
  <pre><code>import React, { Component } from 'react'
  import routes from './routes'
  import { Route, Link, Redirect, Switch } from 'react-router-dom'
  
  class App extends Component {
    render() {
      return (
        &lt;div&gt;    
          &lt;Switch&gt;
            {routes.map(({ path, exact, component: Component, ...rest }) =&gt; (
              &lt;Route key={path} path={path} exact={exact} render={(props) =&gt; (
                &lt;Component {...props} {...rest} /&gt;
              )} /&gt;
            ))}
            &lt;Route render={(props) =&gt; &lt;NoMatch {...props} /&gt; } /&gt;
          &lt;/Switch&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default App
  </code></pre>
  
  <hr>
  
  <h3>AboutMain.js</h3>
  
  <pre><code>// Importing Required Modules
  import React, {Component, Fragment} from 'react' // Importing React, Component, Fragment from "react"
  import withStyles from 'isomorphic-style-loader/lib/withStyles';
  import s from './about.scss'
  
  class AboutMain extends Component {
    state = {
      phrase: 'We Made It!'
    }
  
    render() {
      return (
        &lt;Fragment&gt;
          &lt;header className={s.banner}&gt;
            &lt;h1 className={s.heading}&gt;{this.state.phrase}&lt;/h1&gt;
          &lt;/header&gt;
        &lt;/Fragment&gt;
      )
    }
  }
  
  export default withStyles(s)(AboutMain) &lt;-- Error Seems to occur here, at least I think.
  </code></pre>
  
  <hr>
  
  <h3>about.scss</h3>
  
  <pre><code>.banner {
    margin: 0 auto;
    padding: 15px;
    border: 2px solid #000;
  }
  
  .heading {
    text-transform: uppercase;
    text-decoration: underline;
  }
  </code></pre>