spike: update node 16 to node 18

.circleci/config.yml

@@ -12,8 +12,6 @@ version: 2.1
 #  Orbs - preconfigured environments for running specific jobs
 ######################################################################################################
 
-# node: circleci/node@4.1.0
-# cypress: cypress-io/cypress@1
 orbs:
   # for use with cimg image, to install web browsers
   browser-tools: circleci/browser-tools@1.1.3
@@ -24,9 +22,21 @@ orbs:
 #  Aliases - code snippets that can be included inline in any other markup
 ######################################################################################################
 aliases:
-  # use a base image running node v16 with chrome/firefox browsers preinstalled
+  # use a base image running node v18 with chrome/firefox browsers preinstalled
+  # This can be applied to any job via `docker: *docker` syntax
   - &docker
-    - image: cimg/node:16.13.1-browsers
+    - image: cimg/node:18.13.0-browsers
+
+  # Use base image with support for node version parameter and matrix
+  # This can be applied to any job via `<<: *docker_matrix` syntax
+  - docker_matrix: &docker_matrix
+      parameters:
+        node-version:
+          type: string
+          default: 18.13.0-browsers
+      docker:
+        - image: cimg/node:<< parameters.node-version >>
+
     # These can also be created as commands, but slighly tidier to just use inline
     # restore/install/save can all be done with a single circle-ci orb, but less flexible and breaks intellisense
   - &restore_yarn_cache
@@ -270,13 +280,16 @@ jobs:
           name: Install dependencies
           command: yarn workspaces focus one-army-community-platform
       - run:
-          command: yarn build:components && yarn run test:unit
+          # NOTE - run-in-band to try reduce memory leaks (https://github.com/facebook/jest/issues/7874)
+          command: yarn build:components && yarn run test:unit:ci
   build:
-    docker: *docker
+    <<: *docker_matrix
     environment:
       GENERATE_SOURCEMAP: 'false'
       SKIP_PREFLIGHT_CHECK: 'true'
-    # `medium` is the max allowed size for free builds (helps with out-of-memory issues) - https://circleci.com/docs/2.0/configuration-reference/#resourceclass
+      NODE_OPTIONS: '--max-old-space-size=5632'
+    # If experiencing out-of-memory issues can increase resource_class below and max space size above
+    # https://circleci.com/docs/2.0/configuration-reference/#resourceclass
     resource_class: medium+
     steps:
       # whilst checkout-install could be persisted from previous step, that is less efficient than just using caching
@@ -291,12 +304,11 @@ jobs:
           name: Set branch environment
           command: |
             echo 'export REACT_APP_BRANCH=${CIRCLE_BRANCH}' >> $BASH_ENV
-            echo 'export NODE_OPTIONS=--max-old-space-size=4096' >> $BASH_ENV
             echo 'export REACT_APP_PROJECT_VERSION=${CIRCLE_SHA1}' >> $BASH_ENV
       - run:
           name: Check environment variables
           command: |
-            echo REACT_APP_BRANCH=$REACT_APP_BRANCH NODE_OPTIONS=$NODE_OPTIONS
+            echo REACT_APP_BRANCH=$REACT_APP_BRANCH
             echo $REACT_APP_PROJECT_VERSION
       - run:
           command: yarn build
@@ -306,7 +318,7 @@ jobs:
             - build
   storybook:
     docker: *docker
-    resource_class: medium+
+    resource_class: medium
     steps:
       - setup_repo
       - attach_workspace:
@@ -428,6 +440,17 @@ workflows:
             - 'Lint code'
           name: Build Application
           context: build-context
+      - build:
+          requires:
+            - 'Lint code'
+          # Main build/deploy runs on LTS node, however still check compatibility for local dev work on other versions
+          name: Build Application (Node << matrix.node-version >>)
+          context: build-context
+          matrix:
+            parameters:
+              node-version:
+                - '16.13.1-browsers'
+                - 'current-browsers' # latest version supported https://circleci.com/developer/images/image/cimg/node
       - test_unit:
           name: 'Unit tests'
           requires:

.env-cmdrc.js

@@ -0,0 +1,46 @@
+// Run a pre-flight check that developer environment setup in compatible way
+const { envCheck } = require('./scripts/envCheck')
+if (!process.env.CI) {
+  envCheck()
+}
+
+// Specific settings to use when running anything that requires a webpack compiler
+// Enabled when npm command specifies `env-cmd -e webpack`
+let webpack = {
+  NODE_OPTIONS: getNodeOptions(),
+}
+
+// Specific env to use with react-scripts / create-react-app
+// Enabled when npm command specifies `env-cmd -e cra`
+let cra = {
+  ...webpack,
+  FAST_REFRESH: false,
+}
+
+exports.cra = cra
+exports.webpack = webpack
+
+/** Determine what node_options to provide depending on context */
+function getNodeOptions() {
+  // Depending on node version use different environment variables to fix
+  // specific build or run issues
+  const NODE_VERSION = process.versions.node.split('.')[0]
+
+  let NODE_OPTIONS = process.env.NODE_OPTIONS || ''
+
+  // fix out-of-memory issues - default to 4GB but allow override from CI
+  // NOTE - would like to auto-calculate but does not support CI (https://github.com/nodejs/node/issues/27170)
+  if (!NODE_OPTIONS.includes('--max-old-space-size')) {
+    NODE_OPTIONS += ` --max-old-space-size=4096`
+  }
+  if (NODE_VERSION > '17') {
+    // fix https://github.com/facebook/create-react-app/issues/11708
+    // https://github.com/facebook/create-react-app/issues/12431
+    NODE_OPTIONS += ' --openssl-legacy-provider --no-experimental-fetch'
+  }
+
+  if (process.env.CI) {
+    console.log('NODE_OPTIONS', NODE_OPTIONS, '\n')
+  }
+  return NODE_OPTIONS.trim()
+}

.github/workflows/pr-preview.yml

@@ -27,9 +27,9 @@ jobs:
         with:
           # pull the repo from the pull request source, not the default local repo
           ref: ${{ github.event.pull_request.head.sha }}
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '18'
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn config get cacheFolder)"

.github/workflows/reset-staging-site.yml

@@ -4,7 +4,7 @@ name: Reset Staging Site
 on:
   # Run weekly on a Sunday at 02:00
   schedule:
-    - cron: "0 0 * * SUN"
+    - cron: '0 0 * * SUN'
   # Allow the script to be triggered directly from GitHub
   workflow_dispatch:
 jobs:
@@ -16,7 +16,7 @@ jobs:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
       - name: Set up Cloud SDK
         uses:
           google-github-actions/setup-gcloud@master

.gitignore

@@ -32,7 +32,6 @@ yarn-error.log*
 # IntelliJ
 /.idea
 functions/firebase-debug.log
-.env-*
 
 # https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
 .yarn/*

.gitpod.yml

@@ -1,4 +1,4 @@
-image: node:16
+image: node:18
 tasks:
   - init: yarn install && yarn run build
     command: yarn run start
@@ -10,4 +10,4 @@ ports:
 
 github:
   prebuilds:
-    branches: true  
+    branches: true

.node-version

@@ -1 +1 @@
-16.13.1
+18.13.0

.nvmrc

@@ -1 +1 @@
-16
+18

CONTRIBUTING.md

@@ -45,7 +45,7 @@ You can find useful links to learn more about these technologies [in the resourc
 
 **Prerequisites**
 
-- [Node.js v16](https://nodejs.org/en/download/)
+- [Node.js v18](https://nodejs.org/en/download/)
 - [Yarn v3](https://yarnpkg.com/getting-started/install)
 
 With the above tools available, you are ready:

craco.config.ts

@@ -0,0 +1,68 @@
+import type { WebpackConfigOverride } from '@craco/types'
+import { DefinePlugin, ProvidePlugin } from 'webpack'
+import type { RuleSetRule } from 'webpack'
+
+/**
+ * Craco is used to provide config overrides to the default webpack config that is called
+ * from react-scripts.
+ */
+module.exports = {
+  webpack: {
+    configure: (webpackConfig: WebpackConfigOverride['webpackConfig']) => {
+      // Add polyfills for node (mostly imports for pino-logflare)
+      // https://github.com/facebook/create-react-app/issues/11756
+      // https://stackoverflow.com/questions/68707553/uncaught-referenceerror-buffer-is-not-defined
+      webpackConfig.resolve!.fallback = {
+        stream: require.resolve('stream-browserify'),
+        buffer: require.resolve('buffer'),
+      }
+      webpackConfig.module!.rules = hackUpdateRulesToSupportCJS(
+        webpackConfig.module!.rules as RuleSetRule[],
+      )
+      webpackConfig.plugins = [
+        ...(webpackConfig.plugins as any[]),
+        // Fix calls to process (pino-logflare and cypress calling db.ts outside of cra)
+        // NOTE - react creates 'process.env' variable but does not assign anything to 'process'
+        // https://github.com/facebook/create-react-app/issues/11951
+        new DefinePlugin({
+          process: {},
+        }),
+        new ProvidePlugin({
+          Buffer: ['buffer', 'Buffer'],
+        }),
+      ]
+      // Fix sourcemap warning
+      // https://github.com/facebook/create-react-app/discussions/11767
+      webpackConfig.ignoreWarnings = [
+        function ignoreSourcemapsloaderWarnings(warning) {
+          return (
+            warning.module &&
+            (warning.module as any).resource.includes('node_modules') &&
+            warning.details &&
+            warning.details.includes('source-map-loader')
+          )
+        },
+      ]
+      return webpackConfig
+    },
+  },
+}
+
+/**
+ * Prepend a custom rule to support CJS files
+ *
+ * NOTE - should be resolved in future CRA release pending merge of
+ * https://github.com/facebook/create-react-app/pull/12021
+ */
+const hackUpdateRulesToSupportCJS = (rules: RuleSetRule[]) => {
+  return rules.map((rule) => {
+    if (rule.oneOf instanceof Array) {
+      rule.oneOf[rule.oneOf.length - 1].exclude = [
+        /\.(js|mjs|jsx|cjs|ts|tsx)$/,
+        /\.html$/,
+        /\.json$/,
+      ]
+    }
+    return rule
+  })
+}

functions/package.json

@@ -1,9 +1,9 @@
 {
   "name": "functions",
   "version": "1.0.0",
-  "__NOTE__:": "avoid hoisting for webpack and other conflicts (should test, might be ok now)",
-  "resolutions": {
-    "webpack": "^4.46.0"
+  "__NOTE__:": "avoid hoisting for webpack and other conflicts",
+  "installConfig": {
+    "hoistingLimits": "workspaces"
   },
   "scripts": {
     "start": "ts-node scripts/start.ts",
@@ -27,9 +27,9 @@
     "cors": "^2.8.5",
     "dateformat": "^3.0.3",
     "express": "^4.17.1",
-    "firebase-admin": "11.2.0",
-    "firebase-functions": "3.24.1",
-    "firebase-tools": "11.15.0",
+    "firebase-admin": "11.4.1",
+    "firebase-functions": "4.1.1",
+    "firebase-tools": "11.18.0",
     "fs-extra": "^9.0.1",
     "google-auth-library": "^6.1.1",
     "googleapis": "^61.0.0",
@@ -47,35 +47,29 @@
     "@types/cors": "^2.8.8",
     "@types/dateformat": "^3.0.1",
     "@types/fs-extra": "^9.0.2",
-    "@types/generate-json-webpack-plugin": "^0.3.3",
     "@types/jest": "^29.2.0",
-    "@types/node": "16",
+    "@types/node": "18",
     "@types/request": "^2.48.5",
     "@types/sharp": "^0.26.0",
     "@types/uuid": "^9.0.0",
-    "@types/webpack": "^4.41.29",
-    "@types/webpack-node-externals": "^2.5.1",
+    "@types/webpack": "^5.28.0",
+    "@types/webpack-node-externals": "^2.5.3",
     "awesome-typescript-loader": "^5.2.1",
-    "clean-webpack-plugin": "^4.0.0-alpha.0",
     "concurrently": "^6.2.0",
-    "copy-webpack-plugin": "^6.4.1",
+    "copy-webpack-plugin": "^11.0.0",
     "cross-env": "^7.0.3",
     "firebase-functions-test": "^3.0.0",
-    "generate-json-webpack-plugin": "^1.0.0",
     "jest": "29.2.2",
     "ts-jest": "29.0.3",
     "ts-node": "^10.0.0",
     "tslint": "^6.1.3",
     "typescript": "4.5.5",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^4.7.0",
+    "webpack": "5.75.0",
+    "webpack-cli": "5.0.1",
     "webpack-node-externals": "^3.0.0"
   },
   "engines": {
-    "node": "16"
-  },
-  "installConfig": {
-    "hoistingLimits": "workspaces"
+    "node": "18"
   },
   "private": true
 }