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?