Upgrade to webpack 5

Co-authored-by: Michelle Chen <[email protected]>
Co-authored-by: Ates Goral <[email protected]>"

package.json

@@ -30,9 +30,16 @@
   },
   "homepage": "https://github.com/shopify/quilt#readme",
   "private": true,
-  "workspaces": [
-    "packages/*"
-  ],
+  "workspaces": {
+    "packages": [
+      "packages/*"
+    ],
+    "nohoist": [
+      "**/webpack",
+      "**/@types/webpack",
+      "**/tapable"
+    ]
+  },
   "devDependencies": {
     "@apollo/react-common": "^3.1.3",
     "@apollo/react-hooks": "^3.1.3",

packages/graphql-mini-transforms/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphql-mini-transforms",
-  "version": "3.2.1",
+  "version": "4.0.0-webpack-5-beta.5",
   "license": "MIT",
   "description": "Transformers for importing .graphql files in various build tools.",
   "main": "index.js",
@@ -38,17 +38,18 @@
   },
   "dependencies": {
     "@jest/transform": "^27.0.2",
-    "@types/fs-extra": "^9.0.11",
-    "@types/webpack": "^4.41.11",
     "fs-extra": "^9.1.0",
     "graphql": ">=14.5.0 <16.0.0",
-    "graphql-typed": "^1.1.1",
-    "loader-utils": "^2.0.0"
+    "graphql-typed": "^1.1.1"
   },
   "devDependencies": {
     "@types/common-tags": "^1.8.0",
     "@types/loader-utils": "^1.1.3",
-    "common-tags": "^1.8.0"
+    "common-tags": "^1.8.0",
+    "webpack": "^5.40.0"
+  },
+  "peerDependencies": {
+    "webpack": ">=5.38.0"
   },
   "files": [
     "build/",

packages/graphql-mini-transforms/src/tests/webpack.test.ts

@@ -1,7 +1,7 @@
 import * as path from 'path';
 import {createHash} from 'crypto';
 
-import {loader} from 'webpack';
+import type {LoaderContext} from 'webpack';
 import {stripIndent} from 'common-tags';
 
 import graphQLLoader from '../webpack-loader';
@@ -272,7 +272,7 @@ function createLoaderContext({
   context = __dirname,
   readFile = () => '',
   resolve = (context, imported) => path.resolve(context, imported),
-}: Options = {}): loader.LoaderContext {
+}: Options = {}): LoaderContext<Options> {
   return {
     context,
     query,
@@ -291,6 +291,9 @@ function createLoaderContext({
       },
     },
     cacheable() {},
+    getOptions() {
+      return this.query;
+    },
     async() {
       return () => {};
     },

packages/graphql-mini-transforms/src/webpack-loader.ts

@@ -1,23 +1,21 @@
 import {dirname} from 'path';
 
-import type {loader} from 'webpack';
+import type {LoaderContext} from 'webpack';
 import {parse, DocumentNode} from 'graphql';
-import {getOptions} from 'loader-utils';
 
 import {cleanDocument, extractImports, toSimpleDocument} from './document';
 
 interface Options {
   simple?: boolean;
 }
-
 export default async function graphQLLoader(
-  this: loader.LoaderContext,
+  this: LoaderContext<Options>,
   source: string | Buffer,
 ) {
   this.cacheable();
 
   const done = this.async();
-  const {simple = false} = getOptions(this) as Options;
+  const {simple = false} = this.getOptions();
 
   if (done == null) {
     throw new Error(
@@ -43,7 +41,7 @@ export default async function graphQLLoader(
 async function loadDocument(
   rawSource: string | Buffer,
   resolveContext: string,
-  loader: loader.LoaderContext,
+  loader: LoaderContext<Options>,
 ): Promise<DocumentNode> {
   const normalizedSource =
     typeof rawSource === 'string' ? rawSource : rawSource.toString();
@@ -61,7 +59,7 @@ async function loadDocument(
         loader.resolve(resolveContext, imported, (error, result) => {
           if (error) {
             reject(error);
-          } else {
+          } else if (result) {
             loader.addDependency(result);
             resolve(result);
           }

packages/graphql-persisted/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/graphql-persisted",
-  "version": "2.0.7",
+  "version": "3.0.0-webpack-5-beta.2",
   "license": "MIT",
   "description": "Apollo and Koa integrations for persisted GraphQL queries.",
   "typesVersions": {
@@ -54,7 +54,7 @@
     "koa.esnext"
   ],
   "optionalDependencies": {
-    "@shopify/sewing-kit-koa": "^7.0.7"
+    "@shopify/sewing-kit-koa": "^8.0.0-webpack-5-beta.2"
   },
   "peerDependencies": {
     "koa": ">=2.0.0"

packages/magic-entries-webpack-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/magic-entries-webpack-plugin",
-  "version": "1.2.6",
+  "version": "2.0.0-webpack-5-beta.2",
   "license": "MIT",
   "description": "A webpack plugin that automatically sets up entrypoints from filename conventions",
   "main": "index.js",
@@ -39,8 +39,10 @@
     "index.esnext"
   ],
   "devDependencies": {
+    "@types/webpack": "^4.25.1",
     "@types/webpack-virtual-modules": "^0.1.0",
     "setimmediate": "^1.0.5",
+    "webpack": "^4.25.1",
     "webpack-virtual-modules": "^0.4.3"
   },
   "module": "index.mjs",

packages/react-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/react-server",
-  "version": "1.2.9",
+  "version": "2.0.0-webpack-5-beta.2",
   "license": "MIT",
   "description": "Utilities for React server-side rendering",
   "main": "index.js",
@@ -52,12 +52,13 @@
     "@types/koa": "^2.0.0",
     "@types/webpack-virtual-modules": "^0.1.0",
     "get-port": "^5.0.0",
+    "memfs": "^3.2.2",
     "node-loader": "^1.0.0",
     "react": "^17.0.2",
     "react-dom": "17.0.2",
     "saddle-up": "^0.5.4",
     "setimmediate": "^1.0.5",
-    "webpack": "^4.25.1"
+    "webpack": ">=5.40.0"
   },
   "peerDependencies": {
     "cross-fetch": ">=3.0.0",

packages/react-server/src/index.ts

@@ -1,4 +1,3 @@
-// release comment
 export {createServer} from './server';
 export {createRender} from './render';
 export type {Context} from './render';