Empty classnames despite installing all the correct dependancies?

[jh97uk]

  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "css-loader": "^0.26.2",
    "npm": "^4.3.0",
    "react-scripts": "0.9.2",
    "style-loader": "^0.13.2"
  },
  "dependencies": {
    "babel-polyfill": "^6.23.0",
    "classnames": "^2.2.5",
    "flexboxgrid": "^6.3.1",
    "material-ui": "^0.17.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-flexbox-grid": "^0.10.2",
    "react-router": "^3.0.2",
    "react-tap-event-plugin": "^2.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Is my package.json, followed all the instructions on the readme. Not getting any errors or warnings, just no class names when I use the elements like so:

import React from 'react';
import ReactDOM from 'react-dom';
import {Grid, Row, Col} from 'react-flexbox-grid'
class Dashboard extends React.Component{
  render(){
    return (
      <Grid>
        <Row>
          <Col xs={6} md={3}>
            1
          </Col>
          <Col xs={6} md={3}>
            1
          </Col>
        </Row>
      </Grid>
    )
  }
}
export default Dashboard;

[silvenon]

Have you configured webpack to use CSS Modules?

We are currently working on making CSS Modules optional, but at the moment they are required.

[jh97uk]

Yup, this is an ex create-react-app by the way:

        exclude: [
          /\.html$/,
          /\.(js|jsx)$/,
          /\.css$/,
          /\.json$/,
          /\.svg$/
        ],
        loader: 'url',
        query: {
          limit: 10000,
          name: 'static/media/[name].[hash:8].[ext]'
        }
      },
      {
        test: /\.css$/,
        loader: 'style!css!postcss',
        include: path.join(__dirname, 'node_modules'), // oops, this also includes flexboxgrid
        exclude: /flexboxgrid/, // so we have to exclude it
      },
}

[silvenon]

That bottom loader only processes files in node_modules which are not flexboxgrid, you also need a loader which will process flexboxgrid with CSS Modules enabled:

{
  test: /\.css$/,
  loader: 'style!css?modules',
  include: /flexboxgrid/,
}

[jh97uk]

Oh god, sorry about that... Its been a long day!

Fixed that and Im now faced with this issue which is a bit odd...

Error in ./~/flexboxgrid/dist/flexboxgrid.css
Module build failed: Unknown word (5:1)

  3 | // load the styles
  4 | var content = require("!!../../css-loader/index.js?importLoaders=1!../../postcss-loader/index.js!./flexboxgrid.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
    | ^
  6 | // add the styles to the DOM
  7 | var update = require("!../../style-loader/addStyles.js")(content, {});
  8 | if(content.locals) module.exports = content.locals;

Thanks!
Edit:

Researching this shows that you have to exclude the css... But doesnt what Ive already got do that?

  {
        test: /\.css$/,
        loader: 'style!css!postcss',
        include: path.join(__dirname, 'node_modules'), // oops, this also includes flexboxgrid
        exclude: /flexboxgrid/, // so we have to exclude it
      },

Apologies for my ignorance, trying to learn the ropes of everything...

[silvenon]

Hm, it's hard to tell. 😕 Is the code in the first snippet yours?

[jh97uk]

Nope, it just appeared when I did yarn start, not sure whats going on... It looks like it might be something to do with css-loader by what people have been saying...

[silvenon]

This is something very specific to your environment, if it turns out to be related to react-flexbox-grid after all, I'll reopen. But let's continue the discussion, do you mind pasting the whole webpack.config.js?

[jh97uk]

http://pastebin.com/2Hs1eAeK

Thanks for still taking an interest... Really driving me crazy!

[silvenon]

Ah, found it. You have another loader:

{
  test: /\.css$/,
  loader: 'style!css?importLoaders=1!postcss'
},

It isn't scoped to anything and therefore applies to all CSS files, messing up the previous loaders. If your CSS source files are in src, you could add something like the following include:

{
  test: /\.css$/,
  loader: 'style!css?importLoaders=1!postcss',
  include: path.join(__dirname, 'src')
},

[jh97uk]

Aha, thanks a lot!

This is the final solution which worked for me:

{
        test: /\.css$/,
        loader: 'style!css!postcss',
        include: path.join(__dirname, '../node_modules'), // oops, this also includes flexboxgrid
        exclude: /flexboxgrid/, // so we have to exclude it
      },
      {
        test: /\.css$/,
        loader: 'style!css?modules',
        include: /flexboxgrid/,
      },
      // "postcss" loader applies autoprefixer to our CSS.
      // "css" loader resolves paths in CSS and adds assets as dependencies.
      // "style" loader turns CSS into JS modules that inject <style> tags.
      // In production, we use a plugin to extract that CSS to a file, but
      // in development "style" loader enables hot editing of CSS.
      {
        test: /\.css$/,
        loader: 'style!css?importLoaders=1!postcss',
        include: path.join(__dirname, '../src')
      },