react-flexbox-grid icon indicating copy to clipboard operation
react-flexbox-grid copied to clipboard

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

Open roylee0704 opened this issue 8 years ago • 11 comments

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

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

roylee0704 avatar Mar 12 '16 09:03 roylee0704

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

silvenon avatar Mar 12 '16 19:03 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 avatar Mar 13 '16 00:03 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 avatar Mar 13 '16 00:03 silvenon

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

silvenon avatar Mar 18 '16 09:03 silvenon

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

hellereye avatar Jun 21 '16 10:06 hellereye

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

laurenskling avatar Aug 29 '16 09:08 laurenskling

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?

TheIrvingBarajas avatar Sep 06 '16 00:09 TheIrvingBarajas

+1 on @hellereye error

Extra-lightwill avatar Dec 09 '16 12:12 Extra-lightwill

+1, @IrvingAxelB how did you solve it?

juanda99 avatar Apr 18 '17 09:04 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

juanda99 avatar Apr 18 '17 10:04 juanda99

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.

danny-andrews avatar Jun 07 '17 05:06 danny-andrews