fix: Fix broken assetsDir due to updated copy-webpack-plugin (#1690)

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.

Fixes #1676

Author: swashata

package-lock.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",

package.json

@@ -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.'
 	);
 });
 

src/loaders/utils/__tests__/highlightCode.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', () => {

src/scripts/__tests__/make-webpack-config.spec.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 {