fix: upgrade to typescript 5.1 to allow for async components

TrialAndErrorOrg · May 8, 2023 · 553c9fc · 553c9fc
1 parent afeb6aa
commit 553c9fc
Show file tree

Hide file tree

Showing 5 changed files with 581 additions and 768 deletions.
diff --git a/apps/trialanderror.org/src/app/layout.tsx b/apps/trialanderror.org/src/app/layout.tsx
@@ -1,13 +1,13 @@
-import { NextSeo, NextSeoProps } from 'next-seo';
-import Link from 'next/link';
-import { AnalyticsWrapper } from './components/Analytics';
-import { Footer } from './components/Footer';
-import { Overpass, Open_Sans } from '@next/font/google';
+import { NextSeo, NextSeoProps } from 'next-seo'
+import Link from 'next/link'
+import { AnalyticsWrapper } from './components/Analytics'
+import { Footer } from './components/Footer'
+import { Overpass, Open_Sans } from '@next/font/google'
 
-import '../styles/globals.css';
-import { Nav } from './components/Nav';
-import Script from 'next/script';
-import { env } from '../env/server.mjs';
+import '../styles/globals.css'
+import { Nav } from './components/Nav'
+import Script from 'next/script'
+import { env } from '../env/server.mjs'
 // If loading a variable font, you don't need to specify the font weight
 const overpass = Overpass({
   //weight: ['600', '900'],
@@ -16,7 +16,7 @@ const overpass = Overpass({
   variable: '--font-overpass',
   // default, can also use "swap" to ensure custom font always shows
   display: 'swap',
-});
+})
 
 const open_sans = Open_Sans({
   //weight: ['400', '600'],
@@ -25,9 +25,9 @@ const open_sans = Open_Sans({
   variable: '--font-open-sans',
   // default, can also use "swap" to ensure custom font always shows
   display: 'swap',
-});
+})
 
-export const ogURL = `${env.OG_URL}/api/og/jote`;
+export const ogURL = `${env.OG_URL}/api/og/jote`
 
 // next-seo.config.js
 export const SEO = (
@@ -43,7 +43,7 @@ export const SEO = (
     locale = 'en_US',
     alt = '',
   } = {},
-  otherProps?: NextSeoProps
+  otherProps?: NextSeoProps,
 ) => (
   <NextSeo
     {...{
@@ -60,13 +60,9 @@ export const SEO = (
           {
             url:
               image ||
-              `${ogURL}?title=${encodeURIComponent(
-                ogTitle || title
-              )}&author=${encodeURIComponent(
-                description ?? '%20'
-              )}&name=${encodeURIComponent(
-                !canonical ? '' : 'Center of Trial and Error'
-              )}`,
+              `${ogURL}?title=${encodeURIComponent(ogTitle || title)}&author=${encodeURIComponent(
+                description ?? '%20',
+              )}&name=${encodeURIComponent(!canonical ? '' : 'Center of Trial and Error')}`,
             width: 1200,
             height: 630,
             alt,
@@ -83,45 +79,25 @@ export const SEO = (
       ...otherProps,
     }}
   />
-);
+)
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en" className={`${open_sans.variable} ${overpass.variable}`}>
       <head>
         <meta charSet="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link
-          rel="apple-touch-icon"
-          sizes="180x180"
-          href="/apple-touch-icon.png"
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="32x32"
-          href="/favicon-32x32.png"
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="16x16"
-          href="/favicon-16x16.png"
-        />
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
         <link rel="manifest" href="/site.webmanifest" />
         <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#002642" />
         <meta name="msapplication-TileColor" content="#002642" />
         <meta name="theme-color" content="#ffffff" />
       </head>
       <body>
-        {/* @ts-expect-error TODO: fix once Typescript is able to deal with async components or Next's typescript plugin is less ass */}
         <Nav />
         {children}
-        {/* @ts-expect-error TODO: fix once Typescript is able to deal with async components or Next's typescript plugin is less ass */}
         <Footer />
         <AnalyticsWrapper />
         <Script
@@ -132,5 +108,5 @@ export default function RootLayout({
         />
       </body>
     </html>
-  );
+  )
 }
diff --git a/apps/trialanderror.org/src/types.d.ts b/apps/trialanderror.org/src/types.d.ts
@@ -0,0 +1,8 @@
+import { ReactNode } from 'react'
+declare global {
+  namespace JSX {
+    type ElementType =
+      | keyof JSX.IntrinsicElements
+      | ((props: any) => Promise<ReactNode> | ReactNode)
+  }
+}
diff --git a/migrations.json b/migrations.json
diff --git a/package.json b/package.json
@@ -59,7 +59,7 @@
     "github-slugger": "^2.0.0",
     "image-size": "^1.0.2",
     "mime": "^3.0.0",
-    "next": "13.3.5-canary.12",
+    "next": "13.4.1-canary.2",
     "next-auth": "^4.22.1",
     "next-compose-plugins": "^2.2.1",
     "next-seo": "^6.0.0",
@@ -101,19 +101,19 @@
     "@jscutlery/semver": "^2.30.1",
     "@next/bundle-analyzer": "^13.4.0",
     "@nx-extend/strapi": "^3.5.1",
-    "@nx/cypress": "16.0.3",
-    "@nx/devkit": "16.0.3",
-    "@nx/eslint-plugin": "16.0.3",
-    "@nx/jest": "16.0.3",
-    "@nx/js": "16.0.3",
-    "@nx/linter": "16.0.3",
-    "@nx/next": "16.0.3",
-    "@nx/node": "16.0.3",
-    "@nx/plugin": "16.0.3",
-    "@nx/react": "16.0.3",
-    "@nx/storybook": "16.0.3",
-    "@nx/web": "16.0.3",
-    "@nx/workspace": "16.0.3",
+    "@nx/cypress": "16.1.1",
+    "@nx/devkit": "16.1.1",
+    "@nx/eslint-plugin": "16.1.1",
+    "@nx/jest": "16.1.1",
+    "@nx/js": "16.1.1",
+    "@nx/linter": "16.1.1",
+    "@nx/next": "16.1.1",
+    "@nx/node": "16.1.1",
+    "@nx/plugin": "16.1.1",
+    "@nx/react": "16.1.1",
+    "@nx/storybook": "16.1.1",
+    "@nx/web": "16.1.1",
+    "@nx/workspace": "16.1.1",
     "@nxtensions/astro": "^3.5.0",
     "@storybook/addon-essentials": "7.0.8",
     "@storybook/builder-vite": "^7.0.8",
@@ -137,7 +137,7 @@
     "@types/lodash": "^4.14.194",
     "@types/mdast": "^3.0.11",
     "@types/node": "18.16.3",
-    "@types/react": "18.2.5",
+    "@types/react": "18.2.6",
     "@types/react-dom": "18.2.3",
     "@typescript-eslint/eslint-plugin": "5.59.2",
     "@typescript-eslint/parser": "5.59.2",
@@ -147,7 +147,7 @@
     "autoprefixer": "^10.4.14",
     "babel-jest": "29.5.0",
     "babel-loader": "9.1.2",
-    "cypress": "^12.2.0",
+    "cypress": "12.11.0",
     "eslint": "~8.39.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
@@ -169,7 +169,7 @@
     "jest-environment-jsdom": "29.5.0",
     "jsonc-eslint-parser": "^2.1.0",
     "limax": "^4.0.0",
-    "nx": "16.0.3",
+    "nx": "16.1.1",
     "nx-cloud": "16.0.5",
     "postcss": "^8.4.23",
     "prettier": "^2.8.8",
@@ -185,7 +185,7 @@
     "ts-node": "10.9.1",
     "tsconfig-paths": "^4.2.0",
     "tsx": "^3.12.7",
-    "typescript": "^5.0.4",
+    "typescript": "5.1.0-beta",
     "url-loader": "^4.1.1",
     "webpack-cli": "^5.0.2"
   },