Fix Patternfly example to not use deprecated techniques

[willieseabrook]

What example does this report relate to?

with-patternfly

What version of Next.js are you using?

10.0.4

What version of Node.js are you using?

14.15.4

What browser are you using?

Chrome (all, not browser related)

What operating system are you using?

Linux

How are you deploying your application?

yarn run dev

Describe the Bug

Patternfly is becoming very, very popular, and there's quite a few bug/issue reports scattered around of people fighting to get it to work with Nextjs

Unfortunately, the Patternfly example https://github.com/vercel/next.js/tree/canary/examples/with-patternfly uses deprecated techniques:

• @zeit/next-css which is deprecated and removed from repository. Running this example now gives a warning and will probably soon fail as nextjs development continues
• It uses an old next-transpile-modules version 4.1.0 where latest is 6.0.0
• And while the current example doesn't use it, the only way to get SASS working is with the also deprecated and removed @zeit/next-sass module, which in turn will only work with the deprecated node-sass module when used with Patternfly (See my issue filed to dart-sass at Nextjs + Patternfly react table head + using legacy node-sass works, but using dart-sass fails sass/dart-sass#1186 )

Expected Behavior

Update the Patternfly example to use supported techniques and/or an updated workaround.

I have a repo at https://github.com/willieseabrook/nextjs-with-patternfly which at least uses the latest version of https://github.com/martpie/next-transpile-modules

Note, that solving this for Patternfly will be very valuable for the wider community, as the reason the with-patternfly example is complicated is because Patternfly includes css files in its JS files in the node_modules directory.

In various issues I've found, the Nextjs team has expressly prohibited doing this as a (very very good) design decision, so that will not change.

However, it would be nice to have a standard workaround, using Patternfly as an example, for people who have no other choice - I can't control Patternfly and this breaks quite a few other React modules (hence the various scattered issues on this topic)

Without a new standard workaround, Patternfly would need to be considered expressly incompatible with Nextjs and therefore need to be removed from the examples repository.

To Reproduce

Try to run the example at https://github.com/vercel/next.js/tree/canary/examples/with-patternfly

[willieseabrook]

Also as on approach for an accepted workaround which would be quite simple and self-contained in next.config.js rather than using next-transpile-modules (which does do similar things), see here https://github.com/RedHatInsights/frontend-components/blob/docs/packages/docs/next.config.js#L13

It's from a Patternfly discussion patternfly/patternfly-react#4125 by @Hyperkid123 who appears to be using Nextjs + Patternfly for a Redhat project.

[willieseabrook]

And also pinging @martpie who as the maintainer of next-transpile-modules appears to be an expert in this topic area (and btw Pierre thank you so much for your module!!!)

[martpie]

How can I help? 😇

[willieseabrook]

@martpie I think your module next-transpile-modules is stable and well maintained.

So the part that needs to be worked on is to allow someone to use nextjs + patternfly + css + sass without needing the now deprecated modules next-css and next-sass - e.g using the built in css and sass support.

I spent 3 days in my next.config.js trying to modify and remove the rules the nextjs team have inserted to block css in node_modules and disable css support, but I just couldn't get it to work - I'm not proficient at all in nextjs and an a complete webpack and babel beginner.

I was able to find the rules and change them, but it just didn't seem to work

@timneutkens, @martpie, any updates on this issue? We still have to use the approach mentioned in patternfly/patternfly-react#4125 discussion for Next.js to work with Patternfly.

@willieseabrook, there are some issues with using custom next.config.js to make Next.js work with Patternfly.
Here's my 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;
    },
  })
);

When using it we also needed to install Webpack 4 as dev dependency.
But the performance in development is very poor. In this case, as I understand it, the node process starts rebuilding the whole patternfly library with our 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 will 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.

Also there were no such problems when running the project in production after build. It won't cause any performance issues in production mode but the high CPU and RAM usage and the time it takes to compile everything really pisses me off.