SyntaxError when importing flexboxgrid.css

[pbojinov]

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.

/Users/petarbojinov/frostytechnologies/frosty-starter/node_modules/flexboxgrid/dist/flexboxgrid.css:1
(function (exports, require, module, __filename, __dirname) { .container-fluid,
                                                              ^

SyntaxError: Unexpected token .
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:414:25)
    at Module._extensions..js (module.js:442:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/petarbojinov/frostytechnologies/frosty-starter/node_modules/babel-core/node_modules/babel-register/lib/node.js:134:7)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (/Users/petarbojinov/frostytechnologies/frosty-starter/node_modules/react-flexbox-grid/lib/components/Grid.js:13:20)
    at Module._compile (module.js:435:26)
    at Module._extensions..js (module.js:442:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/petarbojinov/frostytechnologies/frosty-starter/node_modules/babel-core/node_modules/babel-register/lib/node.js:134:7)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)

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!

[silvenon]

Update react-flexbox-grid to the latest version and replace your first loader with the first loader in our webpack configuration docs.

[pbojinov]

@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.

[roylee0704]

contrib to doc #26

[silvenon]

@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.

[pbojinov]

@silvenon that makes perfect sense! Good catch, I'll try tweaking the webpack configs to handle that case with some excludes/includes

[silvenon]

Great, closing this then 👍

[pbojinov]

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;
};

[silvenon]

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?

[shiroganee]

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

[silvenon]

@shiroganee which Node version are you using?

[shiroganee]

@silvenon 5.8 right now.

[silvenon]

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.

[petermikitsh]

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.

[silvenon]

@petermikitsh are you using some other module bundler?

[petermikitsh]

@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 requireing a file with a css extension. I assume it's trying to parse it as javascript.

[silvenon]

@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.

[petermikitsh]

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?

[haocse]

Try all cases, still get this error.
Boilerplate: https://github.com/erikras/react-redux-universal-hot-example

[silvenon]

@petermikitsh then you wouldn't be able to load it with CSS Modules 😕 Perhaps we could make a build already compiled with webpack, @roylee0704?

[petermikitsh]

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.

[silvenon]

@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.

[rsteckler]

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'],

[silvenon]

extensions: ['.less','.scss','.css'],

[silvenon]

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.

[rsteckler]

I only appended .css. The others already existed. Here's the original.

[silvenon]

@rsteckler my bad. So it worked for you? There's no issue? I misunderstood your comment then 👍

[rsteckler]

Sorry I wasn't clear. It's now working for me in dev and prod builds :)

[SpainTrain]

I was having this issue and solved it like so in server webpack config:

• use css-loader/locals (or just css/locals) as described here - Use 'Local scope' in isomorphics code webpack-contrib/css-loader#59 (comment)
• ensure that flexboxgrid and react-flexbox-grid are not in webpack externals

[ghost]

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.

[mschipperheyn]

@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.

[mschipperheyn]

In other news, if you use https://github.com/LoicMahieu/react-styled-flexboxgrid instead, you're using styled components, bypassing the whole nightmare

[ranneyd]

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.

[silvenon]

@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.

[ghost]

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.

[silvenon]

@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. 😉

[palavrov]

Got the same error.
My fix was to use https://github.com/knpwrs/css-modules-electron

[danny-andrews]

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.

[ghost]

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?

[danny-andrews]

To build your own files, not your dependencies.

[slavab89]

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.

[roylee0704]

It should be fixed under v1.1.4 now

[mschipperheyn]

I still have the error. Are there any remaining requirements to be satisfied for the fix to work?

[danny-andrews]

@mschipperheyn Which version are you using?

[danny-andrews]

Okay folks, here's what I've gathered from your helpful comments and from experimenting with this myself:

1. If you are using webpack, try css-loader/locals (thanks @SpainTrain and @slavab89!)
2. If you are not using webpack, try css-modules-require-hook
3. If you don't want to deal with CSS-modules at all, use the pre-built build (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!

[MM3y3r]

We also encounter this error. A fix would be appreciated.

[danny-andrews]

@MaximusDesign Have you tried any of the solutions listed above?

[stephane-r]

Same error on Create React App :(

[kotevcode]

I have found a nice solution for server side rendered apps.

So, i was trying to go with @pbojinov answer and implemented require.extensions['.css'] = () => {}; on the server.

It was partially working.. the app was running but the classes were different while loading the app from server / client side.

So for example on the server side i've got class="col-xs-6" while on the client I got class="flexboxgrid2__col-xs-6___3JeAf" .

That wasn't good enough.. I kept looking for a better way to compile the classes on the server and found css-modules-require-hook module which worked like a charm!

require('css-modules-require-hook')({
    generateScopedName: '[name]__[local]___[hash:base64:5]',
    extensions        : ['.scss', '.css'],
    camelCase         : 'dashes',
});

@roylee0704 I think this should be on the doc.

BTW, the framework I'm working with is nextjs, but this will work on any server rendered environment.

[axeen]

I had this issue as well, and after days of trying different solutions without luck, I found a module called next-transpile-modules that solved it!

Like so:

const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');
const withTM = require('next-transpile-modules');

module.exports = withCSS(withSass(withTM({
  transpileModules: ['react-flexbox-grid']
})));