Next-plugins: Unexpected token . when loading css from react-flexbox-grid

[crdo]

Following the setup as described in read.me, I am getting:
Unexpected token .
D:\xxxx\xxx\node_modules\flexboxgrid2\flexboxgrid2.css:1
(function (exports, require, module, __filename, __dirname) { .container {
^
what am I doing wrong?

My next.config.js goes as follows:
// next.config.js const withCSS = require("@zeit/next-css"); module.exports = withCSS();

[pencilcheck]

It seems like SSR works where it puts all required css/scss files into one file in /static/styles.css

However in the client, the loader doesn't seems to be configured correctly.

[pencilcheck]

I think this issue is related to the externals from server.

https://github.com/zeit/next-plugins/issues/70

Basically I think what happened was that the server didn't bundle them correctly when compiling, therefore the require/import statement in the library becomes a separate file or something that webpack can't understand (the syntax looks like a normal javascript btw if you notice in the error log).

And by changing the rules of externals, it will start working again.

[jupl]

Getting the same issue. Was expecting to use this module in combination with the normalize.css NPM module and just doing import 'normalize.css', which I have gotten to work in Webpack builds before.

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