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 inWithStyles(Logo)
. Check the render method ofHeader
.
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.
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