className always empty

[rkmax]

Always I'm getting class Name empty so the layout doesn't work. any advice?. please ask me for further info is need, because I'm new with React I dont know which info share

I'm very curious because I have a simple component. I want the text Hello from here appear in the left and the form on right side

let layout = {
  xs: 6,
  sm: 6,
  md: 6,
  lg: 6
}

<Grid fluid>
  <Row>
    <Col {...layout}>
      <p>Hello from here</p>
    </Col>
    <Col {...layout}>
      <Paper>
        <Row>
          <TextField
            hintText='Name'
            floatingLabelText='Name'/>
        </Row>

        <Row>
          <TextField
            hintText='Email'
            floatingLabelText='Email'
            type='email'/>
        </Row>
        <Row>
          <TextField
            hintText='Password'
            floatingLabelText='Password'
            type='password'/>
        </Row>
        <Row>
          <TextField
            hintText='Re Enter Password'
            floatingLabelText='Re Enter Password'
            type='password'/>
        </Row>
        <Row>
          <a href='#'>Already have an account? Sign in</a>
        </Row>
        <Row>
          <RaisedButton label='Submit' primary/>
        </Row>
      </Paper>
    </Col>
  </Row>
</Grid>

[leandroz]

I have the same issue and is related on how webpack is treating flexboxgrid. It should transform it into a css module.

[LCTL]

After update version form 0.9.4 to 0.9.5, all class name always empty.

[JasonWeiseUnreal]

I am using Meteor with React and I have the same issue, classnames are always empty since installing 0.9.5.

[e-karma]

@roylee0704 After fighting through webpack configs for 3 hours, I just now encountered... the same issue. :(

[leandroz]

The problem is that this library depends on treating flexboxgrid dependency as a css-module. So you need to process it as css-module with webpack.

On Mar 6, 2016, at 8:56 AM, e-karma notifications@github.com wrote:

After fighting through webpack configs for 3 hours, I just now encountered... the same issue. :(

—
Reply to this email directly or view it on GitHub.

[e-karma]

@leandroz Thanks for the heads up!! Do you know the webpack code that works?

[bhoomit]

Same issue with me.

var _flexboxgrid = require('flexboxgrid');
console.log(_flexboxgrid);

Output:
Object {}

prints empty object

[leandroz]

I am using https://github.com/davezuko/react-redux-starter-kit
Check the webpack config file, there is a place to add third party modules that need to be treated as css module.
Hope that helps!

Leandro Zubrezki

On Mar 6, 2016, at 4:03 PM, Bhoomit notifications@github.com wrote:

Same issue with me.

var _flexboxgrid = require('flexboxgrid');
console.log(_flexboxgrid);

Output:
Object {}

prints empty object

—
Reply to this email directly or view it on GitHub.

[Marmelatze]

Thanks @leandroz for pointing this out.

Adding ?modules to the loader fixed it for me:

{
    test: /\.css/,
    loader: "style!css?modules"
},

[mmoyles87]

Do you know how I would add that using meteor webpack and their webpack.json file? Is webpack.json only a thing with the meteor webpack page or is that a pretty standard thing? Most examples I have seen use a webpack.js. My current webpack.json looks like this, and I can't add that block to my webpack.json file because of the regex.

{ "root": "src", "devServer": { "host": "localhost" }, "css": { "module": true }, "sass": { "includePaths": ["./node_modules"] }, "css": { "includePaths": ["./node_modules"] } }

[roylee0704]

@leandroz and @Marmelatze , thanks for pointing out the solution! Yes you do need to add ?modules to the loader.

Anyway do you guys have any ideas on how to prevent this so that I can add that up in future release?

[rkmax]

there's some way to print to console a warning if it's not processed as a CSS module

[roylee0704]

@rkmax that's awesome! Do you mind helping on this? :)

[rkmax]

I'm pretty new with webpack but I'll try figure out how to do it

[roylee0704]

Sure @rkmax, I really appreciate that. 👍

Meanwhile, I have added a note to reference this issue on README, thanks @silvenon for the help by adding the section to README: basic-webpack-configuration. That's really nice. :)

I hope that's sufficient, but if it is still confusing, let me know and I will try to enhance it.

[bhoomit]

@leandroz I was using the same boilerplate. And made it work the same way you did. Thanks anyway :)

[anhhh11]

Don't know why but code on basic-webpack-configuration not work :| , I must use the following:

{test: /\.css$/, loader: 'style!css?modules', include: path.resolve(__dirname, 'node_modules', 'flexboxgrid')},
{test: /\.css$/, loader: 'style!css', exclude: path.resolve(__dirname, 'node_modules', 'flexboxgrid')},

[gazzer82]

Ok, i really can't get this to work, here is my loaders config, seems to be correct to me, but i have the same issue with no class names?

module: {
    loaders:[
      //JSX
      {
        test: /\.jsx$/,
        exclude: /(node_modules)/,
        loaders: ['react-hot','babel']
      },
      //JS
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loaders: ['react-hot','babel']
      },
      //Load flexgrid
      {
        test: /(\.scss|\.css)$/,
        loader: 'style!css?modules!sass',
        include: __dirname + './node_modules/react-flexbox-grid',
        exclude: /(node_modules)/
      },
      //SCSS
      {
        test: /\.scss$/,
        exclude: /(node_modules)/,
        loader: 'style!css!sass'
      },
      //CSS
      { test: /\.css$/,
        loader: "style-loader!css-loader",
        exclude: __dirname + './node_modules/react-flexbox-grid',
      },
      //Fonts
      {
      test: /\.(woff|woff2)$/,
        loader: "url?limit=10000&mimetype=application/font-woff"
      },
      {
      test: /\.ttf$/,
        loader: "url?limit=10000&mimetype=application/octet-stream"
      },
      {
      test: /\.eot$/,
        loader: "file"
      },
      //Images
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loader: "url?limit=25000"
      }

    ]
  },

[roylee0704]

Good day @gazzer82! :)

Are you using any specific boilerplate? Do you mind to paste the entire webpack config here? :)

[silvenon]

@gazzer82 you should create paths using the path module:

• __dirname + './foo' = /Users/user/project./foo ❌
• path.join(__dirname, 'foo') = /Users/user/project/foo ✅

I haven't looked at the rest very closely, so let me know if that fixes the problem.

[silvenon]

@gazzer82 can you please apply the updates in #27? You should now target flexboxgrid in your configuration, not react-flexbox-grid.

[TomPeak]

I am using the react incubator, could it work?, no webpack…
Classes are empty.

[superchangme]

This is my css module loader config
webpackConfig.module.loaders.push({
test: /.css$/,
loader: 'style!css?modules',
include: /flexboxgrid/
})
Clever Boy you will get it!