Chore/nextjs 15 upgrade (#1164)

* nextjs 15/react 19/node 20 & dependencies upgrade * cicd pipeline: updated nodejs to version 20
didx-xyz · Dec 2, 2024 · d98a68c · d98a68c
1 parent b64c569
commit d98a68c
Show file tree

Hide file tree

Showing 101 changed files with 2,194 additions and 2,944 deletions.
diff --git a/.github/workflows/cicd.yml b/.github/workflows/cicd.yml
@@ -86,7 +86,7 @@ jobs:
       - uses: actions/setup-node@v4
         if: (steps.filter.outputs.changes == 'true' || github.event_name == 'workflow_dispatch') && matrix.lang == 'js'
         with:
-          node-version: 18
+          node-version: 20
           cache: yarn
           cache-dependency-path: ${{ matrix.dir }}/yarn.lock
       - uses: actions/cache@v4
@@ -292,7 +292,7 @@ jobs:
       - uses: actions/setup-node@v4
         if: steps.should-run.outputs.run == 'true'
         with:
-          node-version: 18
+          node-version: 20
           cache: yarn
       - uses: cypress-io/github-action@v6
         if: steps.should-run.outputs.run == 'true'

diff --git a/src/web/.dockerignore b/src/web/.dockerignore
@@ -1,10 +1,12 @@
 # Ignore everything
-**
+
+\*\*
 
 # Except the following:
+
 !public/
-public/*.js
-public/*.map
+public/_.js
+public/_.map
 
 !src/
 !.env.example
@@ -14,9 +16,6 @@ public/*.map
 !package.json
 !postcss.config.cjs
 !prettier.config.cjs
-!sentry.client.config.ts
-!sentry.edge.config.ts
-!sentry.server.config.ts
 !tailwind.config.ts
 !tsconfig.json
 !yarn.lock
diff --git a/src/web/.eslintrc.cjs b/src/web/.eslintrc.cjs
@@ -1,16 +1,9 @@
-/** @type {import("eslint").Linter.Config} */
 const config = {
   root: true,
-  parser: "@typescript-eslint/parser",
   parserOptions: {
     project: true,
   },
-  plugins: ["@typescript-eslint"],
-  extends: [
-    "next/core-web-vitals",
-    "plugin:@typescript-eslint/recommended-type-checked",
-    "plugin:@typescript-eslint/stylistic-type-checked",
-  ],
+  extends: ["next", "next/core-web-vitals", "next/typescript", "prettier"],
   ignorePatterns: ["/public/**/*"],
   rules: {
     "@typescript-eslint/consistent-type-imports": [
@@ -36,6 +29,7 @@ const config = {
     "@typescript-eslint/no-floating-promises": "off",
     "@typescript-eslint/no-unsafe-return": "off",
     "@typescript-eslint/prefer-nullish-coalescing": "off",
+    "@typescript-eslint/no-empty-object-type": "off",
     "prefer-spread": "off",
   },
 };

diff --git a/src/web/.gitignore b/src/web/.gitignore
@@ -48,5 +48,3 @@ yarn-error.log*
 **/public/sw.js.map
 **/public/workbox-*.js.map
 **/public/worker-*.js.map
-# Sentry Auth Token
-.sentryclirc
diff --git a/src/web/Dockerfile b/src/web/Dockerfile
@@ -1,5 +1,5 @@
 ##### DEPENDENCIES
-FROM node:18-alpine AS deps
+FROM node:20-alpine AS deps
 RUN apk add --no-cache libc6-compat openssl
 WORKDIR /app
 
@@ -14,7 +14,7 @@ RUN \
   fi
 
 ##### BUILDER
-FROM node:18-alpine AS builder
+FROM node:20-alpine AS builder
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
@@ -29,8 +29,6 @@ ARG NEXT_PUBLIC_GOOGLE_MAPS_API_KEY
 ENV NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=${NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}
 ARG NEXT_PUBLIC_GA_MEASUREMENT_ID
 ENV NEXT_PUBLIC_GA_MEASUREMENT_ID=${NEXT_PUBLIC_GA_MEASUREMENT_ID}
-ARG SENTRY_AUTH_TOKEN
-ENV SENTRY_AUTH_TOKEN=${SENTRY_AUTH_TOKEN}
 
 RUN \
   if [ -f yarn.lock ]; then SKIP_ENV_VALIDATION=1 yarn build; \
@@ -44,7 +42,7 @@ RUN chmod -R a-w /app/.next/standalone
 RUN chmod -R a-w /app/.next/static
 
 ##### RUNNER
-FROM node:18-alpine AS runner
+FROM node:20-alpine AS runner
 WORKDIR /app
 
 ENV NODE_ENV=production

diff --git a/src/web/docker-compose.yml b/src/web/docker-compose.yml
@@ -26,5 +26,4 @@ services:
       NEXT_PUBLIC_ENVIRONMENT: local
       NEXT_PUBLIC_GOOGLE_MAPS_API_KEY: secret
       NEXT_PUBLIC_GA_MEASUREMENT_ID: secret
-      SENTRY_AUTH_TOKEN: secret
       MARKETPLACE_ENABLED: true
diff --git a/src/web/next.config.mjs b/src/web/next.config.mjs
@@ -1,5 +1,4 @@
 import withBundleAnalyzer from "@next/bundle-analyzer";
-//import { withSentryConfig } from "@sentry/nextjs";
 import withPWA from "next-pwa";
 
 const pwa = withPWA({
@@ -25,6 +24,14 @@ const config = {
   reactStrictMode: true,
   output: "standalone",
 
+  // use Turbopack instead of Webpack
+  // NB: slow and still using Webpack?
+  // experimental: {
+  //   turbo: {
+  //     loaders: {},
+  //   },
+  // },
+
   /**NB: for docker-compose, this section is needed in order to pass the server environment variables
    * to nextjs (without using a .env file in the container)
    */
@@ -78,6 +85,12 @@ const config = {
     defaultLocale: "en",
   },
 
+  // silence client-side warnings about legacy JS API
+  // https://github.com/vercel/next.js/issues/71638
+  sassOptions: {
+    silenceDeprecations: ["legacy-js-api"],
+  },
+
   async rewrites() {
     return [
       {
@@ -88,41 +101,5 @@ const config = {
   },
 };
 
-//TODO: sentry removed for now, as it is not working with the current setup
-/** sentry config */
-// export default withSentryConfig(
-//   // @ts-ignore
-//   bundleAnalyzer(pwa(config)),
-//   {
-//     // For all available options, see:
-//     // https://github.com/getsentry/sentry-webpack-plugin#options
-
-//     // Suppresses source map uploading logs during build
-//     silent: true,
-
-//     org: "yoma-sp",
-//     project: "yoma-web-v3",
-//   },
-//   {
-//     // For all available options, see:
-//     // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
-
-//     // Upload a larger set of source maps for prettier stack traces (increases build time)
-//     widenClientFileUpload: true,
-
-//     // Transpiles SDK to be compatible with IE11 (increases bundle size)
-//     transpileClientSDK: true,
-
-//     // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
-//     tunnelRoute: "/monitoring",
-
-//     // Hides source maps from generated client bundles
-//     hideSourceMaps: true,
-
-//     // Automatically tree-shake Sentry logger statements to reduce bundle size
-//     disableLogger: true,
-//   },
-// );
-
 // @ts-ignore
 export default bundleAnalyzer(pwa(config));
diff --git a/src/web/package.json b/src/web/package.json
@@ -2,6 +2,7 @@
   "name": "yoma-web",
   "version": "3.0.0",
   "private": false,
+  "license": "GPL-3.0",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
@@ -11,80 +12,80 @@
     "analyze": "cross-env ANALYZE=true next build"
   },
   "dependencies": {
-    "@fontsource/open-sans": "5.0.17",
-    "@googlemaps/js-api-loader": "1.16.2",
-    "@hookform/resolvers": "3.3.2",
-    "@mdxeditor/editor": "3.8.0",
-    "@react-google-maps/api": "2.19.2",
-    "@sentry/nextjs": "7.82.0",
-    "@t3-oss/env-nextjs": "0.7.1",
-    "@tanstack/react-query": "5.8.7",
-    "@types/file-saver": "2.0.7",
-    "axios": "1.6.2",
-    "daisyui": "4.4.11",
-    "embla-carousel-react": "8.0.0",
-    "file-saver": "2.0.5",
-    "jotai": "2.6.0",
-    "moment": "2.29.4",
-    "next": "14.0.3",
-    "next-auth": "4.24.5",
-    "next-i18next": "15.2.0",
-    "next-themes": "0.2.1",
-    "nookies": "2.5.2",
-    "nprogress": "0.2.0",
-    "react": "18.3.1",
-    "react-avatar-editor": "13.0.2",
-    "react-datepicker": "4.23.0",
-    "react-dom": "18.3.0",
-    "react-ga4": "2.1.0",
-    "react-google-charts": "4.0.1",
-    "react-hook-form": "7.48.2",
-    "react-icons": "4.12.0",
-    "react-modal": "3.16.1",
-    "react-moment": "1.1.3",
-    "react-scroll-snap-anime-slider": "1.5.3",
-    "react-select": "5.8.0",
-    "react-toastify": "9.1.3",
-    "sass": "1.69.5",
-    "sharp": "0.32.6",
-    "tailwindcss-animate": "1.0.7",
-    "zod": "3.22.4"
+    "@fontsource/open-sans": "^5.1.0",
+    "@googlemaps/js-api-loader": "^1.16.8",
+    "@hookform/resolvers": "^3.9.1",
+    "@mdxeditor/editor": "^3.19.3",
+    "@react-google-maps/api": "^2.20.3",
+    "@t3-oss/env-nextjs": "^0.11.1",
+    "@tanstack/react-query": "^5.61.5",
+    "@types/file-saver": "^2.0.7",
+    "axios": "^1.7.8",
+    "daisyui": "^4.12.14",
+    "embla-carousel-react": "^8.5.1",
+    "file-saver": "^2.0.5",
+    "jotai": "^2.10.3",
+    "moment": "^2.30.1",
+    "next": "15.0.3",
+    "next-auth": "^4.24.10",
+    "next-i18next": "^15.4.0",
+    "next-themes": "^0.4.3",
+    "nookies": "^2.5.2",
+    "nprogress": "^0.2.0",
+    "react": "19.0.0-rc-66855b96-20241106",
+    "react-avatar-editor": "^13.0.2",
+    "react-datepicker": "^7.5.0",
+    "react-dom": "19.0.0-rc-66855b96-20241106",
+    "react-ga4": "^2.1.0",
+    "react-google-charts": "^5.2.1",
+    "react-hook-form": "^7.53.2",
+    "react-icons": "^5.3.0",
+    "react-moment": "^1.1.3",
+    "react-scroll-snap-anime-slider": "^1.5.3",
+    "react-select": "^5.8.3",
+    "react-toastify": "^10.0.6",
+    "sass": "^1.81.0",
+    "sharp": "^0.33.5",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "14.0.3",
-    "@types/eslint": "8.44.7",
-    "@types/google.maps": "3.55.2",
-    "@types/next-pwa": "5.6.9",
-    "@types/node": "18.17.0",
-    "@types/nprogress": "0.2.3",
-    "@types/prettier": "3.0.0",
-    "@types/react": "18.3.1",
-    "@types/react-avatar-editor": "13.0.2",
-    "@types/react-datepicker": "4.19.3",
-    "@types/react-dom": "18.3.0",
-    "@types/react-modal": "3.16.3",
-    "@typescript-eslint/eslint-plugin": "6.13.0",
-    "@typescript-eslint/parser": "6.13.0",
-    "autoprefixer": "10.4.16",
-    "cross-env": "7.0.3",
-    "eslint": "8.54.0",
-    "eslint-config-next": "14.0.3",
-    "filepond": "4.30.4",
-    "filepond-plugin-file-validate-type": "1.2.8",
-    "filepond-plugin-image-exif-orientation": "1.0.11",
-    "filepond-plugin-image-preview": "4.6.11",
-    "next-pwa": "5.6.0",
-    "postcss": "8.4.31",
-    "prettier": "3.1.0",
-    "prettier-plugin-tailwindcss": "0.5.7",
-    "react-filepond": "7.1.2",
-    "tailwindcss": "3.3.5",
-    "typescript": "5.3.2"
+    "@eslint/compat": "^1.2.3",
+    "@next/bundle-analyzer": "^15.0.3",
+    "@types/google.maps": "^3.58.1",
+    "@types/next-pwa": "^5.6.9",
+    "@types/node": "^20.14.8",
+    "@types/nprogress": "^0.2.3",
+    "@types/prettier": "^3.0.0",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@types/react-avatar-editor": "^13.0.3",
+    "@types/react-datepicker": "^7.0.0",
+    "@types/react-modal": "^3.16.3",
+    "autoprefixer": "^10.4.20",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^15.0.3",
+    "eslint-config-prettier": "^9.1.0",
+    "filepond": "^4.32.4",
+    "filepond-plugin-file-validate-type": "^1.2.9",
+    "filepond-plugin-image-exif-orientation": "^1.0.11",
+    "filepond-plugin-image-preview": "^4.6.12",
+    "next-pwa": "^5.6.0",
+    "postcss": "^8.4.49",
+    "prettier": "^3.4.1",
+    "prettier-plugin-tailwindcss": "^0.6.9",
+    "react-filepond": "^7.1.2",
+    "tailwindcss": "^3.4.15",
+    "typescript": "^5.7.2"
   },
   "ct3aMetadata": {
     "initVersion": "7.16.0"
   },
   "engines": {
-    "node": "18.x"
+    "node": "20.x"
+  },
+  "overrides": {
+    "@types/react": "npm:[email protected]",
+    "@types/react-dom": "npm:[email protected]"
   }
 }
diff --git a/src/web/public/manifest.json b/src/web/public/manifest.json
@@ -5,7 +5,7 @@
   "scope": "/",
   "start_url": "/",
   "name": "Yoma | Unlock Your Future",
-  "short_name": "yoma_v3",
+  "short_name": "Yoma",
   "description": "The Yoma platform enables you to build and transform your future by unlocking your hidden potential. Make a difference, earn rewards and build your CV by taking part in our impact challenges.",
   "icons": [
     {

diff --git a/src/web/sentry.client.config.ts b/src/web/sentry.client.config.ts