Unexpected token - Webpack 2.2.0 and SCSS - reactjs

Question

For some reason my yarn run dev command is failing due to the following:
SyntaxError: /src/components/home/index.scss:Unexpected token (1:0)
> 1 | .home {
...
I'm using webpack 2.2.0 which is setup like so:
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
include: path.resolve(__dirname, 'src'),
}, {
test: /\.(scss)/,
include: path.resolve(__dirname, 'src'),
use: [
'style-loader',
'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]__[hash:base64:5]',
'sass-loader',
{
loader: 'postcss-loader',
options: {
plugins: function () {
return [
require('autoprefixer')
]
}
}
}
],
include: path.resolve(__dirname, 'src')
}
]
}
And all I'm doing in my index.js component is import s from './styles.scss'. If I remove the import statement and allow the app to boot and then put the import statement back in while the app is running and refresh the page then the styles are present... I find this extremely odd and haven't encountered this issue before...

Answer 1

That thread explains the reason why you are getting this error:
I think I found out why it didn't work on the first place. Though Webpack allows requiring static assets on the client side, babel, which compiles the server code, fails to do so as on the server side Node's require understands only JS files. This means that server side rendering is not possible with the default Webpack and babel.
There are several solutions to solve that issue, more or less complex to put in place.
The easiest one, is to ignore .scss on the server as so:
I added a run-server.js file to the project
require('babel-core/register')({
presets: ['es2015-node5', 'stage-0'],
plugins: ['transform-decorators-legacy'] //was needed to support decorators
})
require.extensions['.scss'] = () => {
return;
}
require.extensions['.css'] = () => {
return;
}
require('./server')
Run that with instead:
"cross-env NODE_ENV=development node ./run-server.js"
Added to your project:
npm install babel-preset-es2015-node5 babel-plugin-transform-decorators-legacy -D