Problems with NextJS

[ghost]

Due to some reasons the compiled components of Pattenfly-React do not include related CSS. This causes problems with using this components library with some SSR frameworks like NextJS.

According to NextJS docs this problem must be solved by a maintainer:

Actual behavior:
Initial installation of patternfly-react in NextJS app causes CSS Modules Imported by a Dependency error while running next dev and opening localhost:3000. Such behavior is OS independent. To solve this issue (by a kludge solution) you must install webpack@4 as devDependency and use custom next.config.js:

const path = require('path');
const withCss = require('@zeit/next-css');

const BG_IMAGES_DIRNAME = 'bgimages';

const withTM = require('next-transpile-modules')(
  [
    '@patternfly/react-core',
    '@patternfly/react-icons',
    '@patternfly/react-styles',
    '@patternfly/react-table',
    '@patternfly/react-tokens',
  ],
  { debug: false }
);

module.exports = withCss(
  withTM({
    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
      config.module.rules.push({
        test: /\.(svg|ttf|eot|woff|woff2)$/,
        include: [
          path.resolve(__dirname, 'node_modules/patternfly/dist/fonts'),
          path.resolve(
            __dirname,
            'node_modules/@patternfly/react-core/dist/styles/assets/fonts'
          ),
          path.resolve(
            __dirname,
            'node_modules/@patternfly/react-core/dist/styles/assets/pficon'
          ),
          path.resolve(
            __dirname,
            'node_modules/@patternfly/patternfly/assets/fonts'
          ),
          path.resolve(
            __dirname,
            'node_modules/@patternfly/patternfly/assets/pficon'
          ),
          path.resolve(__dirname, 'node_modules/react-multi-carousel/lib'),
        ],
        use: {
          loader: 'file-loader',
          options: {
            limit: 5000,
            publicPath: '/_next/static/fonts/',
            outputPath: 'static/fonts/',
            name: '[name].[ext]',
            esModule: false,
          },
        },
      });

      config.module.rules.push({
        test: /\.svg$/,
        include: (input) => input.indexOf('background-filter.svg') > 1,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 5000,
              publicPath: '/_next/static/svgs/',
              outputPath: 'static/svgs/',
              name: '[name].[ext]',
            },
          },
        ],
      });

      config.module.rules.push({
        test: /\.svg$/,
        include: (input) => input.indexOf(BG_IMAGES_DIRNAME) > -1,
        use: {
          loader: 'svg-url-loader',
          options: {},
        },
      });

      config.module.rules.push({
        test: /\.svg$/,
        include: (input) =>
          input.indexOf(BG_IMAGES_DIRNAME) === -1 &&
          input.indexOf('fonts') === -1 &&
          input.indexOf('background-filter') === -1 &&
          input.indexOf('pficon') === -1,
        use: {
          loader: 'raw-loader',
          options: {},
        },
      });

      config.module.rules.push({
        test: /\.(jpg|jpeg|png|gif)$/i,
        include: [
          path.resolve(__dirname, 'src'),
          path.resolve(__dirname, 'node_modules/patternfly'),
          path.resolve(
            __dirname,
            'node_modules/@patternfly/patternfly/assets/images'
          ),
          path.resolve(
            __dirname,
            'node_modules/@patternfly/react-styles/css/assets/images'
          ),
          path.resolve(
            __dirname,
            'node_modules/@patternfly/react-core/dist/styles/assets/images'
          ),
          path.resolve(
            __dirname,
            'node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css/assets/images'
          ),
          path.resolve(
            __dirname,
            'node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css/assets/images'
          ),
          path.resolve(
            __dirname,
            'node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css/assets/images'
          ),
        ],
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 5000,
              publicPath: '/_next/static/images/',
              outputPath: 'static/images/',
              name: '[name].[ext]',
            },
          },
        ],
      });

      return config;
    },
  })
);

Unfortunately the performance with custom next.config.js in development is very poor. In this case, as I understand it, the node process starts rebuilding the whole patternfly library with current project on every render/rerender which causes high CPU and RAM usage:

This time around 40-60% CPU load and 1-1.5 GB of RAM are required. The first compilation may take about 4 minutes.

A couple of times the node process even crashed with GC report. I believe that this behavior not suits for development. This happens only in development mode: in production mode after next build there are no such problems.

I know that this issue duplicates #4125, but it closed. There were no reply from NextJS devs as well in vercel/next.js#20916.

Please give a reply about this issue.

[redallen]

Duplicate of patternfly/patternfly#4035. Here's some bundlers that support importing CSS, and Next.js can support it since they use Webpack under the hood, but they choose not to support it.

It would be a breaking change to support Next.js since the default way we support importing styles is importing only what you need via import './component.css';. We chose that to produce lightweight bundles since patternfly.css weighs in at nearly 1MB but most consumers don't use all of it.