feat(gatsby-plugin-netlify-cms): fix compatibility for webpack5

gatsbyjs · Feb 21, 2021 · 228bd6a · 228bd6a
1 parent e9e56c6
commit 228bd6a
Show file tree

Hide file tree

Showing 3 changed files with 278 additions and 289 deletions.
diff --git a/packages/gatsby-plugin-netlify-cms/package.json b/packages/gatsby-plugin-netlify-cms/package.json
@@ -8,18 +8,17 @@
   },
   "dependencies": {
     "@pieh/friendly-errors-webpack-plugin": "1.7.0-chalk-2",
-    "copy-webpack-plugin": "^5.1.2",
-    "html-webpack-exclude-assets-plugin": "^0.0.7",
-    "html-webpack-plugin": "^3.2.0",
-    "html-webpack-tags-plugin": "^2.0.17",
-    "lodash": "^4.17.20",
-    "mini-css-extract-plugin": "^0.12.0",
+    "copy-webpack-plugin": "^7.0.0",
+    "html-webpack-plugin": "^5.2.0",
+    "html-webpack-tags-plugin": "^3.0.0",
+    "lodash": "^4.17.21",
+    "mini-css-extract-plugin": "^1.3.8",
     "netlify-identity-widget": "^1.9.1",
-    "webpack": "^4.46.0"
+    "webpack": "^5.23.00"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.1",
-    "@babel/core": "^7.12.3",
+    "@babel/cli": "^7.12.17",
+    "@babel/core": "^7.12.17",
     "babel-preset-gatsby-package": "^1.0.0-next.0",
     "cross-env": "^7.0.3",
     "react": "^16.12.0",
@@ -36,10 +35,10 @@
   "license": "MIT",
   "main": "index.js",
   "peerDependencies": {
-    "gatsby": "^3.0.0-next.0",
-    "netlify-cms-app": "^2.9.0",
-    "react": "^16.8.4 || ^17.0.0",
-    "react-dom": "^16.8.4 || ^17.0.0"
+    "gatsby": "^3.0.0-next.7",
+    "netlify-cms-app": "^2.14.23",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   },
   "repository": {
     "type": "git",

diff --git a/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js b/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js
@@ -2,7 +2,6 @@ import path from "path"
 import { mapValues, isPlainObject, trim } from "lodash"
 import webpack from "webpack"
 import HtmlWebpackPlugin from "html-webpack-plugin"
-import HtmlWebpackExcludeAssetsPlugin from "html-webpack-exclude-assets-plugin"
 import MiniCssExtractPlugin from "mini-css-extract-plugin"
 // TODO: swap back when https://github.com/geowarin/friendly-errors-webpack-plugin/pull/86 lands
 import FriendlyErrorsPlugin from "@pieh/friendly-errors-webpack-plugin"
@@ -31,10 +30,6 @@ function deepMap(obj, fn) {
 
 const cssTests = []
 
-function isCssRule({ test }) {
-  return test instanceof RegExp && cssTests.includes(test.toString())
-}
-
 function replaceRule(value, stage) {
   // If `value` does not have a `test` property, it isn't a rule object.
   if (!value || !value.test) {
@@ -214,19 +209,19 @@ exports.onCreateWebpackConfig = (
 
       // Exclude CSS from index.html, as any imported styles are assumed to be
       // targeting the editor preview pane. Uses `excludeAssets` option from
-      // `HtmlWebpackPlugin` config.
-      new HtmlWebpackExcludeAssetsPlugin(),
+      // `HtmlWebpackPlugin` config
+      // not compatible with webpack 5
+      // new HtmlWebpackExcludeAssetsPlugin(),
 
       // Pass in needed Gatsby config values.
       new webpack.DefinePlugin({
         __PATH__PREFIX__: pathPrefix,
         CMS_PUBLIC_PATH: JSON.stringify(publicPath),
       }),
 
-      new CopyPlugin(
-        [].concat.apply(
-          [],
-          externals.map(({ name, assetName, sourceMap, assetDir }) =>
+      new CopyPlugin({
+        patterns: externals.flatMap(
+          ({ name, assetName, sourceMap, assetDir }) =>
             [
               {
                 from: require.resolve(path.join(name, assetDir, assetName)),
@@ -236,10 +231,9 @@ exports.onCreateWebpackConfig = (
                 from: require.resolve(path.join(name, assetDir, sourceMap)),
                 to: sourceMap,
               },
-            ].filter(item => item)
-          )
-        )
-      ),
+            ].filter(Boolean)
+        ),
+      }),
 
       new HtmlWebpackTagsPlugin({
         tags: externals.map(({ assetName }) => assetName),