Font optimization for webpack 5

.github/workflows/build_test_deploy.yml

@@ -107,12 +107,13 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
-      - run: cat package.json | jq '.resolutions.webpack = "^5.0.0-beta.30"' > package.json.tmp && mv package.json.tmp package.json
-      - run: cat package.json | jq '.resolutions.react = "^17.0.0-rc.1"' > package.json.tmp && mv package.json.tmp package.json
-      - run: cat package.json | jq '.resolutions."react-dom" = "^17.0.0-rc.1"' > package.json.tmp && mv package.json.tmp package.json
+      - run: cat packages/next/package.json | jq '.resolutions.webpack = "^5.0.0-beta.30"' > package.json.tmp && mv package.json.tmp packages/next/package.json
+      - run: cat packages/next/package.json | jq '.resolutions.react = "^17.0.0-rc.1"' > package.json.tmp && mv package.json.tmp packages/next/package.json
+      - run: cat packages/next/package.json | jq '.resolutions."react-dom" = "^17.0.0-rc.1"' > package.json.tmp && mv package.json.tmp packages/next/package.json
       - run: yarn install --check-files
       - run: node run-tests.js test/integration/production/test/index.test.js
       - run: node run-tests.js test/integration/basic/test/index.test.js
+      - run: node run-tests.js test/integration/font-optimization/test/index.test.js
       - run: node run-tests.js test/acceptance/*
 
   testFirefox:

packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts

@@ -5,8 +5,6 @@ import {
   getFontDefinitionFromNetwork,
   FontManifest,
 } from '../../../next-server/server/font-utils'
-// @ts-ignore
-import BasicEvaluatedExpression from 'webpack/lib/BasicEvaluatedExpression'
 import postcss from 'postcss'
 import minifier from 'cssnano-simple'
 import { OPTIMIZED_FONT_PROVIDERS } from '../../../next-server/lib/constants'
@@ -16,6 +14,13 @@ const { RawSource } = webpack.sources || sources
 
 const isWebpack5 = parseInt(webpack.version!) === 5
 
+let BasicEvaluatedExpression: any
+if (isWebpack5) {
+  BasicEvaluatedExpression = require('webpack/lib/javascript/BasicEvaluatedExpression')
+} else {
+  BasicEvaluatedExpression = require('webpack/lib/BasicEvaluatedExpression')
+}
+
 async function minifyCss(css: string): Promise<string> {
   return new Promise((resolve) =>
     postcss([
@@ -62,13 +67,20 @@ export class FontStylesheetGatheringPlugin {
               if (parser?.state?.module?.resource.includes('node_modules')) {
                 return
               }
-              return node.name === '__jsx'
-                ? new BasicEvaluatedExpression()
-                    //@ts-ignore
-                    .setRange(node.range)
-                    .setExpression(node)
-                    .setIdentifier('__jsx')
-                : undefined
+              let result
+              if (node.name === '__jsx') {
+                result = new BasicEvaluatedExpression()
+                // @ts-ignore
+                result.setRange(node.range)
+                result.setExpression(node)
+                result.setIdentifier('__jsx')
+
+                // This was added webpack 5.
+                if (isWebpack5) {
+                  result.getMembers = () => []
+                }
+              }
+              return result
             })
 
           parser.hooks.call