upgrade the rest of the webpack & babel ecosystem

DEVELOPMENT.md

@@ -94,7 +94,12 @@ Then, you can run these commands:
 
 ### Developing Monaco GraphQL
 
-Follow the
-[`monaco-graphql` example readme](examples/monaco-graphql-webpack/README.md) to
-set it up, and then you can run `yarn start-monaco` from anywhere in the
-repository!
+1. First run `yarn`.
+1. run `yarn tsc --watch` to watch `monaco-graphql` and
+   `graphql-language-service` in one screen session/terminal tab/etc
+1. in another session, run `yarn start-monaco` from anywhere in the repository
+   aside from an individual workspace.
+1. alternatively to the webpack example, or in addition, you can run monaco or
+   next.js examples, though these examples are simpler. They also require their
+   own `yarn` or `npm install` as they are excluded from the `workspaces`
+   resolved on global `yarn install`

examples/graphiql-webpack/package.json

@@ -23,12 +23,12 @@
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.9.5",
     "@babel/preset-react": "^7.9.4",
-    "babel-loader": "^9.1.0",
+    "babel-loader": "^9.1.2",
     "cross-env": "^7.0.2",
-    "css-loader": "^3.5.1",
+    "css-loader": "^6.7.3",
     "html-webpack-plugin": "^4.2.0",
     "react-dom": "^17.0.2",
-    "style-loader": "^1.1.3",
+    "style-loader": "^3.3.1",
     "webpack": "5.75.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1",

packages/graphiql/package.json

@@ -69,23 +69,24 @@
     "@types/markdown-it": "^12.2.3",
     "@types/node": "^16.18.4",
     "@types/testing-library__jest-dom": "5.14.5",
-    "babel-loader": "^9.1.0",
-    "babel-plugin-macros": "^2.8.0",
+    "babel-loader": "^9.1.2",
+    "babel-plugin-macros": "^3.1.0",
     "cross-env": "^7.0.2",
-    "css-loader": "^3.5.1",
-    "cssnano": "^4.1.10",
+    "css-loader": "^6.7.3",
+    "cssnano": "^5.1.15",
     "cypress": "^12.6.0",
     "express": "^4.17.3",
     "express-graphql": "experimental-stream-defer",
-    "fork-ts-checker-webpack-plugin": "4.1.3",
+    "fork-ts-checker-webpack-plugin": "7.3.0",
     "graphql": "^16.4.0",
     "graphql-subscriptions": "^2.0.0",
-    "html-webpack-plugin": "^4.2.0",
+    "html-webpack-plugin": "^5.5.0",
     "identity-obj-proxy": "^3.0.0",
-    "mini-css-extract-plugin": "^0.9.0",
-    "postcss-import": "^12.0.1",
-    "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "^6.7.0",
+    "mini-css-extract-plugin": "^2.7.2",
+    "postcss": "8.4.21",
+    "postcss-loader": "7.0.2",
+    "postcss-import": "15.1.0",
+    "postcss-preset-env": "^8.0.1",
     "prop-types": "15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -95,9 +96,8 @@
     "rimraf": "^3.0.2",
     "serve": "^11.3.0",
     "start-server-and-test": "^1.10.11",
-    "style-loader": "^1.1.3",
+    "style-loader": "^3.3.1",
     "subscriptions-transport-ws": "0.11.0",
-    "ts-loader": "^9.4.2",
     "typescript": "^4.6.3",
     "webpack": "5.75.0",
     "webpack-bundle-analyzer": "^3.6.1",

packages/graphiql/postcss.config.js

@@ -1,6 +1,7 @@
-module.exports = ({ file, options }) => ({
+module.exports = ({ options, webpackLoaderContext }) => ({
   plugins: {
-    'postcss-import': { root: file.dirname },
+    // https://github.com/postcss/postcss-import/issues/442#issuecomment-822427606
+    'postcss-import': { root: webpackLoaderContext.context },
     // contains autoprefixer, etc
     'postcss-preset-env': options['postcss-preset-env'] || false,
     cssnano: process.env.NODE_ENV === 'production' ? options.cssnano : false,

packages/graphiql/resources/webpack.config.js

@@ -58,15 +58,7 @@ const resultConfig = {
       },
       {
         test: /\.css$/,
-        use: [
-          {
-            loader: MiniCssExtractPlugin.loader,
-            options: {
-              hmr: isHMR,
-            },
-          },
-          'css-loader',
-        ],
+        use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader'],
       },
       {
         test: /\.css$/,
@@ -98,7 +90,9 @@ const resultConfig = {
     }),
     new ForkTsCheckerWebpackPlugin({
       async: isDev,
-      tsconfig: rootPath('tsconfig.json'),
+      typescript: {
+        configFile: rootPath('tsconfig.json'),
+      },
     }),
     new (class {
       apply(compiler) {