next.js + Webpack + CSS => SyntaxError: Unexpected token . (dot) = How to fix?

Question

I am new to webpack and next.js. I get the following error, that seems webpack does not understand/parse/load CSS files correctly.

C:\devtmp\workspaces\nextjs\web-admin\node_modules\@patternfly\react-styles\css\components\Backdrop\backdrop.css:4
.pf-c-backdrop {
^
SyntaxError: Unexpected token .

How can I fix this or debug this further? As I am new, I am completely lost. What could be the cause for this problem?

Further Details:

1.) Full Stacktrace:

[ info ]  bundled successfully, waiting for typecheck results ...
[ event ] build page: /test
[ wait ]  compiling ...
[ info ]  bundled successfully, waiting for typecheck results ...
[ ready ] compiled successfully - ready on http://localhost:3000
C:\devtmp\workspaces\nextjs\web-admin\node_modules\@patternfly\react-styles\css\components\Backdrop\backdrop.css:4
.pf-c-backdrop {
^  
SyntaxError: Unexpected token .
    at Module._compile (internal/modules/cjs/loader.js:720:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (C:\devtmp\workspaces\nextjs\web-admin\node_modules\@patternfly\react-styles\css\components\Backdrop\backdrop.js:3:1)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (C:\devtmp\workspaces\nextjs\web-admin\node_modules\@patternfly\react-core\dist\js\components\AboutModal\AboutModal.js:16:40)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)

2.) The File that does the CSS import

file:///C:/devtmp/workspaces/nextjs/web-admin/node_modules/@patternfly/react-styles/css/components/Backdrop/backdrop.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
require("./backdrop.css");
exports.default = {
    backdrop: 'pf-c-backdrop',
    backdropOpen: 'pf-c-backdrop__open',
    modifiers: {}
};

3.) The CSS

file:///C:/devtmp/workspaces/nextjs/web-admin/node_modules/@patternfly/react-styles/css/components/Backdrop/backdrop.css

/* stylelint-enable */
/* stylelint-disable */
/* stylelint-enable */
.pf-c-backdrop {
  --pf-c-backdrop--ZIndex: var(--pf-global--ZIndex--lg);
  --pf-c-backdrop--Color: var(--pf-global--BackgroundColor--dark-transparent-100);
  --pf-c-backdrop--BackdropFilter: blur(10px);
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--pf-c-backdrop--ZIndex);
  width: 100%;
  height: 100%;
  background-color: var(--pf-c-backdrop--Color);
  /* stylelint-disable-next-line */
  -webkit-backdrop-filter: var(--pf-c-backdrop--BackdropFilter);
  backdrop-filter: var(--pf-c-backdrop--BackdropFilter); }

.pf-c-backdrop__open {
  overflow: hidden; }

4.) Extract of next.config.js

module.exports = {

  webpack: (config, options) => {


    config.module.rules.push({
       test: /\.css$/,
        //exclude: ['/node_modules/'],

        include: [
          path.resolve(__dirname, 'pages'),
          path.resolve(__dirname, 'node_modules/patternfly'),
          path.resolve(__dirname, 'node_modules/@patternfly/patternfly'),
          path.resolve(__dirname, 'node_modules/@patternfly/react-styles/css'),
          path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/base.css'),
          path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/esm/@patternfly/patternfly'),
          path.resolve(__dirname, 'node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css'),
          path.resolve(__dirname, 'node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css'),
          path.resolve(__dirname, 'node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css')
        ],

        use: ["style-loader", "css-loader"]
    });
...

Thanks very much!

score 0 · Answer 1 · edited Jun 08 '21 at 06:16

As of the fact that next provide a solution for ssr & client side it has 2 webpack configs, one for each.

Instead of configuring it by yourself it is better to use the official (for now) plugin @zeit/next-css.

// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS()

WARN Edit: 06-07-2021

This package has been deprecated
Author message:

Next.js now has built-in support for CSS: https://nextjs.org/docs/basic-features/built-in-css-support. The built-in support solves many bugs and painpoints that the next-css plugin had.

next.js + Webpack + CSS => SyntaxError: Unexpected token . (dot) = How to fix?

1 Answers1