From 09a4fadf7978eba97850d27658f002f3cd1ca19a Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Sat, 22 May 2021 17:06:14 +0200 Subject: [PATCH] Fix PatternFly 4 example (#25356) This change fixes the issues with the PatternFly example showing how to use PatternFly 4 in conjunction with Next.js: 1. next-transpile-modules has been updated to 7.2.0, which adds support for Global CSS imports used by PatternFly 4. This eliminates the custom Webpack modification that were necessary previously. 2. All dependencies have been updated to the latest version. 3. Documentation has been updated to include troubleshooting steps. Addresses #20916 --- examples/with-patternfly/README.md | 35 ++++++- examples/with-patternfly/next.config.js | 120 +++--------------------- examples/with-patternfly/package.json | 17 ++-- examples/with-patternfly/pages/index.js | 2 + 4 files changed, 53 insertions(+), 121 deletions(-) diff --git a/examples/with-patternfly/README.md b/examples/with-patternfly/README.md index 71e8116f9fcd6..0315a80073d43 100644 --- a/examples/with-patternfly/README.md +++ b/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) diff --git a/examples/with-patternfly/next.config.js b/examples/with-patternfly/next.config.js index ccecee6149c53..8c1b8a654d2fb 100644 --- a/examples/with-patternfly/next.config.js +++ b/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, + }, +}) diff --git a/examples/with-patternfly/package.json b/examples/with-patternfly/package.json index 993f3a27cae24..e85ed782b8f2c 100644 --- a/examples/with-patternfly/package.json +++ b/examples/with-patternfly/package.json @@ -1,24 +1,19 @@ { "name": "with-patternfly", "author": "Daniel Reinoso ", - "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" } diff --git a/examples/with-patternfly/pages/index.js b/examples/with-patternfly/pages/index.js index 95c10f433044c..01ae15b1500c1 100644 --- a/examples/with-patternfly/pages/index.js +++ b/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:

Step 1

}, @@ -17,6 +18,7 @@ export default function Home() { variant="primary" onClick={() => setIsOpen(true)} style={{ margin: 20 }} + icon={} > Show Wizard