How to prevent isomorphic-style-loader from throwing css syntax error

Question

I am having trouble getting the webpack 'isomorphic-style-loader' to correctly parse my css module from a react component. Everything runs fine with webpack, but when i try to load the react component on the server i get the following error:

> SyntaxError: /Users/username/projects/company/react-    storefront/assets/js/views/components/`enter code     here`PrimaryHeader/PrimaryHeader.css: Unexpected token (1:0)
.root {
    padding-top: 27px;
    position: relative;
}

my webpack config is as follows:

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var SailsAssetCopier = require('../webpackPlugins/SailsAssetCopier');

const AUTOPREFIXER_BROWSERS = [
    'Android 2.3',
    'Android >= 4',
    'Chrome >= 35',
    'Firefox >= 31',
    'Explorer >= 9',
    'iOS >= 7',
    'Opera >= 12',
    'Safari >= 7.1',
];
module.exports.webpack = {
options: {
    devtool: ['source-map'],
    entry: [
        './assets/js/app.js',
    ],
    output: {
        path: path.resolve(__dirname, '../.tmp/public/js'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
        // requires "npm install --save-dev babel-loader"
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                include: [
                    path.resolve(__dirname, '../assets'),
                ],
                query: {
                    // https://github.com/babel/babel-loader#options
                    cacheDirectory: false,

                    // https://babeljs.io/docs/usage/options/
                    babelrc: false,
                    presets: [
                        'react',
                        'es2015',
                        'stage-0',
                    ],
                    plugins: [
                        'transform-runtime',
                        [
                            'transform-react-remove-prop-types',
                            'transform-react-constant-elements',
                            'transform-react-inline-elements',
                        ],
                    ],
                },
            },
            { 
                test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?  $/,
                loader: 'url?limit=100000&name=[name].[ext]'
            },
            {
                test: /\.css$/,
                loaders: [
                    'isomorphic-style-loader',
                    `css-loader?${JSON.stringify({
                        sourceMap: true,
                        // CSS Modules https://github.com/css-modules/css-modules
                        modules: true,
                        localIdentName:  '[name]_[local]_[hash:base64:3]',
                        // CSS Nano http://cssnano.co/options/
                        minimize: false,
                    })}`
                ]

            }

        ]
    },
    plugins: [
        //new ExtractTextPlugin("../styles/main.css"),
        new SailsAssetCopier({
            excludes:['.DS_Store','js','styles']
        })
    ]
},
// docs: https://webpack.github.io/docs/node.js-api.html#compiler
watchOptions: {
    aggregateTimeout: 300
}};

my react components as follows (not currently trying to render the css anywhere, just trying to get it to parse!)

import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './PrimaryHeader.css';

const React = require('react');
const Router = require('react-router');
const Link = Router.Link;
const ReactRedux = require("react-redux");
const isServer = !process.browser;
const PrimaryHeader = React.createClass({

    /**
     * - render method
     *
     *
     *
     */
    render: function (){

        return (
            <header className="primary-header js-require">
                <p>some content</p>

            </header>
        );
    }
});
// connect to Redux store

var mapStateToProps = function(state){

    return {
        user: state.user
    };
};

module.exports = isServer ? withStyles(s)(PrimaryHeader) :           ReactRedux.connect(mapStateToProps)(PrimaryHeader);

See here: http://stackoverflow.com/questions/38111259/how-do-you-use-withstyles-isomorphic-style-loader-when-your-classname-has-a-da — Matias Herranz, Jan 19 '17 at 19:38

score 1 · Answer 1 · edited May 23 '17 at 11:46

1

The code between the curly braces in JSX is just JavaScript and s is just an object. i.e., you can access properties of s just like you normally would in JS, even if they contain dashes, spaces or other funny characters.

Specifically, you can write:

<div className={s['some-class']}></div>

Source: How do you use withStyles (isomorphic style loader) when your className has a dash in it?

edited May 23 '17 at 11:46

Community

1
1

answered Jan 19 '17 at 19:43

Matias Herranz

151
1
3

How to prevent isomorphic-style-loader from throwing css syntax error

1 Answers1