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