Repository: styleguidist/react-styleguidist (ts)

Issue:
assetsDir broken in 11.0.9 with create-react-app
**Current behavior**

After updating to 11.0.9 it is no longer possible to build the styleguide if using assetsDir (which invokes the webpack copy plugin)

**To reproduce**

`styleguideist build`

```
Building style guide...
ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
 - options[0] misses the property 'patterns'. Should be:
   [non-empty string | object { from, to?, context?, globOptions?, filter?, toType?, force?, flatten?, transform?, cacheTransform?, transformPath?, noErrorOnMissing? }, ...] (should not have fewer than 1 item)
ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
 - options[0] misses the property 'patterns'. Should be:
   [non-empty string | object { from, to?, context?, globOptions?, filter?, toType?, force?, flatten?, transform?, cacheTransform?, transformPath?, noErrorOnMissing? }, ...] (should not have fewer than 1 item)
    at validate (.../node_modules/react-styleguidist/node_modules/schema-utils/dist/validate.js:98:11)
    at new CopyPlugin (.../node_modules/react-styleguidist/node_modules/copy-webpack-plugin/dist/index.js:32:30)
    at _default (.../node_modules/react-styleguidist/lib/scripts/make-webpack-config.js:114:34)
    at build (.../node_modules/react-styleguidist/lib/scripts/build.js:13:63)
    at commandBuild (.../node_modules/react-styleguidist/lib/bin/styleguidist.js:105:20)
    at Object.<anonymous> (.../node_modules/react-styleguidist/lib/bin/styleguidist.js:71:5)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:754:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

```
If i remove
`assetsDir: 'src/assets/images/',`

Then all builds as normal. I noticed webpack copy plugin has been updated to 6.0.x, downgrading this alone to 5.x.x does not fix the issue. 

Downgrading styleguidist to 11.0.8 does allow the styleguide to build.


**Expected behavior**

Styleguide should build

Pull request:
Fix broken assetsDir due to updated copy-webpack-plugin
Because copy-webpack-pluign was updated, the assetsDir was broken. We need to update the config being passed to the plugin to make it work again. Update the plugin to latest version 6.1.0 and update the config and tests to make it work.

- [x] Update `copy-webpack-plugin` to `^6.1.0`.
- [x] Fix configuration passed to `copy-webpack-plugin` [`make-webpack-config.ts:111`].
- [x] Update tests to reflect new changes.
- [x] Fix a non-relevant failing tests in `highlightCode.spec.ts` so that build passes.

Fixes #1676

Patch:
diff --git a/package-lock.json b/package-lock.json
index a2e64bab..632ae4c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2617,9 +2617,9 @@
       }
     },
     "@types/copy-webpack-plugin": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@types/copy-webpack-plugin/-/copy-webpack-plugin-5.0.0.tgz",
-      "integrity": "sha512-yQHocgdgES7W5Q2UyxJ5cj/E6MrV1zq3MZ8jdApS9NJKqax+rux9IE3QAbBmNCGbgivEsejrkIq3Rm76JLubkg==",
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@types/copy-webpack-plugin/-/copy-webpack-plugin-5.0.2.tgz",
+      "integrity": "sha512-6W39znqAn74ML9jzQ60wbKqpjMU/5LQcqtHEKYfZ645INbGLNzJBuVwSYIVHlYpj6mrZBVd3E2ni7I0DXINw0w==",
       "dev": true,
       "requires": {
         "@types/minimatch": "*",
@@ -5198,19 +5198,19 @@
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
     },
     "copy-webpack-plugin": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-6.0.3.tgz",
-      "integrity": "sha512-q5m6Vz4elsuyVEIUXr7wJdIdePWTubsqVbEMvf1WQnHGv0Q+9yPRu7MtYFPt+GBOXRav9lvIINifTQ1vSCs+eA==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-6.1.0.tgz",
+      "integrity": "sha512-aWjIuLt1OVQxaDVffnt3bnGmLA8zGgAJaFwPA+a+QYVPh1vhIKjVfh3SbOFLV0kRPvGBITbw17n5CsmiBS4LQQ==",
       "requires": {
-        "cacache": "^15.0.4",
+        "cacache": "^15.0.5",
         "fast-glob": "^3.2.4",
         "find-cache-dir": "^3.3.1",
         "glob-parent": "^5.1.1",
         "globby": "^11.0.1",
         "loader-utils": "^2.0.0",
         "normalize-path": "^3.0.0",
-        "p-limit": "^3.0.1",
-        "schema-utils": "^2.7.0",
+        "p-limit": "^3.0.2",
+        "schema-utils": "^2.7.1",
         "serialize-javascript": "^4.0.0",
         "webpack-sources": "^1.4.3"
       },
@@ -5220,10 +5220,15 @@
           "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz",
           "integrity": "sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA=="
         },
+        "@types/json-schema": {
+          "version": "7.0.6",
+          "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz",
+          "integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw=="
+        },
         "ajv": {
-          "version": "6.12.3",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.3.tgz",
-          "integrity": "sha512-4K0cK3L1hsqk9xIb2z9vs/XU+PGJZ9PNpJRDS9YLzmNdX6jmVPfamLvTJr0aDAusnHyCHO6MjzlkAsgtqp9teA==",
+          "version": "6.12.4",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.4.tgz",
+          "integrity": "sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ==",
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "fast-json-stable-stringify": "^2.0.0",
@@ -5231,6 +5236,11 @@
             "uri-js": "^4.2.2"
           }
         },
+        "ajv-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ=="
+        },
         "braces": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
@@ -5430,13 +5440,13 @@
           }
         },
         "schema-utils": {
-          "version": "2.7.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
-          "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
+          "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
           "requires": {
-            "@types/json-schema": "^7.0.4",
-            "ajv": "^6.12.2",
-            "ajv-keywords": "^3.4.1"
+            "@types/json-schema": "^7.0.5",
+            "ajv": "^6.12.4",
+            "ajv-keywords": "^3.5.2"
           }
         },
         "serialize-javascript": {
diff --git a/package.json b/package.json
index 089bb687..25c465c2 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "clipboard-copy": "^3.1.0",
     "clsx": "^1.0.4",
     "common-dir": "^3.0.0",
-    "copy-webpack-plugin": "^6.0.3",
+    "copy-webpack-plugin": "^6.1.0",
     "core-js": "^3.6.4",
     "doctrine": "^3.0.0",
     "es6-object-assign": "~1.1.0",
@@ -106,7 +106,7 @@
     "@testing-library/jest-dom": "^5.3.0",
     "@testing-library/react": "^10.0.1",
     "@types/buble": "^0.19.2",
-    "@types/copy-webpack-plugin": "^5.0.0",
+    "@types/copy-webpack-plugin": "^5.0.2",
     "@types/doctrine": "0.0.3",
     "@types/enzyme": "^3.10.3",
     "@types/escodegen": "0.0.6",
diff --git a/src/scripts/make-webpack-config.ts b/src/scripts/make-webpack-config.ts
index 77b779f4..dbeb9a70 100644
--- a/src/scripts/make-webpack-config.ts
+++ b/src/scripts/make-webpack-config.ts
@@ -108,8 +108,14 @@ export default function(
 			},
 		});
 		if (config.assetsDir && webpackConfig.plugins) {
+			const copyPatterns = {
+				patterns: castArray(config.assetsDir).map(dir => ({ from: dir })),
+			};
 			webpackConfig.plugins.push(
-				new CopyWebpackPlugin(castArray(config.assetsDir).map(dir => ({ from: dir })))
+				// FIXME: Since we don't have the type of copy-webpack-plugin@6.0
+				// we cast the config as any to make it work. Once the new types are
+				// released we must remove the cast.
+				new CopyWebpackPlugin(copyPatterns as any)
 			);
 		}
 	} else {


Test patch:
diff --git a/src/loaders/utils/__tests__/highlightCode.spec.ts b/src/loaders/utils/__tests__/highlightCode.spec.ts
index 2cd58c4d..22bf714b 100644
--- a/src/loaders/utils/__tests__/highlightCode.spec.ts
+++ b/src/loaders/utils/__tests__/highlightCode.spec.ts
@@ -17,7 +17,7 @@ it('should warn when language not found', () => {
 	const actual = highlightCode(code, 'pizza');
 	expect(actual).toBe(code);
 	expect(warn).toBeCalledWith(
-		'Syntax highlighting for “pizza” isn’t supported. Supported languages are: markup, xml, html, mathml, svg, css, clike, javascript, js, markdown, md, scss, less, flow, typescript, ts, jsx, tsx, graphql, json, bash, shell, diff.'
+		'Syntax highlighting for “pizza” isn’t supported. Supported languages are: markup, html, mathml, svg, xml, ssml, atom, rss, css, clike, javascript, js, markdown, md, scss, less, flow, typescript, ts, jsx, tsx, graphql, json, webmanifest, bash, shell, diff.'
 	);
 });
 
diff --git a/src/scripts/__tests__/make-webpack-config.spec.ts b/src/scripts/__tests__/make-webpack-config.spec.ts
index f9273f6f..5df8b375 100644
--- a/src/scripts/__tests__/make-webpack-config.spec.ts
+++ b/src/scripts/__tests__/make-webpack-config.spec.ts
@@ -117,12 +117,16 @@ it('should enable verbose mode in CleanWebpackPlugin', () => {
 
 it('should set from with assetsDir in CopyWebpackPlugin', () => {
 	makeWebpackConfig({ ...styleguideConfig, assetsDir: '/assets/' }, 'production');
-	expect(CopyWebpackPlugin).toHaveBeenCalledWith([{ from: '/assets/' }]); //([
+	expect(CopyWebpackPlugin).toHaveBeenCalledWith({
+		patterns: [{ from: '/assets/' }],
+	});
 });
 
 it('should set array of from with assetsDir array in CopyWebpackPlugin', () => {
 	makeWebpackConfig({ ...styleguideConfig, assetsDir: ['/assets1/', '/assets2/'] }, 'production');
-	expect(CopyWebpackPlugin).toHaveBeenCalledWith([{ from: '/assets1/' }, { from: '/assets2/' }]);
+	expect(CopyWebpackPlugin).toHaveBeenCalledWith({
+		patterns: [{ from: '/assets1/' }, { from: '/assets2/' }],
+	});
 });
 
 it('should merge user webpack config', () => {