Fix dev container's outdated node version

.devcontainer/Dockerfile

@@ -1,7 +1,7 @@
 # See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.234.0/containers/typescript-node/.devcontainer/base.Dockerfile
 
 # Use the bullseye (Debian) image for compatibility with ARM/Apple Silicon.
-ARG VARIANT="16-bullseye"
+ARG VARIANT="20-bullseye"
 FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:0-${VARIANT}
 
 RUN apt-get update && apt-get install -y openjdk-11-jdk \

.devcontainer/devcontainer.json

@@ -11,6 +11,7 @@
   "customizations": {
     "vscode": {
       "settings": {},
+      "workspaceFolder":"${containerWorkspaceFolder}",
       // Add the IDs of extensions you want installed when the container is created.
       "extensions": [
         "dbaeumer.vscode-eslint",
@@ -35,6 +36,49 @@
     9150,
     9199
   ],
+  "portsAttributes": {
+    // Application and Storybook
+    "3000": {
+      "label": "Website Application",
+      "onAutoForward": "openBrowser"
+    },
+    "6006": {
+      "label": "Storybook",
+      "onAutoForward": "openBrowser"
+    },
+    // Local Firebase Emulator Suite
+    "4000": {
+      "label": "Firebase Emulator Suite UI Application",
+      "onAutoForward": "openBrowser"
+    },
+    "4400": {
+      "label": "Firebase Emulator Suite UI Hub"
+    },
+    "4500": {
+      "label": "Firebase Emulator Suite UI Logging"
+    },
+    "5000": {
+      "label": "Firebase Hosting"
+    },
+    "5001": {
+      "label": "Firebase Functions"
+    },
+    "8080": {
+      "label": "Firebase Firestore"
+    },
+    "9005": {
+      "label": "Firebase Emulator Suite UI Reserved Port"
+    },
+    "9099": {
+      "label": "Firebase Authentication"
+    },
+    "9150": {
+      "label": "Firebase Emulator Suite UI Websocket"
+    },
+    "9199": {
+      "label": "Firebase Storage"
+    }
+  },
   // Use 'postCreateCommand' to run commands after the container is created.
   "postCreateCommand": "./.devcontainer/scripts/start.sh",
   // Change to `"node"` to connect as non-root user instead. More info: https://aka.ms/vscode-remote/containers/non-root.

.github/workflows/chromatic.yml

@@ -13,7 +13,7 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
       - name: Install dependencies
         run: yarn
       - name: Publish to Chromatic

.github/workflows/eslint.yml

@@ -24,7 +24,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [20.x]
     permissions:
       contents: read
       security-events: write
@@ -35,7 +35,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
       - name: Install ESLint
         run: |
           yarn add [email protected]

.github/workflows/jest.yml

@@ -16,7 +16,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
           cache: 'yarn'
       - run: yarn install
       - run: yarn test:ci

next.config.js

@@ -16,48 +16,4 @@ module.exports = {
     removeConsole: true,
   },
   transpilePackages: ['@mui/system', '@mui/material', '@mui/icons-material','@mui/styles'],
-  modularizeImports: {
-    '@mui/material/?(((\\w*)?/?)*)': {
-      transform: '@mui/material/{{ matches.[1] }}/{{member}}',
-    },
-    '@mui/icons-material/?(((\\w*)?/?)*)': {
-      transform: '@mui/icons-material/{{ matches.[1] }}/{{member}}',
-    },
-    '@mui/styles/?(((\\w*)?/?)*)':{
-      transform: '@mui/styles/{{ matches.[1] }}/{{member}}'
-    },
-    async headers() {
-      return [
-        {
-          source: '/:path*',
-          headers: [
-            {
-              key: 'X-DNS-Prefetch-Control',
-              value: 'on',
-            },
-            {
-              key: 'Strict-Transport-Security',
-              value: 'max-age=63072000; includeSubDomains; preload',
-            },
-            {
-              key: 'X-XSS-Protection',
-              value: '1; mode=block',
-            },
-            {
-              key: 'X-Frame-Options',
-              value: 'SAMEORIGIN',
-            },
-            {
-              key: 'X-Content-Type-Options',
-              value: 'nosniff',
-            },
-            {
-              key: 'Referrer-Policy',
-              value: 'origin-when-cross-origin',
-            },
-          ],
-        },
-      ];
-    },
-  },
 };

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "engines": {
-    "node": ">=14.0.0 <17.0.0",
+    "node": ">=20.0",
     "yarn": ">=1.22.0",
     "npm": "please-use-yarn"
   },
@@ -41,9 +41,9 @@
     "firebase": "^9.15.0",
     "html-to-image": "^1.11.11",
     "isomorphic-dompurify": "^1.8.0",
-    "next": "13.4.12",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "next": "^14.2.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-hook-form": "^7.45.2",
     "react-markdown": "^8.0.5",
     "rehype-raw": "^6.1.1",
@@ -74,7 +74,7 @@
     "cross-env": "^7.0.3",
     "cz-conventional-changelog": "3.3.0",
     "eslint": "8.50.0",
-    "eslint-config-next": "^13.1.3",
+    "eslint-config-next": "^14.2.3",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-storybook": "^0.6.11",
     "husky": "^8.0.3",