-
Notifications
You must be signed in to change notification settings - Fork 27.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
1 parent
7035a03
commit 09a4fad
Showing
4 changed files
with
53 additions
and
121 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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, | ||
| }, | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,19 @@ | ||
| { | ||
| "name": "with-patternfly", | ||
| "author": "Daniel Reinoso <danielreinoso1807@gmail.com>", | ||
| "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" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters