How to configure isomorphic-style-loader with webpack and react?

Question

I'm trying to configure webpack with isomorphic-style-loader but I keep getting the following message. (I'm not really in need of using isomorphism so if there is an easier way to do this I would not mind changing). What I need is scoping of scss files.

Failed Context Types: Required context insertCss was not specified in WithStyles(Logo). Check the render method of Header.

Here is my webpack.conf.js:

var path = require('path');

const BROWSERS_TO_PREFIX = [
  'Android 2.3',
  'Android >= 4',
  'Chrome >= 35',
  'Firefox >= 31',
  'Explorer >= 9',
  'iOS >= 7',
  'Opera >= 12',
  'Safari >= 7.1',
];

var config = module.exports = {
   context: path.join(__dirname,'..'),
   entry: './app/frontend/main.js',
   watchOptions : {
       aggregateTimeout: 100,
       poll: true
   }
};

config.output = {
   path: path.join(__dirname, '..', 'app', 'assets', 'javascripts'),
   filename: 'bundle.js',
   publicPath: '/assets',
   devtoolModuleFilenameTemplate: '[resourcePath]',
   devtoolFallbackModuleFilenameTemplate: '[resourcePath]?[hash]'

};

config.module = {
    include: [
      path.resolve(__dirname, '../node_modules/react-routing/src')
    ],
    loaders: [{
        test: /\.js$/,
        loader: 'babel',
        exclude: [
          '/node_modules/',
          '/assets/'
        ],
        query: {
          presets: ['es2015', 'stage-1', 'react']
        }
      },
      {
        test: /\.scss$/,
        loaders: [
          'isomorphic-style-loader',
          'css-loader?modules&localIdentName=[name]_[local]_[hash:base64:3]',
          'postcss-loader?parser=postcss-scss',
        ],
      }
    ]
};


config.resolve = {
    extensions: ['', '.js', '.jsx'],
    modulesDirectory: ['../node_modules']
};

config.postcss = function plugins(bundler) {
  return [
    require('postcss-import')({ addDependencyTo: bundler }),
    require('precss')(),
    require('autoprefixer')({ browsers: BROWSERS_TO_PREFIX }),
  ];
};

Here is my entry-point (main.js):

import Routes from './routes'
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';

const context = {
  insertCss: styles => styles._insertCss()
};

if (['complete', 'loaded', 'interactive'].includes(document.readyState) && document.body) {
  ReactDOM.render(Routes, document.getElementById("main"));
} else {
  document.addEventListener('DOMContentLoaded', () => {
    "use strict";
    ReactDOM.render(Routes, document.getElementById("main"));
  }, false);
}

and here are my routes (routes.js):

import React, { Component, PropTypes } from 'react';
import App from './components/App';
import Login from './components/Login';
import Projects from './components/Projects';
import { Router, Route, IndexRoute, Link, browserHistory } from 'react-router'

let Routes = (
    <div className="container">
      <Router history={browserHistory}>
        <Route path={"/"}>
          <IndexRoute component={App} />
          <Route path={"/projects"} component={Projects} />
          <Route path={"/sign_in"} component={Login} />
        </Route>
      </Router>
    </div>
);

export default Routes;

The file from where the error is thrown (Logo.js):

import ReactRouter, { withRouter, Link } from 'react-router'; import React, { Component, PropTypes } from 'react'; import withStyles from 'isomorphic-style-loader/src/withStyles'; import s from './Logo.scss';

class Logo extends Component {
  render() {
    return (
      <Link to="/" class="image-link" id="logo-container">
        <img src="/images/spotscale-logo.png" id="spotscale-logo"/>
        <img src="/images/beta.png" id="beta-logo" />
      </Link>
    );
  }
}
export default withStyles(s)(Logo)

The css Im trying to include (Logo.scss):

@import '../../globals.scss';

.root {

  #beta-logo {
    width: 70px;
    position: relative;
    top: -34px;
    left: 8px;
  }
  #logo-container {
    padding: 2em 0em;
    display: inline-block;
  }
}

If I change the line withStyles(s)(Logo) the template renders but without the css. Im pretty sure the problem is that I require a method called insertCss in the context of the Logo class but I do not know in what way to get it there or exactly what thaht method should look like. Any help would be appreciated.

Answer 1

The problem was as I suspected that the context did not contain the insertCss method. What I had to do to fix this was to provide context from a central place. I thus created a HOC (React component) to do this and used that component as my root element.

The ContextProvider (HOC):

import s from '../general.scss';
class ContextProvider extends Component {

  static propTypes = {
    context: PropTypes.shape({
      insertCss: PropTypes.func,
    }),
    error: PropTypes.object,
  };

  static childContextTypes = {
    insertCss: PropTypes.func.isRequired,
  };

  getChildContext() {
    const context = this.props.context;
    return {
      insertCss: context.insertCss || emptyFunction,
    };
  }

  componentWillMount() {
    const { insertCss } = this.props.context;
    this.removeCss = insertCss(s);
  }

  componentWillUnmount() {
    this.removeCss();
  }

  render() {
    return <div id="context">{this.props.children}</div>
  }
}
export default ContextProvider;

The modified routing:

import React, { Component, PropTypes } from 'react';
import ContextProvider from './components/ContextProvider'
import IndexPage from './components/IndexPage';
import LoginPage from './components/LoginPage';
import ProjectsPage from './components/ProjectsPage';
import { Router, Route, IndexRoute, Link, browserHistory } from 'react-router'


const context = {
  insertCss: styles => styles._insertCss(),
};

let Routes = (
    <ContextProvider className="container" context={context}>
      <Router history={browserHistory}>
        <Route path={"/"}>
          <IndexRoute component={IndexPage} />
          <Route path={"/projects"} component={ProjectsPage} />
          <Route path={"/sign_in"} component={LoginPage} />
        </Route>
      </Router>
    </ContextProvider>
);

export default Routes;

I hope this helps someone else. Ask if you need more information