to consolidate working react-flexbox-grid webpack configs (from different boilerplates)

[roylee0704]

to consolidate working react-flexbox-grid webpack configs (from different boilerplates).

List of frameworks to support: (to be updated from time to time)

• react-redux-universal-hot-example
• react-redux-starter-kit
• universal-react

[silvenon]

I'm working on it 😉 I wanted an excuse to learn more about webpack loaders anyway.

[silvenon]

There's a problem with the Babel configuration, user's babel-loader picks up the .babelrc in this repo and tries to compile src/index.js with that configuration. If the user doesn't happen to have babel-preset-es2015-loose installed, it will result in an error.

I'm not sure how to deal with this. Should this configuration strictly be in the webpack configuration, rather than a separate .babelrc? But this way we can't provide a predefined configuration. I wish there was a way to say "use babel-preset-es2015 or babel-preset-es2015-loose"…

[silvenon]

This only happens when you compile react-flexbox-grid with Babel, which you shouldn't do because it's already compiled. I guess that's not that serious of a problem then.

[silvenon]

@roylee0704 what do you mean exactly by "consolidate from different boilerplates"? Just so we're on the same page.

[hellereye]

universal-react
https://github.com/pbojinov/universal-react

clone->npm install->start

it not works fine ,error :

/home/fanfree/dev/test/universal-react/node_modules/flexboxgrid/dist/flexboxgrid.css:1
(function (exports, require, module, __filename, __dirname) { .container-fluid,
^
SyntaxError: Unexpected token .
at Object.exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:513:28)
at Module._extensions..js (module.js:550:10)
at Object.require.extensions.(anonymous function) as .js
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object. (/home/fanfree/dev/test/universal-react/node_modules/react-flexbox-grid/lib/components/Grid.js:13:20)

3ks for you help

[laurenskling]

I have this error too. It's because I use server side rendering of the app. Node doesn't know how to handle css.

[TheIrvingBarajas]

When ever I'm testing files that import components using flexboxgrid, I get the same error @hellereye is getting. Any advice on how to fix the problem?

[Extra-lightwill]

+1 on @hellereye error

[juanda99]

+1, @IrvingAxelB how did you solve it?

[juanda99]

As the error in my case was with jest, this is how i solved it:

jest configuration:

    "transformIgnorePatterns": [
      "/!node_modules\/flexboxgrid/"
    ]

Then I had an error with es2015-loose so I update package files using #105

[danny-andrews]

Seems like an obvious solution to this problem is to run this library through webpack before publishing. Then consumers don't have to worry about setting up their build environment to deal with css-modules.