Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SyntaxError when importing flexboxgrid.css #28

Closed
pbojinov opened this issue Mar 17, 2016 · 53 comments
Closed

SyntaxError when importing flexboxgrid.css #28

pbojinov opened this issue Mar 17, 2016 · 53 comments

Comments

@pbojinov
Copy link

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
Copy link
Collaborator

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

@pbojinov
Copy link
Author

@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
Copy link
Owner

contrib to doc #26

@silvenon
Copy link
Collaborator

@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
Copy link
Author

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

@silvenon
Copy link
Collaborator

Great, closing this then 👍

@pbojinov
Copy link
Author

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
Copy link
Collaborator

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
Copy link

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
Copy link
Collaborator

@shiroganee which Node version are you using?

@shiroganee
Copy link

@silvenon 5.8 right now.

@silvenon
Copy link
Collaborator

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
Copy link

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
Copy link
Collaborator

@petermikitsh are you using some other module bundler?

@petermikitsh
Copy link

@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
Copy link
Collaborator

@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
Copy link

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
Copy link

haocse commented Apr 2, 2016

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

@silvenon
Copy link
Collaborator

silvenon commented Apr 3, 2016

@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
Copy link

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
Copy link
Collaborator

silvenon commented Apr 5, 2016

@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
Copy link

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
Copy link
Collaborator

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

@silvenon
Copy link
Collaborator

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
Copy link

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

@silvenon
Copy link
Collaborator

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

@rsteckler
Copy link

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

@SpainTrain
Copy link

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

@ghost
Copy link

ghost commented Oct 18, 2016

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
Copy link

@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
Copy link

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

@ranneyd
Copy link

ranneyd commented Mar 4, 2017

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
Copy link
Collaborator

silvenon commented Mar 4, 2017

@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
Copy link

ghost commented Mar 4, 2017

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
Copy link
Collaborator

silvenon commented Mar 5, 2017

@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
Copy link

palavrov commented May 8, 2017

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

@danny-andrews
Copy link
Collaborator

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
Copy link

ghost commented Jun 7, 2017

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
Copy link
Collaborator

danny-andrews commented Jun 7, 2017

To build your own files, not your dependencies.

@slavab89
Copy link

slavab89 commented Jul 16, 2017

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
Copy link
Owner

It should be fixed under v1.1.4 now

@mschipperheyn
Copy link

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

@danny-andrews
Copy link
Collaborator

@mschipperheyn Which version are you using?

@danny-andrews
Copy link
Collaborator

danny-andrews commented Aug 29, 2017

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
Copy link

MM3y3r commented Aug 30, 2017

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

@danny-andrews
Copy link
Collaborator

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

@stephane-r
Copy link

Same error on Create React App :(

@kotevcode
Copy link

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
Copy link

axeen commented Nov 21, 2019

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']
})));

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests