feat(storybook): fix ie11, use webpack5, update deps

Fixes IE11 issues using storybookjs/storybook#17057

Uses webpack5 loader for storybook https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack-5

Updates dev deps

Uses polyfill.io for storybook too

Co-authored-by: Oliver Barnwell <ob6160@users.noreply.github.com>

feat: remove corejs

.eslintrc.json

@@ -9,7 +9,8 @@
     "plugin:functional/no-mutations",
     "plugin:react-hooks/recommended",
     "plugin:@guardian/source-foundations/recommended",
-    "plugin:@guardian/source-react-components/recommended"
+    "plugin:@guardian/source-react-components/recommended",
+    "plugin:storybook/recommended"
   ],
   "parserOptions": {
     "ecmaFeatures": {

.storybook/main.js

@@ -4,6 +4,9 @@ const babelConfig = require('../babel.config');
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  core: {
+    builder: 'webpack5',
+  },
   webpackFinal: async (config) => {
     // Add the @client alias to prevent imports using it from failing
     // Nb. __dirname is the current working directory, so .storybook in this case
@@ -56,6 +59,7 @@ module.exports = {
         ...config.module,
         rules: [...config.module.rules, transpileModules],
       },
+      target: ['web', 'es5'],
     };
   },
 };

package.json

@@ -33,23 +33,25 @@
     "ts-prune": "ts-prune -i .stories.tsx"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.12",
+    "@babel/core": "^7.17.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
     "@babel/plugin-proposal-optional-chaining": "^7.16.7",
-    "@babel/plugin-transform-runtime": "^7.16.10",
+    "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.16.7",
-    "@babel/runtime": "^7.16.7",
+    "@babel/runtime": "^7.17.0",
     "@emotion/babel-preset-css-prop": "^11.2.0",
     "@guardian/eslint-plugin-source-foundations": "^4.0.2",
     "@guardian/eslint-plugin-source-react-components": "^4.0.2",
     "@guardian/node-riffraff-artifact": "^0.3.2",
-    "@storybook/addon-actions": "^6.4.17",
-    "@storybook/addon-essentials": "^6.4.17",
-    "@storybook/addon-links": "^6.4.17",
-    "@storybook/react": "^6.4.17",
-    "@testing-library/jest-dom": "^5.16.1",
+    "@storybook/addon-actions": "^6.5.0-alpha.34",
+    "@storybook/addon-essentials": "^6.5.0-alpha.34",
+    "@storybook/addon-links": "^6.5.0-alpha.34",
+    "@storybook/builder-webpack5": "^6.5.0-alpha.34",
+    "@storybook/manager-webpack5": "^6.5.0-alpha.34",
+    "@storybook/react": "^6.5.0-alpha.34",
+    "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^7.0.2",
     "@types/compression": "^1.7.2",
@@ -61,26 +63,25 @@
     "@types/mjml": "^4.7.0",
     "@types/mjml-react": "^2.0.3",
     "@types/ms": "^0.7.31",
-    "@types/node": "^17.0.13",
+    "@types/node": "^17.0.14",
     "@types/node-fetch": "^3.0.3",
-    "@types/react": "^17.0.38",
+    "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-test-renderer": "^17.0.1",
     "@types/serialize-javascript": "^5.0.2",
     "@types/uuid": "^8.3.4",
-    "@typescript-eslint/eslint-plugin": "^5.10.1",
-    "@typescript-eslint/parser": "^5.10.1",
+    "@typescript-eslint/eslint-plugin": "^5.10.2",
+    "@typescript-eslint/parser": "^5.10.2",
     "assets-webpack-plugin": "^7.1.1",
-    "axe-core": "^4.3.5",
+    "axe-core": "^4.4.0",
     "babel-jest": "^27.4.6",
     "babel-loader": "^8.2.3",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "chalk-rainbow": "^1.0.0",
     "chromatic": "^6.4.3",
     "copy-node-modules": "^1.1.1",
-    "core-js": "^3.20.3",
-    "cypress": "^9.3.1",
+    "cypress": "^9.4.1",
     "cypress-axe": "^0.14.0",
     "cypress-mailosaur": "2.6.0",
     "dotenv-webpack": "^7.1.0",
@@ -91,6 +92,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-storybook": "^0.5.6",
     "file-loader": "^6.2.0",
     "fork-ts-checker-notifier-webpack-plugin": "^4.0.0",
     "fork-ts-checker-webpack-plugin": "^7.0.0",
@@ -101,15 +103,15 @@
     "nodemon": "^2.0.15",
     "prettier": "^2.5.1",
     "react-test-renderer": "^17.0.2",
-    "snyk": "^1.841.0",
+    "snyk": "^1.848.0",
     "stmux": "^1.8.3",
-    "terser-webpack-plugin": "^5.3.0",
+    "terser-webpack-plugin": "^5.3.1",
     "ts-jest": "^27.1.3",
     "ts-prune": "^0.10.3",
     "typescript": "^4.5.5",
     "wait-on": "^6.0.0",
     "web-vitals": "^2.1.4",
-    "webpack": "^5.67.0",
+    "webpack": "^5.68.0",
     "webpack-cli": "^4.9.2",
     "webpack-merge": "^5.8.0",
     "webpack-node-externals": "^3.0.0",

src/client/__tests__/MainForm.test.tsx

@@ -3,7 +3,7 @@
  */
 /** @jsx jsx */
 
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { act, fireEvent, render, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { MainForm, MainFormProps } from '../components/MainForm';

webpack.config.js

@@ -182,7 +182,6 @@ const browser = ({ isLegacy }) => {
         {
           include: /node_modules/,
           exclude: [
-            /node_modules[\\\/]core-js/,
             /node_modules[\\\/]@babel/,
             /node_modules[\\\/]webpack[\\\/]buildin/,
           ],