fix: webpack 5 and worker-loader support (#21050)

Co-authored-by: NJoe Haddad <joe.haddad@zeit.co>

.github/workflows/build_test_deploy.yml

@@ -183,7 +183,7 @@ jobs:
       - run: yarn list webpack react react-dom
         if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
 
-      - run: xvfb-run node run-tests.js test/integration/{link-ref,production,basic,async-modules,ssr-ctx}/test/index.test.js test/acceptance/*.test.js
+      - run: xvfb-run node run-tests.js test/integration/{link-ref,production,basic,async-modules,ssr-ctx,worker-loader}/test/index.test.js test/acceptance/*.test.js
         if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
 
   testFirefox:

package.json

@@ -44,6 +44,11 @@
     "@babel/preset-react": "7.12.10",
     "@fullhuman/postcss-purgecss": "1.3.0",
     "@mdx-js/loader": "0.18.0",
+    "@opentelemetry/exporter-zipkin": "0.14.0",
+    "@opentelemetry/node": "0.14.0",
+    "@opentelemetry/plugin-http": "0.14.0",
+    "@opentelemetry/plugin-https": "0.14.0",
+    "@opentelemetry/tracing": "0.14.0",
     "@types/cheerio": "0.22.16",
     "@types/fs-extra": "8.1.0",
     "@types/http-proxy": "1.17.3",
@@ -129,12 +134,7 @@
     "wait-port": "0.2.2",
     "web-streams-polyfill": "2.1.1",
     "webpack-bundle-analyzer": "4.3.0",
-    "worker-loader": "2.0.0",
-    "@opentelemetry/exporter-zipkin": "0.14.0",
-    "@opentelemetry/node": "0.14.0",
-    "@opentelemetry/plugin-http": "0.14.0",
-    "@opentelemetry/plugin-https": "0.14.0",
-    "@opentelemetry/tracing": "0.14.0"
+    "worker-loader": "3.0.7"
   },
   "resolutions": {
     "browserslist": "^4.14.7",

packages/react-refresh-utils/ReactRefreshWebpackPlugin.ts

@@ -100,6 +100,7 @@ function webpack5(this: ReactFreshWebpackPlugin, compiler: WebpackCompiler) {
       // @ts-ignore This exists in webpack 5
       const { runtimeTemplate } = this.compilation
       return Template.asString([
+        `if (${RuntimeGlobals.interceptModuleExecution}) {`,
         `${
           RuntimeGlobals.interceptModuleExecution
         }.push(${runtimeTemplate.basicFunction('options', [
@@ -132,6 +133,7 @@ function webpack5(this: ReactFreshWebpackPlugin, compiler: WebpackCompiler) {
             ]
           )}`,
         ])})`,
+        '}',
       ])
     }
   }

test/integration/worker-loader/next.config.js

@@ -4,7 +4,7 @@ module.exports = {
       test: /\.worker\.(js|ts|tsx)$/,
       loader: 'worker-loader',
       options: {
-        name: 'static/[hash].worker.js',
+        filename: 'static/[hash].worker.js',
         publicPath: '/_next/',
       },
     })

test/integration/worker-loader/test/index.test.js

@@ -9,8 +9,7 @@ const context = {}
 
 jest.setTimeout(1000 * 60 * 2)
 
-// TODO: Upgrade worker-loader when it's published with webpack 5 support
-describe.skip('Web Workers with Fast Refresh', () => {
+describe('Web Workers with Fast Refresh', () => {
   beforeAll(async () => {
     context.appPort = await findPort()
     context.server = await launchApp(appDir, context.appPort)

yarn.lock

@@ -9918,7 +9918,7 @@ loader-utils@2.0.0, loader-utils@^2.0.0:
     emojis-list "^3.0.0"
     json5 "^2.1.2"
 
-loader-utils@^1.0.0, loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
+loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
   dependencies:
@@ -14067,14 +14067,6 @@ schema-utils@2.7.1, schema-utils@^2.0.0, schema-utils@^2.6.5, schema-utils@^2.6.
     ajv "^6.12.4"
     ajv-keywords "^3.5.2"
 
-schema-utils@^0.4.0:
-  version "0.4.7"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"
-  integrity sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==
-  dependencies:
-    ajv "^6.1.0"
-    ajv-keywords "^3.1.0"
-
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
@@ -16185,13 +16177,13 @@ worker-farm@^1.7.0:
   dependencies:
     errno "~0.1.7"
 
-worker-loader@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/worker-loader/-/worker-loader-2.0.0.tgz#45fda3ef76aca815771a89107399ee4119b430ac"
-  integrity sha512-tnvNp4K3KQOpfRnD20m8xltE3eWh89Ye+5oj7wXEEHKac1P4oZ6p9oTj8/8ExqoSBnk9nu5Pr4nKfQ1hn2APJw==
+worker-loader@3.0.7:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/worker-loader/-/worker-loader-3.0.7.tgz#9cf2122a9a781d6742cb873c58c3769591b31988"
+  integrity sha512-LjYLuYJw6kqQKDoygpoD5vWeR1CbZjuVSW3/8pFsptMlUl8gatNM/pszhasSDAWt+dYxMipWB6695k+1zId+iQ==
   dependencies:
-    loader-utils "^1.0.0"
-    schema-utils "^0.4.0"
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
 
 wrap-ansi@^2.0.0:
   version "2.1.0"