upgrade to webpack 5, re-add monaco workspace

.browserslistrc

@@ -3,4 +3,3 @@ Firefox ESR
 not dead
 not IE 11
 not ios 10
-maintained node versions

examples/graphiql-webpack/package.json

@@ -23,15 +23,15 @@
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.9.5",
     "@babel/preset-react": "^7.9.4",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^9.1.0",
     "cross-env": "^7.0.2",
     "css-loader": "^3.5.1",
     "html-webpack-plugin": "^4.2.0",
     "react-dom": "^17.0.2",
     "style-loader": "^1.1.3",
-    "webpack": "^4.42.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3",
+    "webpack": "5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1",
     "worker-loader": "^2.0.0"
   }
 }

examples/monaco-graphql-webpack/package.json

@@ -6,7 +6,7 @@
   "description": "A simple monaco example with webpack and typescript",
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack-cli",
-    "start": "cross-env NODE_ENV=development webpack-dev-server"
+    "start": "cross-env NODE_ENV=development webpack-cli serve"
   },
   "dependencies": {
     "graphql": "^16.4.0",
@@ -23,11 +23,12 @@
     "@babel/node": "^7.8.7",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/preset-env": "^7.12.1",
+    "@babel/preset-env": "^7.20.0",
     "@babel/preset-react": "^7.12.1",
-    "@babel/preset-typescript": "^7.12.1",
+    "@babel/preset-typescript": "^7.21.0",
     "@types/prettier": "^2.7.0",
-    "babel-loader": "^8.1.0",
+    "@webpack-cli/serve": "^2.0.1",
+    "babel-loader": "^9.1.0",
     "cross-env": "^7.0.2",
     "css-loader": "^3.5.1",
     "file-loader": "6.2.0",
@@ -36,9 +37,9 @@
     "react-dom": "^17.0.2",
     "style-loader": "^1.1.3",
     "typescript": "^4.6.3",
-    "webpack": "4.42.1",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3",
+    "webpack": "5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1",
     "worker-loader": "^3.0.8"
   }
 }

examples/monaco-graphql-webpack/src/editors.ts

@@ -2,16 +2,15 @@ import * as monaco from 'monaco-editor';
 
 // NOTE: using loader syntax because Yaml worker imports editor.worker directly and that
 // import shouldn't go through loader syntax.
-// @ts-ignore
+// @ts-expect-error
 import GraphQLWorker from 'monaco-graphql/esm/graphql.worker'; // eslint-disable-line import/default
 
 const GRAPHQL_LANGUAGE_ID = 'graphql';
 
-// @ts-ignore
+// @ts-expect-error
 window.MonacoEnvironment = {
   getWorker(_workerId: string, label: string) {
     if (label === GRAPHQL_LANGUAGE_ID) {
-      // @ts-expect-error
       return new GraphQLWorker();
     }
     if (label === 'json') {

examples/monaco-graphql-webpack/tsconfig.json

@@ -1,15 +1,16 @@
 {
-  "extends": "../../resources/tsconfig.base.cjs.json",
   "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
     "rootDir": "./src",
     "outDir": "./dist",
     "composite": true,
-    "jsx": "preserve",
     "baseUrl": ".",
     "strictPropertyInitialization": false,
     "types": ["node", "jest"],
     "typeRoots": ["../../node_modules/@types", "node_modules/@types"],
-    "lib": ["dom", "ESNext"]
+    "lib": ["dom", "ESNext"],
+    "moduleResolution": "node"
   },
   "references": [{ "path": "../../packages/monaco-graphql" }],
   "include": ["src"],

examples/monaco-graphql-webpack/webpack.config.js

@@ -16,8 +16,8 @@ const resultConfig = {
   output: {
     path: rootPath('dist'),
     filename: '[name].js',
+    chunkFormat: 'commonjs',
   },
-  devtool: 'cheap-module-eval-source-map',
   module: {
     rules: [
       // for graphql module, which uses .mjs

packages/graphiql/package.json

@@ -35,8 +35,8 @@
     "build": "yarn build-clean && yarn build-cjs && yarn build-esm",
     "build-bundles": "yarn build-bundles-clean && yarn build-bundles-dev && yarn build-bundles-min",
     "build-bundles-clean": "rimraf 'graphiql.*{js,css}' *.html",
-    "build-bundles-dev": "cross-env NODE_ENV=development CDN=1 yarn webpack -d --bail",
-    "build-bundles-min": "cross-env ANALYZE=1 NODE_ENV=production CDN=1 yarn webpack -p --bail",
+    "build-bundles-dev": "cross-env NODE_ENV=development CDN=1 yarn webpack --mode development --bail",
+    "build-bundles-min": "cross-env ANALYZE=1 NODE_ENV=production CDN=1 yarn webpack --mode production --bail",
     "build-cjs": "tsc",
     "build-clean": "rimraf esm dist webpack *.html",
     "build-demo": "build-storybook -o ./storybook",
@@ -47,7 +47,7 @@
     "e2e": "yarn e2e-server 'cypress run'",
     "e2e-server": "start-server-and-test 'cross-env PORT=8080 node test/e2e-server' 'http-get://localhost:8080/graphql?query={test { id }}'",
     "storybook": "start-storybook",
-    "webpack": "webpack --config resources/webpack.config.js"
+    "webpack": "webpack-cli --config resources/webpack.config.js"
   },
   "dependencies": {
     "@graphiql/react": "^0.16.0",
@@ -69,7 +69,7 @@
     "@types/markdown-it": "^12.2.3",
     "@types/node": "^16.18.4",
     "@types/testing-library__jest-dom": "5.14.5",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^9.1.0",
     "babel-plugin-macros": "^2.8.0",
     "cross-env": "^7.0.2",
     "css-loader": "^3.5.1",
@@ -97,12 +97,12 @@
     "start-server-and-test": "^1.10.11",
     "style-loader": "^1.1.3",
     "subscriptions-transport-ws": "0.11.0",
-    "ts-loader": "^7.0.0",
+    "ts-loader": "^9.4.2",
     "typescript": "^4.6.3",
-    "webpack": "^4.42.1",
+    "webpack": "5.75.0",
     "webpack-bundle-analyzer": "^3.6.1",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1",
     "ws": "^8.3.0"
   }
 }

packages/graphiql/resources/webpack.config.js

@@ -6,6 +6,7 @@ const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const graphql = require('graphql');
+const rimraf = require('rimraf');
 
 const isDev = process.env.NODE_ENV === 'development';
 const isHMR = Boolean(isDev && process.env.WEBPACK_DEV_SERVER);
@@ -32,15 +33,12 @@ const resultConfig = {
     before: require('../test/beforeDevServer'),
     after: require('../test/afterDevServer'),
   },
-  devtool: isDev ? 'cheap-module-eval-source-map' : 'source-map',
-  node: {
-    fs: 'empty',
-    module: 'empty',
-  },
+  devtool: isDev ? 'cheap-module-source-map' : 'source-map',
   externals: {
     react: 'React',
     'react-dom': 'ReactDOM',
   },
+
   module: {
     rules: [
       // for graphql module, which uses .mjs
@@ -77,6 +75,7 @@ const resultConfig = {
       },
     ],
   },
+
   plugins: [
     // in order to prevent async modules for CDN builds
     // until we can guarantee it will work with the CDN properly
@@ -101,6 +100,14 @@ const resultConfig = {
       async: isDev,
       tsconfig: rootPath('tsconfig.json'),
     }),
+    new (class {
+      apply(compiler) {
+        compiler.hooks.done.tap('Remove LICENSE', () => {
+          console.log('Remove LICENSE.txt');
+          rimraf.sync('./*.LICENSE.txt');
+        });
+      }
+    })(),
   ],
   resolve: {
     extensions: ['.mjs', '.js', '.json', '.jsx', '.css', '.ts', '.tsx'],

packages/graphql-language-service-server/package.json

@@ -57,6 +57,7 @@
   },
   "devDependencies": {
     "@types/mkdirp": "^1.0.1",
+    "@types/glob": "^8.1.0",
     "cross-env": "^7.0.2",
     "graphql": "^16.4.0",
     "cross-fetch": "^3.1.5"