This repository has been archived by the owner on Jun 21, 2023. It is now read-only.
forked from vercel/next.js
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix PatternFly 4 example (vercel#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 vercel#20916
- Loading branch information
1 parent
ee0bc9c
commit 55b00ba
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
55b00baThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why did you switch the patternfly react core version?
"@patternfly/react-core": "^4.50.2",
"@patternfly/react-core": "^4.121.1",