Closed pbojinov closed 8 years ago
Update react-flexbox-grid to the latest version and replace your first loader with the first loader in our webpack configuration docs.
@silvenon I did a force update on react-flexbox-grid to the latest npm install react-flexbox-grid@0.9.5
and updated the filter loader to use the first loader from the docs, but still getting the same error.
To reproduce this, here's a clean boilerplate app (https://github.com/pbojinov/universal-react) with react-flexbox-grid
installed and the webpack config configured as per the docs. If you run npm i && npm start
from the project you'll be able to see the error in terminal.
At first I thought it was because style-loader
and css-loader
were missing but those are installed as well.
contrib to doc #26
@pbojinov found it! Webpack itself doesn't cause this error (npm run build
works fine), your server.js
does. It does require('./app')
, which requires react-flexbox-grid
, which ultimately requires flexboxgrid.css
. This causes an error because Node tries to parse flexboxgrid.css
like JS. You should find a different way to achieve whatever that require
does.
@silvenon that makes perfect sense! Good catch, I'll try tweaking the webpack configs to handle that case with some excludes/includes
Great, closing this then :+1:
I found out what the issue was...since the boilerplate is isomorphic, babel tries to parse a CSS file even though proper loaders are defined in the webpack.config.js.
A workaround is the add this to the top of your dev and production webpack configs and it will build fine!
require.extensions['.css'] = () => {
return;
};
Just to be clear, require.extensions
is a Node feature. Wepback is loading this CSS file just fine, but Node isn't (from server.js
), so here you are disabling loading CSS files, which is fine. Do classes print out fine, though?
Hello, got identical error (I'm running isomorphic application as well). You've got the solution maybe @pbojinov ? Cause I tried to use that
require.extensions['.css'] = () => {
return;
};
and it didn't work at all
@shiroganee which Node version are you using?
@silvenon 5.8 right now.
The docs say that the feature has been deprecated, I'm not sure what that means exactly. Maybe @shiroganee is using an older version of Node where this worked?
Try moving the require.extensions
part to server.js
.
Anyone have a solution for those of us who aren't building our server code with webpack? Universal apps don't like when you try and import css files server-side. The require.extensions
workaround isn't fixing the issue for me.
Edit: switched to a similar package (https://github.com/nkt/react-flexgrid), seems to work well in a universal environment.
@petermikitsh are you using some other module bundler?
@silvenon Sorry, let me elaborate further: I bundle my client side assets with webpack. I'm using babel-register for ES6 functionality for my server side code, but otherwise, I just run my app using node server.js
. My app is a universal React-Redux app, so I render the initial page load on the server. When importing this package in one of my React components, the server-side code trips up on require
ing a file with a css
extension. I assume it's trying to parse it as javascript.
@petermikitsh oh, I'm not familiar with that workflow, too bad you can't compile it before running it on the server… Requiring CSS, images etc. is really common when using webpack.
I agree, these files are really common to require, when you are on the client. I bundle my css and js for the client specifically, and then reference them in my initial HTML payload. If this package code didn't explicitly import the css for you, and you had to add a line of code to do it yourself, it would be more flexible for my use case, which is exactly what react-flexgrid has done in their implementation. I'm not particularly opposed to compiling my server-side code, I just don't see much value in doing so, unless its to support use cases like this.
Unfortunately, that would be a breaking change for everyone currently using this package. Perhaps its something to consider for the next major release?
Try all cases, still get this error. Boilerplate: https://github.com/erikras/react-redux-universal-hot-example
@petermikitsh then you wouldn't be able to load it with CSS Modules :confused: Perhaps we could make a build already compiled with webpack, @roylee0704?
The most elegant solution would be to require package users to require the css files themselves. My entry point in my client-side code calls require(...css)
, as outlined in react-flexgrid's documentation, but this client entry point is not used server side.
I don't see why a compiled version wouldn't work. Run babel
in a prepublish
npm hook.
@petermikitsh simply requiring the CSS file yourself won't give you the benefit of CSS Modules. This is already built with Babel, but there should definitely also be a completely compiled build, for people who don't use webpack for any reason.
I'm using react-redux-universal-hot-example as boilerplate and had the same error. They already have webpack-isomorphic-tools installed and configured, but I had to make the following change on line 65 of /webpack/webpack-isomorphic-tools.js:
extensions: ['less','scss','css'],
extensions: ['.less','.scss','.css'],
Also, you need other extensions as well. This will overwrite the existing ones, not append to them. You need to add back .js
, webpack.js
and whatever the default ones where.
I only appended .css. The others already existed. Here's the original.
@rsteckler my bad. So it worked for you? There's no issue? I misunderstood your comment then :+1:
Sorry I wasn't clear. It's now working for me in dev and prod builds :)
I was having this issue and solved it like so in server webpack config:
css-loader/locals
(or just css/locals
) as described here - https://github.com/webpack/css-loader/issues/59#issuecomment-109793167flexboxgrid
and react-flexbox-grid
are not in webpack externals
@rsteckler I'm also using universal hot but it can't get it to work in prod (only in dev) can u share you prod.config and dev.config as well as the webpack isomorphic?
well in some weird magic trick, it works. I removed the webpack loader in the .prod and added
{ test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true') },
which is based on the scss and less configs in prod loader :) works with server side rendered and media queries, in fact after researching all react optional grid / masonry / layout systems this one is the only one that works with SSR (server side rendered) react applications.
@pbojinov's solution got me past the compile failure. then I get some other errors:
Error in ./~/react-flexbox-grid/lib/components/Grid.js
Module not found: Error: Cannot resolve module 'style' in /Users/jhabdas/Developer/project/node_modules/react-flexbox-grid/lib/components
@ ./~/react-flexbox-grid/lib/components/Grid.js 18:19-41
Error in ./~/react-flexbox-grid/lib/components/Col.js
Module not found: Error: Cannot resolve module 'style' in /Users/jhabdas/Developer/project/node_modules/react-flexbox-grid/lib/components
@ ./~/react-flexbox-grid/lib/components/Col.js 14:19-41
Error in ./~/react-flexbox-grid/lib/components/Row.js
Module not found: Error: Cannot resolve module 'style' in /Users/jhabdas/Developer/project/node_modules/react-flexbox-grid/lib/components
@ ./~/react-flexbox-grid/lib/components/Row.js 18:19-41
├── flexboxgrid@6.3.1
├── react-flexbox-grid@0.10.2
I feel so dirty.
EDIT: Opened #70 to tackle this as it's off-topic for this thread.
@jhabdas can you paste your webpack config?
@mrsufgi you too, if you still have issues.
Configs can be found here, @silvenon: https://github.com/jaredpalmer/react-production-starter/tree/master/tools. Thank you kindly for any help you can provide.
@jhabas if you ignore the css as you do in the server config, I assume the the style object, that classNames.js tries to import as an object reference, will be undefined and lead to an error.
In other news, if you use https://github.com/LoicMahieu/react-styled-flexboxgrid instead, you're using styled components, bypassing the whole nightmare
Just a heads up, using browserify results in similar issues. It goes down the chain and tries to import the css as js. You should consider reworking how the css works to be friendlier to other build systems.
@ranneyd the next version (will be releasing soon) will not require CSS Modules. I haven't tried it, but the only thing you will need to make it work with browserify is something like cssify.
I imagine there are some tradeoffs being made to drop CSS modules? FWIW having a lib targeted at CSS modules is why I started using this in the first place. I'd rather have a couple of sharp, purpose made tools than a Swiss Army knife. But that's just me.
@jhabdas we will still support CSS Modules like before, but in case they aren't configured, react-flexbox-grid will fall back to regular classes.
Personally I think that CSS Modules are a bit of an overkill for this library, so now we'll finally have a release which doesn't require them.
Let me know if I misunderstood what you meant. 😉
Got the same error. My fix was to use https://github.com/knpwrs/css-modules-electron
I believe the right solution for this is to distribute a pre-built version of this library. Consumers of a library shouldn't have to add special config options to their build process just to use them. The distributed version of the library should be compatible with its targeted environment.
Consumers of a library shouldn't have to add special config options to their build process just to use them.
Following that logic. Why would one need a build process anyway?
To build your own files, not your dependencies.
This is the solution that i've used and it seems to have worked
For the browser rules:
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader', options: { modules: true } }
],
include: /flexboxgrid/
},
{
test: /\.css$/,
use: "WHATEVER_LOADER",
include: /src/myapp/css,
exclude: /flexboxgrid/
}
For the server rules:
{
test: /\.css$/,
use: { loader: 'css-loader/locals', options: { modules: true } },
include: /flexboxgrid/
},
{
test: /\.css$/,
use: "WHATEVER_LOADER",
include: /src/myapp/css,
exclude: /flexboxgrid/
}
For production, you should probably use the ExtractTextPlugin
on the browser side.
It should be fixed under v1.1.4 now
I still have the error. Are there any remaining requirements to be satisfied for the fix to work?
@mschipperheyn Which version are you using?
Okay folks, here's what I've gathered from your helpful comments and from experimenting with this myself:
dist/react-flexbox-grid.(js|css)
) (v1.1.5+).I'll be updating the docs to reflect this shortly! Let me know if none of these solutions work for your use-case!
We also encounter this error. A fix would be appreciated.
@MaximusDesign Have you tried any of the solutions listed above?
Hey guys, first of all I wanted to say thanks for this project. It looks awesome and I'm excited to use it!
But I'm having some trouble with the integration. When I run the local webpack server I'm getting a syntax error on the imported
flexboxgrid.css
.Here's my webpack config: https://gist.github.com/pbojinov/e87fb7aaf497faf14057 and I started with this boilerplate project: https://github.com/DominicTobias/universal-react
Also made sure to install
classnames & flexboxgrid
. And I tried the alternative webpack config options in the readme. Any suggestions would be great, thanks!