Updated Installation Docs Available?

[e-karma]

I've been stuck for a couple hours facing these 2 errors a few times each..

Cannot resolve module 'flexboxgrid' 13:19-41
Cannot resolve module 'classnames' 9:18-39

Your 'example' works but Im trying to integrate to an existing project where i'm less inclined to shake the tree for a grid. That said, I really would love to give it a spin!

Its a webpack project working independently and with minimal plugins. I added only the code listed on your README.

Thanks!

[roylee0704]

Oh, that's the two peerDependencies you've got to resolve before using react-flexbox-grid. Sure I should have been making it explicit on README. Thanks for the issue 👍

npm install classnames 
npm install flexboxgrid

Besides, it also has to work hand-in-hand with the setup of webpack. Am not sure if you need info on this integration part? :)

[e-karma]

Hi @roylee0704 , I successfully got the Library to load without error, but thats where the fun stopped. From the other issue, you can see myself as well as a few others need guidance / a fix for the "Empty Classes" we experience. All the DOM generated displays blank as of 0.9.5. Do you know how to fix?
#21

[bhoomit]

@e-karma found any resolution?

[e-karma]

@bhoomit nope, awaiting word from @roylee0704 about a fix. My short-term recommendation would be just learn Flexbox. Its already such an abstraction. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[bhoomit]

@e-karma ohhh, cool. Thanks!

[roylee0704]

Grettings @e-karma , @bhoomit,

It is necessarily to append ?modules on css loader,

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

Does this help solving your problem?

[bhoomit]

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.

I think it works the same way you suggested. Thanks :)

[roylee0704]

@bhoomit Good to hear that! ;)

Anyway could you paste your webpack config here so that in future people could refer & and benefit from it? :) At the same time, I will consolidate those working configs to wiki as well. Opened #26

[bhoomit]

@roylee0704 I'm using this https://github.com/davezuko/react-redux-starter-kit/blob/master/build/webpack.config.js webpack config.

With

Line 153:

const PATHS_TO_TREAT_AS_CSS_MODULES = [
  'react-flexbox-grid'
]

Need to see how it exactly works.

[silvenon]

Put flexboxgrid instead of react-flexbox-grid when you upgrade to latest react-flexbox-grid.

[roylee0704]

contrib to doc: react-redux-starter-kit: #26

[kyen99]

In case it helps anyone, to add react-flexbox-grid to the starter kit exclude /flexboxgrid/ from the existing css and scss loaders and add a new loader for css?modules in webpack.config.js.

webpackConfig.module.loaders.push({
  test: /\.scss$/,
  exclude: /flexboxgrid/,          <---- added
  loaders: [
    'style',
    BASE_CSS_LOADER,
    'postcss',
    'sass?sourceMap'
  ]
})
webpackConfig.module.loaders.push({
  test: /\.css$/,
  exclude: /flexboxgrid/,          <---- added
  loaders: [
    'style',
    BASE_CSS_LOADER,
    'postcss'
  ]
})

/* This section is new */
webpackConfig.module.loaders.push({
  test: /\.css$/,
  include: /flexboxgrid/,
  loader: 'style!css?modules'
})

[silvenon]

It seems to me that this has been resolved. The instructions in our docs explain the CSS Modules setup, which is now optional. These issues arise because some boilerplates have complex webpack setups and sometimes users don't understand them very clearly.

Let me know if this is still an issue.