1685/upgrade to next 11

CHANGELOG.md

@@ -20,6 +20,7 @@ All notable changes to this project will be documented in this file. The format
   - Add new /unauthorized page ([#1763](https://github.com/bloom-housing/bloom/pull/1763)) (Dominik Barcikowski)
 
 - Fixed:
+
   - Update Listings component to sort listings by status ([#1585](https://github.com/bloom-housing/bloom/pull/1585))
   - Preferences ordinal bug in listings management ([#1641](https://github.com/bloom-housing/bloom/pull/1641)) (Emily Jablonski)
   - Updates EnumListingReviewOrderType to be ListingReviewOrder ([#1679](https://github.com/bloom-housing/bloom/pull/1679))
@@ -29,6 +30,11 @@ All notable changes to this project will be documented in this file. The format
   - Update unit availability field ([#1767](https://github.com/bloom-housing/bloom/pull/1767)) (Dominik Barcikowski)
   - Update select width ([#1765](https://github.com/bloom-housing/bloom/pull/1765)) (Dominik Barcikowski)
 
+- Changed:
+
+  - Upgrade the public and partners sites to Next v11 and React v17 ([#1793](https://github.com/bloom-housing/bloom/pull/1793)) (Jared White)
+    - **Breaking Change**
+
 ### UI Components
 
 - Added:
@@ -43,6 +49,8 @@ All notable changes to this project will be documented in this file. The format
   - More robust Features section for public listing view ([#1688](https://github.com/bloom-housing/bloom/pull/1688))
 
 - Changed:
+
+  - Upgraded React to v17
   - StandardTable new optional prop to translate cell content ([#1707](https://github.com/bloom-housing/bloom/pull/1707)) (Emily Jablonski)
   - Removed business logic from ListingsList component ([#1752](https://github.com/bloom-housing/bloom/pull/1752)) (Emily Jablonski)
     - **Breaking Change**: Removed listings prop and replaced with children and a listingsCount prop

package.json

@@ -55,8 +55,8 @@
     "lerna": "^3.22.1",
     "lint-staged": "^10.4.0",
     "prettier": "^2.1.0",
-    "react": "16.13.1",
-    "react-test-renderer": "16.13.1",
+    "react": "^17.0.2",
+    "react-test-renderer": "^17.0.2",
     "rimraf": "^3.0.2",
     "ts-jest": "^26.4.1",
     "typescript": "^3.9.7",

sites/partners/next-env.d.ts

@@ -1,2 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

sites/partners/next.config.js

@@ -1,13 +1,13 @@
 /* eslint-env node */
 /* eslint-disable @typescript-eslint/no-var-requires */
 
-const withTM = require("next-transpile-modules")(["@bloom-housing"])
-const withSass = require("@zeit/next-sass")
-const withCSS = require("@zeit/next-css")
+const withTM = require("next-transpile-modules")([
+  "@bloom-housing/ui-components",
+  "@bloom-housing/backend-core",
+])
 const withBundleAnalyzer = require("@next/bundle-analyzer")({
   enabled: process.env.ANALYZE === "true",
 })
-const withMDX = require("@next/mdx")()
 
 if (process.env.NODE_ENV !== "production") {
   require("dotenv").config()
@@ -31,32 +31,33 @@ const tailwindVars = require("@bloom-housing/ui-components/tailwind.tosass.js")(
 
 // Tell webpack to compile the ui components package
 // https://www.npmjs.com/package/next-transpile-modules
-module.exports = withCSS(
-  withBundleAnalyzer(
-    withMDX(
-      withSass(
-        withTM({
-          target: "serverless",
-          env: {
-            backendApiBase: BACKEND_API_BASE,
-            listingServiceUrl: BACKEND_API_BASE + LISTINGS_QUERY,
-            idleTimeout: process.env.IDLE_TIMEOUT,
-            showDuplicates: process.env.SHOW_DUPLICATES === "TRUE",
-            publicBaseUrl: process.env.PUBLIC_BASE_URL,
-            cloudinaryCloudName: process.env.CLOUDINARY_CLOUD_NAME,
-            cloudinaryKey: process.env.CLOUDINARY_KEY,
-            cloudinarySignedPreset: process.env.CLOUDINARY_SIGNED_PRESET,
-            mapBoxToken: MAPBOX_TOKEN,
-          },
-          i18n: {
-            locales: process.env.LANGUAGES ? process.env.LANGUAGES.split(",") : ["en"],
-            defaultLocale: "en",
-          },
-          sassLoaderOptions: {
-            additionalData: tailwindVars,
-          },
-        })
-      )
-    )
-  )
+module.exports = withBundleAnalyzer(
+  withTM({
+    target: "serverless",
+    env: {
+      backendApiBase: BACKEND_API_BASE,
+      listingServiceUrl: BACKEND_API_BASE + LISTINGS_QUERY,
+      idleTimeout: process.env.IDLE_TIMEOUT,
+      showDuplicates: process.env.SHOW_DUPLICATES === "TRUE",
+      publicBaseUrl: process.env.PUBLIC_BASE_URL,
+      cloudinaryCloudName: process.env.CLOUDINARY_CLOUD_NAME,
+      cloudinaryKey: process.env.CLOUDINARY_KEY,
+      cloudinarySignedPreset: process.env.CLOUDINARY_SIGNED_PRESET,
+      mapBoxToken: MAPBOX_TOKEN,
+    },
+    i18n: {
+      locales: process.env.LANGUAGES ? process.env.LANGUAGES.split(",") : ["en"],
+      defaultLocale: "en",
+    },
+    sassOptions: {
+      additionalData: tailwindVars,
+    },
+    webpack: (config) => {
+      config.module.rules.push({
+        test: /\.md$/,
+        type: "asset/source",
+      })
+      return config
+    },
+  })
 )

sites/partners/package.json

@@ -27,13 +27,13 @@
     "electron": "^13.1.7",
     "moment": "^2.29.1",
     "nanoid": "^3.1.12",
-    "next": "^10.1.0",
+    "next": "^11.1.1",
     "next-plugin-custom-babel-config": "^1.0.2",
     "node-polyglot": "^2.4.0",
     "node-sass": "^4.14.1",
     "qs": "^6.10.1",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-hook-form": "^6.9.2",
     "swr": "^0.3.5"
   },
@@ -49,7 +49,7 @@
     "concurrently": "^5.3.0",
     "cypress": "^4.12.1",
     "js-levenshtein": "^1.1.6",
-    "next-transpile-modules": "^4.1.0",
+    "next-transpile-modules": "^8.0.0",
     "sass-loader": "^10.0.3",
     "typescript": "^3.9.7",
     "webpack": "^4.44.2"

sites/partners/postcss.config.js

@@ -1,5 +1,5 @@
 /*eslint-env node*/
 
 module.exports = {
-  plugins: [require("tailwindcss"), require("autoprefixer")],
+  plugins: ["tailwindcss", "autoprefixer"],
 }

sites/partners/src/listings/PaperListingForm/sections/ListingPhoto.tsx

@@ -140,9 +140,12 @@ const ListingPhoto = () => {
     <>
       <input type="hidden" {...register("image.fileId")} />
       <input type="hidden" {...register("image.label")} />
-      <GridSection grid={false} separator>
-        <span className="form-section__title">{t("listings.sections.photoTitle")}</span>
-        <span className="form-section__description">{t("listings.sections.photoSubtitle")}</span>
+      <GridSection
+        grid={false}
+        separator
+        title={t("listings.sections.photoTitle")}
+        description={t("listings.sections.photoSubtitle")}
+      >
         <GridSection columns={1} tinted inset>
           <GridCell>
             {listingFormPhoto?.fileId && listingFormPhoto.fileId != "" ? (

sites/public/lib/AppSubmissionContext.ts

@@ -1,4 +1,4 @@
-import React from "react"
+import { createContext } from "react"
 import ApplicationConductor from "./ApplicationConductor"
 import { blankApplication } from "@bloom-housing/ui-components"
 import { Listing } from "@bloom-housing/backend-core/types"
@@ -73,7 +73,7 @@ export const retrieveApplicationConfig = () => {
   }
 }
 
-export const AppSubmissionContext = React.createContext({
+export const AppSubmissionContext = createContext({
   conductor: {} as ApplicationConductor,
   application: blankApplication(),
   listing: null as Listing,

sites/public/next-env.d.ts

@@ -1,2 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

sites/public/next.config.js

@@ -1,13 +1,14 @@
 /* eslint-env node */
 /* eslint-disable @typescript-eslint/no-var-requires */
 
-const withTM = require("next-transpile-modules")(["@bloom-housing"])
-const withSass = require("@zeit/next-sass")
-const withCSS = require("@zeit/next-css")
+const withTM = require("next-transpile-modules")([
+  "@bloom-housing/ui-components",
+  "@bloom-housing/backend-core",
+])
 const withBundleAnalyzer = require("@next/bundle-analyzer")({
   enabled: process.env.ANALYZE === "true",
 })
-const withMDX = require("@next/mdx")()
+
 if (process.env.NODE_ENV !== "production") {
   require("dotenv").config()
 }
@@ -31,35 +32,34 @@ const tailwindVars = require("@bloom-housing/ui-components/tailwind.tosass.js")(
 
 // Tell webpack to compile the ui components package
 // https://www.npmjs.com/package/next-transpile-modules
-module.exports = withCSS(
-  withBundleAnalyzer(
-    withMDX(
-      withSass(
-        withTM({
-          target: "serverless",
-          env: {
-            backendApiBase: BACKEND_API_BASE,
-            listingServiceUrl: BACKEND_API_BASE + LISTINGS_QUERY,
-            listingPhotoSize: process.env.LISTING_PHOTO_SIZE || "1302",
-            mapBoxToken: MAPBOX_TOKEN,
-            housingCounselorServiceUrl: HOUSING_COUNSELOR_SERVICE_URL,
-            gtmKey: process.env.GTM_KEY || null,
-            idleTimeout: process.env.IDLE_TIMEOUT,
-            jurisdictionName: process.env.JURISDICTION_NAME,
-            cacheRevalidate: process.env.CACHE_REVALIDATE
-              ? Number(process.env.CACHE_REVALIDATE)
-              : 60,
-            cloudinaryCloudName: process.env.CLOUDINARY_CLOUD_NAME,
-          },
-          i18n: {
-            locales: process.env.LANGUAGES ? process.env.LANGUAGES.split(",") : ["en"],
-            defaultLocale: "en",
-          },
-          sassLoaderOptions: {
-            additionalData: tailwindVars,
-          },
-        })
-      )
-    )
-  )
+module.exports = withBundleAnalyzer(
+  withTM({
+    target: "serverless",
+    env: {
+      backendApiBase: BACKEND_API_BASE,
+      listingServiceUrl: BACKEND_API_BASE + LISTINGS_QUERY,
+      listingPhotoSize: process.env.LISTING_PHOTO_SIZE || "1302",
+      mapBoxToken: MAPBOX_TOKEN,
+      housingCounselorServiceUrl: HOUSING_COUNSELOR_SERVICE_URL,
+      gtmKey: process.env.GTM_KEY || null,
+      idleTimeout: process.env.IDLE_TIMEOUT,
+      jurisdictionName: process.env.JURISDICTION_NAME,
+      cacheRevalidate: process.env.CACHE_REVALIDATE ? Number(process.env.CACHE_REVALIDATE) : 60,
+      cloudinaryCloudName: process.env.CLOUDINARY_CLOUD_NAME,
+    },
+    i18n: {
+      locales: process.env.LANGUAGES ? process.env.LANGUAGES.split(",") : ["en"],
+      defaultLocale: "en",
+    },
+    sassOptions: {
+      additionalData: tailwindVars,
+    },
+    webpack: (config) => {
+      config.module.rules.push({
+        test: /\.md$/,
+        type: "asset/source",
+      })
+      return config
+    },
+  })
 )

sites/public/package.json

@@ -20,20 +20,18 @@
   },
   "dependencies": {
     "@bloom-housing/ui-components": "^1.0.5",
-    "@mdx-js/loader": "1.6.18",
-    "@next/mdx": "^10.1.0",
     "axios": "^0.21.1",
     "dotenv": "^8.2.0",
     "moment": "^2.29.1",
     "nanoid": "^3.1.12",
-    "next": "^10.1.0",
+    "next": "^11.1.1",
     "next-plugin-custom-babel-config": "^1.0.2",
     "node-polyglot": "^2.4.0",
     "node-sass": "^4.14.1",
     "openapi-client-axios": "^3.6.2",
     "qs": "^6.10.1",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-hook-form": "^6.9.2",
     "swr": "^0.5.5"
   },
@@ -45,7 +43,7 @@
     "concurrently": "^5.3.0",
     "cypress": "^4.12.1",
     "js-levenshtein": "^1.1.6",
-    "next-transpile-modules": "^4.1.0",
+    "next-transpile-modules": "^8.0.0",
     "sass-loader": "^10.0.3",
     "typescript": "^3.9.7",
     "webpack": "^4.44.2"

sites/public/pages/applications/contact/address.tsx

@@ -3,7 +3,6 @@
 Primary applicant contact information
 https://github.com/bloom-housing/bloom/issues/256
 */
-import React from "react"
 import {
   AppearanceStyleType,
   AlertBox,

sites/public/pages/applications/contact/alternate-contact-contact.tsx

@@ -2,7 +2,6 @@
 1.4 - Alternate Contact
 Type of alternate contact
 */
-import React from "react"
 import {
   AppearanceStyleType,
   AlertBox,

sites/public/pages/applications/contact/alternate-contact-name.tsx

@@ -2,7 +2,6 @@
 1.4 - Alternate Contact
 Type of alternate contact
 */
-import React from "react"
 import {
   AppearanceStyleType,
   AlertBox,

sites/public/pages/applications/financial/vouchers.tsx

@@ -2,7 +2,6 @@
 3.1 Vouchers Subsidies
 Question asks if anyone on the application receives a housing voucher or subsidy.
 */
-import React from "react"
 import {
   AppearanceStyleType,
   AlertBox,

sites/public/pages/applications/household/ada.tsx

@@ -3,7 +3,6 @@
 If any, the applicant can select the type of ADA needed in the household.
 https://github.com/bloom-housing/bloom/issues/266
 */
-import React from "react"
 import {
   AppearanceStyleType,
   AlertBox,

sites/public/pages/applications/household/add-members.tsx

@@ -2,7 +2,6 @@
 2.2 - Add Members
 Add household members
 */
-import React from "react"
 import { useRouter } from "next/router"
 import {
   AppearanceStyleType,

sites/public/pages/applications/household/members-info.tsx

@@ -2,7 +2,6 @@
 2.1a - Member Info
 A notice regarding adding household members
 */
-import React from "react"
 import { useRouter } from "next/router"
 import {
   AppearanceStyleType,

sites/public/pages/applications/household/preferred-units.tsx

@@ -2,7 +2,6 @@
 2.3.2 - Preferred Unit Size
 Applicant can designate which unit sizes they prefer
 */
-import React from "react"
 import {
   AppearanceStyleType,
   AlertBox,

sites/public/pages/applications/review/summary.tsx

@@ -2,7 +2,6 @@
 5.2 Summary
 Display a summary of application fields with edit links per section
 */
-import React from "react"
 import {
   AppearanceStyleType,
   Button,