Error with css module loader configuration

cdock1029 commented 8 years ago

The goal is to allow global styles (.css) and module styles (module.css). I think the configuration is wrong.

$ NODE_ENV=development node

> var config = require('./webpack.config.js');
...
> config.module.loaders
[ ...,
 { test: /[^module]\.css$/,
    loader: 'style-loader!css-loader?modules&localIdentName=[path]     [name]__[local]__[hash:base64:5]!postcss-loader' },
 { test: /\.module\.css$/,
    loader: 'style-loader!css-loader?modules&localIdentName=[path][name]__[local]__[hash:base64:5]!postcss-loader',
    include: [ '/Users/cdock/Desktop/react-yelp-clone/src' ] },
 { test: /\.css$/,
    include: [ '/Users/cdock/Desktop/react-yelp-clone/node_modules' ],
    loader: 'style!css' } ]

We have 3 css loaders here. Should we only have 2? Something like this:

> config.module.loaders
[ ...,
 { test: /[^module]\.css$/,
    loader: 'style-loader!css-loader!postcss-loader' },
 { test: /\.module\.css$/,
    loader: 'style-loader!css-loader?modules&localIdentName=[path][name]__[local]__[hash:base64:5]!postcss-loader',
    include: [ '/Users/cdock/Desktop/react-yelp-clone/src' ] } ]

As it stands, I'm getting en error when loading global semantic-ui css file:

import React from 'react'
import ReactDOM from 'react-dom'
import App from 'containers/App/App'

import 'semantic-ui/dist/semantic.min.css'
import './app.css'

import makeRoutes from './routes'
const routes = makeRoutes()

const mountNode = document.querySelector('#root')

ReactDOM.render(
  <App routes={routes} />,
  mountNode
)

Error output:

ERROR in ./~/css-loader?modules&localIdentName=[path][name]__[local]__[hash:base64:5]!./~/postcss-loader!./~/style-loader!./~/css-loader!./~/semantic-ui/dist/semantic.min.css
/Users/cdock/Desktop/fullstack/node_modules/semantic-ui/dist/semantic.min.css:5:1: Unknown word
var content = require("!!./../../css-loader/index.js!./semantic.min.css");
if(typeof content === 'string') content = [[module.id, content, '']];
^
// add the styles to the DOM

ERROR in ./~/css-loader?modules&localIdentName=[path][name]__[local]__[hash:base64:5]!./~/postcss-loader!./~/style-loader!./~/css-loader!./~/semantic-ui/dist/semantic.min.css
Module build failed: TypeError: Cannot read property 'toString' of undefined
    at new Input (/Users/cdock/Desktop/fullstack/node_modules/postcss/lib/input.js:31:23)
    at parse (/Users/cdock/Desktop/fullstack/node_modules/postcss/lib/parse.js:22:17)
    at new LazyResult (/Users/cdock/Desktop/fullstack/node_modules/postcss/lib/lazy-result.js:61:24)
    at Processor.process (/Users/cdock/Desktop/fullstack/node_modules/postcss/lib/processor.js:34:16)
    at processCss (/Users/cdock/Desktop/fullstack/node_modules/css-loader/lib/processCss.js:188:11)
    at Object.module.exports (/Users/cdock/Desktop/fullstack/node_modules/css-loader/lib/loader.js:24:2)
 @ ./~/semantic-ui/dist/semantic.min.css 4:14-225 13:2-17:4 14:20-231

But this works with fixed webpack.config.js as defined below.

robertfw commented 8 years ago

I fixed this by moving my global style css into the /styles folder, and adding that folder to the include property of the loader used to process styles found in npm

const css = join(src, 'styles');
//...
config.module.loaders.push({
    test: /\.css$/,
    include: [modules, css],
    loader: 'style!css'
});

auser commented 8 years ago

Have included this fix in the generator and in this repo.

Thanks for reporting!

fullstackreact / react-yelp-clone

Error with css module loader configuration #8