Fix PatternFly 4 example

examples/with-patternfly/README.md

@@ -1,6 +1,6 @@
-# Patternfly example
+# PatternFly 4 example
 
-This example shows how to use Next.js along with [Patterfly](https://www.patternfly.org/v4/) including handling of external styles and assets. This is intended to show the integration of this design system with the Framework.
+This example shows how to use Next.js with the [PatternFly 4](https://www.patternfly.org/v4/) design system.
 
 ## Deploy your own
 
@@ -19,3 +19,34 @@ yarn create next-app --example with-patternfly with-patternfly-app
 ```
 
 Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+
+## Troubleshooting
+
+### Global CSS cannot be imported from within node_modules
+
+PatternFly 4 packages published on [npm](https://npm.org) use Global CSS imports for styling of React components, which is not supported by Next.js.
+To workaround this issue, this example uses [next-transpile-modules](https://www.npmjs.com/package/next-transpile-modules) to transpile the packages during compilation.
+As a consequence, all packages that depend on [@patternfly/react-styles](https://www.npmjs.com/package/@patternfly/react-styles) need to be transpiled as well.
+
+If you receive this error, verify whether all packages that depend on [@patternfly/react-styles](https://www.npmjs.com/package/@patternfly/react-styles) are specified in [next.config.js](next.config.js).
+
+### PatternFly components do not appear to be styled
+
+If your Next.js application compiles successfully, but PatternFly components in your application do not appear to be styled, make sure you have applied the global PatternFly stylesheet in `pages/_app.js`:
+
+```javascript
+// In pages/_app.js
+import App from 'next/app'
+import '@patternfly/react-core/dist/styles/base.css'
+
+...
+```
+
+### All components styles are imported when using a PatternFly component
+
+This is expected behavior in development mode. Tree shaking will remove these imports in production builds.
+
+## Useful Links
+
+- [PatternFly 4 documentation](https://www.patternfly.org/v4/)
+- [next-transpile-modules](https://www.npmjs.com/package/next-transpile-modules)

examples/with-patternfly/next.config.js

@@ -1,108 +1,12 @@
-const path = require('path')
-const withCSS = require('@zeit/next-css')
-
-const withTM = require('next-transpile-modules')(['@patternfly'])
-
-const BG_IMAGES_DIRNAME = 'bgimages'
-
-module.exports = withCSS(
-  withTM({
-    // Webpack config from https://github.com/patternfly/patternfly-react-seed/blob/master/webpack.common.js
-    webpack(config) {
-      config.module.rules.push({
-        test: /\.(svg|ttf|eot|woff|woff2)$/,
-        // only process modules with this loader
-        // if they live under a 'fonts' or 'pficon' directory
-        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'
-          ),
-        ],
-        use: {
-          loader: 'file-loader',
-          options: {
-            // Limit at 50k. larger files emitted into separate files
-            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$/,
-        // only process SVG modules with this loader if they live under a 'bgimages' directory
-        // this is primarily useful when applying a CSS background using an SVG
-        include: (input) => input.indexOf(BG_IMAGES_DIRNAME) > -1,
-        use: {
-          loader: 'svg-url-loader',
-          options: {},
-        },
-      })
-
-      config.module.rules.push({
-        test: /\.svg$/,
-        // only process SVG modules with this loader when they don't live under a 'bgimages',
-        // 'fonts', or 'pficon' directory, those are handled with other loaders
-        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,
-        use: [
-          {
-            loader: 'url-loader',
-            options: {
-              limit: 5000,
-              publicPath: '/_next/static/images/',
-              outputPath: 'static/images/',
-              name: '[name].[ext]',
-            },
-          },
-        ],
-      })
-
-      return config
-    },
-  })
-)
+// PatternFly 4 uses global CSS imports in its distribution files. Therefore,
+// we need to transpile the modules before we can use them.
+const withTM = require('next-transpile-modules')([
+  '@patternfly/react-core',
+  '@patternfly/react-styles',
+])
+
+module.exports = withTM({
+  future: {
+    webpack5: true,
+  },
+})

examples/with-patternfly/package.json

@@ -1,24 +1,19 @@
 {
   "name": "with-patternfly",
   "author": "Daniel Reinoso <[email protected]>",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "scripts": {
     "dev": "next",
     "build": "next build",
     "start": "next start"
   },
   "dependencies": {
-    "@patternfly/react-core": "^4.50.2",
+    "@patternfly/react-core": "^4.121.1",
+    "@patternfly/react-icons": "^4.10.7",
     "next": "latest",
-    "next-transpile-modules": "^4.1.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
-  },
-  "devDependencies": {
-    "@zeit/next-css": "^1.0.1",
-    "file-loader": "^6.1.0",
-    "svg-url-loader": "^6.0.0",
-    "url-loader": "^4.1.0"
+    "next-transpile-modules": "^7.2.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "license": "MIT"
 }

examples/with-patternfly/pages/index.js

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { Button, Wizard } from '@patternfly/react-core'
+import { CogIcon } from '@patternfly/react-icons'
 
 const steps = [
   { name: 'Step 1', component: <p>Step 1</p> },
@@ -17,6 +18,7 @@ export default function Home() {
         variant="primary"
         onClick={() => setIsOpen(true)}
         style={{ margin: 20 }}
+        icon={<CogIcon />}
       >
         Show Wizard
       </Button>