Dependency upgrade hell. What is wrong with this CSS loader?

Question

In dependency upgrade hell. Wondering if I can get a tip from anyone.

Been able to hammer everything out but one thing. I’m using CSS Modules with PostCSS on a project. I’m upgrading to Webpack 2 and taking the opportunity to also upgrade all other packages.

The issue I’m having is with one of the CSS processors. Basically any CSS file containing a composes property that loads a class from another file fails.

This is what the Webpack CSS loader looks like:

test: /\.css/,
exclude: /node_modules/,
use: [
    'style-loader',
    {
        loader: 'css-loader',
        options: {
            modules: true,
            localIdentName: '[folder]__[local]___[hash:base64:5]',
            importLoaders: 1
        }
    },
    'postcss-loader'
]

When I try to load a page that uses a stylesheet with one of these composes I see this error in the browser error console:

Dynamic page loading failed TypeError: Cannot read property 'removeChild' of null
    at removeStyleElement (eval at ./node_modules/style-loader/addStyles.js (main.js:9858), <anonymous>:122:25)
    at remove (eval at ./node_modules/style-loader/addStyles.js (main.js:9858), <anonymous>:168:4)
    at Array.updateStyle (eval at ./node_modules/style-loader/addStyles.js (main.js:9858), <anonymous>:180:4)
    at addStylesToDom (eval at ./node_modules/style-loader/addStyles.js (main.js:9858), <anonymous>:69:22)
    at module.exports (eval at ./node_modules/style-loader/addStyles.js (main.js:9858), <anonymous>:37:2)
    at eval (eval at ./app/components/EntryGroup/styles.css (1.chunk.js:29), <anonymous>:7:77)
    at Object../app/components/EntryGroup/styles.css (1.chunk.js:29)
    at __webpack_require__ (main.js:687)
    at fn (main.js:106)
    at eval (eval at ./app/components/EntryGroup/index.js (1.chunk.js:22), <anonymous>:3:70)

style-loader seems to be throwing the error, but I assume it’s because css-loader is letting something through that it shouldn’t. Other than that I’m not sure where to look.

Suggestions?

Answer 1

I'm using css modules and Webpack 2, and it was working fine until I tried to add new webpack.NamedModulesPlugin(). If you're using that, try removing it and seeing if css modules work