Upgrade to Next.js 12, EUI 41.3

.gitignore

@@ -19,3 +19,6 @@ node_modules
 
 # Default `next export` output directory
 out
+
+# TypeScript cache
+tsconfig.tsbuildinfo

.prettierrc

@@ -1,5 +1,5 @@
 {
-  "jsxBracketSameLine": true,
+  "bracketSameLine": true,
   "jsxSingleQuote": false,
   "parser": "typescript",
   "printWidth": 80,

next.config.js

@@ -114,7 +114,10 @@ const nextConfig = {
       // Moment ships with a large number of locales. Exclude them, leaving
       // just the default English locale. If you need other locales, see:
       // https://create-react-app.dev/docs/troubleshooting/#momentjs-locales-are-missing
-      new IgnorePlugin(/^\.\/locale$/, /moment$/)
+      new IgnorePlugin({
+        resourceRegExp: /^\.\/locale$/,
+        contextRegExp: /moment$/,
+      })
     );
 
     config.resolve.mainFields = ['module', 'main'];

package.json

@@ -30,32 +30,32 @@
   },
   "dependencies": {
     "@elastic/datemath": "^5.0.3",
-    "@elastic/eui": "^32.0.4",
-    "@next/bundle-analyzer": "^10.1.3",
-    "glob": "^7.1.6",
+    "@elastic/eui": "^41.3.0",
+    "@next/bundle-analyzer": "^12.0.4",
+    "glob": "^7.2.0",
     "moment": "^2.29.1",
-    "next": "^11.1.2",
+    "next": "^12.0.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "sass": "^1.32.8",
-    "typescript-plugin-css-modules": "^3.2.0"
+    "sass": "^1.43.5",
+    "typescript-plugin-css-modules": "^3.4.0"
   },
   "devDependencies": {
-    "@types/node": "^14.14.39",
-    "@typescript-eslint/eslint-plugin": "^4.22.0",
-    "@typescript-eslint/parser": "^4.22.0",
-    "copy-webpack-plugin": "^6.3.2",
-    "eslint": "^7.24.0",
-    "eslint-config-prettier": "^8.2.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "@types/node": "^16.11.10",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "copy-webpack-plugin": "^10.0.0",
+    "eslint": "<8.0.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prefer-object-spread": "^1.2.1",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.23.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "iniparser": "^1.0.5",
     "null-loader": "^4.0.1",
-    "prettier": "^2.2.1",
-    "serve": "^11.3.2",
-    "typescript": "^4.2.4"
+    "prettier": "^2.5.0",
+    "serve": "^13.0.2",
+    "typescript": "^4.5.2"
   }
 }

src/components/chrome/theme_switcher.tsx

@@ -51,7 +51,7 @@ const ThemeSwitcher: FunctionComponent = () => {
       closePopover={() => setPopoverOpen(false)}
       panelPaddingSize="none"
       anchorPosition="downLeft">
-      <EuiPopoverTitle>Theme options</EuiPopoverTitle>
+      <EuiPopoverTitle paddingSize="s">Theme options</EuiPopoverTitle>
       <EuiContextMenuPanel items={items} />
     </EuiPopover>
   );

src/components/my_component.tsx

@@ -7,7 +7,7 @@ import NextEuiButton from './next_eui/button';
  * in another. This component also demonstrates routing using a button.
  */
 const MyComponent: FunctionComponent = () => (
-  <Link href="/page-2">
+  <Link href="/page-2" passHref>
     <NextEuiButton>Go to example page 2</NextEuiButton>
   </Link>
 );

src/pages/404.tsx

@@ -12,7 +12,7 @@ const NotFoundPage: FunctionComponent = () => (
       </Fragment>
     }
     actions={
-      <Link href="/">
+      <Link href="/" passHref>
         <EuiButton color="primary" fill>
           Go Home
         </EuiButton>

tsconfig.json

@@ -21,7 +21,8 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "incremental": true
   },
   "include": [
     "./src/**/*"