Deprecation warnings in version 21.7.1

[Adamduehansen]

Description

Hi! I recently updated our JSS Next.js application to version 21.7.1, and with that an update to Next.js 14 was required as stated in the release notes of 21.7.0. However that update logs a lot of deprecation warnings in the output when running the Next.js development sever and tests with Jest such as

console.error
      Warning: Text: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
          at fn (/.../node_modules/@sitecore-jss/sitecore-jss-nextjs/node_modules/@sitecore-jss/sitecore-jss-react/dist/cjs/components/Text.js:21:11)

They seem to originate from components in the JSS package. I can silence the warnings during Jest execution with the --silent argument for Jest, but that feels more like a band aid than a fix. I cannot find a similar solution for the Next.js development server.

It seems as any dependency that we update, that has a peer-dependency to React, activates the deprecation warnings. Properly because React 18.3.1 marks a few thing as deprecated.

In the release notes of version 22.0.0, this pull request is merged that claims to fix these warnings. We are currently not able to update to 22.0.0 since we do not have the time and resources to update our on-premise installation of Sitecore XP from 10.3 to 10.4.

I can replicate these warnings in a fresh JSS 21.7.1 application created by the CLI and adding a page route with the following content

import { Text } from '@sitecore-jss/sitecore-jss-nextjs';

export default function SomePage(): JSX.Element {
  return (
    <div>
      <Text
        field={{
          value: '"hello, World!',
        }}
      />
    </div>
  );
}

Any ideas on how I can hide these specific deprecation warnings?

Additional information

My package.json file if that is any help:

{
  "name": "site",
  "version": "21.7.1",
  "private": true,
  "config": {
    "appName": "site",
    "rootPlaceholders": [
      "jss-main"
    ],
    "sitecoreConfigPath": "/App_Config/Include/zzz",
    "graphQLEndpointPath": "/sitecore/api/graph/edge",
    "language": "da"
  },
  "engines": {
    "node": ">=8.1",
    "npm": ">=5.6.0",
    "yarn": "yarn is not supported, please use npm"
  },
  "license": "Apache-2.0",
  "dependencies": {
    "@headlessui/react": "^1.7.17",
    "@hookform/resolvers": "^3.3.4",
    "@sitecore-jss/sitecore-jss-nextjs": "~21.7.1",
    "@tanstack/react-query": "^5.29.2",
    "@tanstack/react-query-devtools": "^5.32.0",
    "@types/formidable": "^3.4.3",
    "body-scroll-lock": "^3.1.5",
    "classnames": "^2.3.2",
    "formidable": "^3.5.1",
    "graphql": "~15.8.0",
    "graphql-tag": "^2.12.6",
    "gsap": "^3.12.2",
    "jwt-decode": "^4.0.0",
    "next": "^14.2.3",
    "next-auth": "^4.24.7",
    "next-localization": "^0.12.0",
    "next-router-mock": "^0.9.12",
    "next-seo": "^6.1.0",
    "node-html-parser": "^6.1.1",
    "react": "^18.3.1",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.45.2",
    "react-image-crop": "^10.1.8",
    "request-ip": "^3.3.0",
    "sass": "^1.66.1",
    "sharp": "^0.30.7",
    "swiper": "^8.3.2",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@graphql-codegen/cli": "^1.21.8",
    "@graphql-codegen/import-types-preset": "^2.2.6",
    "@graphql-codegen/plugin-helpers": "^3.1.2",
    "@graphql-codegen/typed-document-node": "^2.3.12",
    "@graphql-codegen/typescript": "^2.8.7",
    "@graphql-codegen/typescript-operations": "^2.5.12",
    "@graphql-codegen/typescript-resolvers": "^2.7.12",
    "@graphql-typed-document-node/core": "^3.1.1",
    "@sitecore-feaas/clientside": "^0.3.17",
    "@sitecore-jss/sitecore-jss-cli": "~21.7.1",
    "@sitecore-jss/sitecore-jss-dev-tools": "~21.7.1",
    "@storybook/addon-a11y": "7.5.2",
    "@storybook/addon-essentials": "^7.5.2",
    "@storybook/addon-interactions": "^7.5.2",
    "@storybook/addon-links": "^7.5.2",
    "@storybook/addon-styling": "^1.3.7",
    "@storybook/addon-toolbars": "7.5.2",
    "@storybook/addons": "7.5.2",
    "@storybook/blocks": "^7.5.2",
    "@storybook/nextjs": "^7.5.2",
    "@storybook/react": "^7.5.2",
    "@storybook/testing-library": "^0.2.2",
    "@storybook/theming": "7.5.2",
    "@storybook/types": "7.5.2",
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tailwindcss/forms": "^0.5.6",
    "@tailwindcss/typography": "^0.5.10",
    "@tanstack/eslint-plugin-query": "^5.28.11",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/body-scroll-lock": "^3.1.0",
    "@types/deep-equal": "^1.0.1",
    "@types/jest": "^27.3.1",
    "@types/node": "^18.11.18",
    "@types/react": "^18.0.12",
    "@types/react-dom": "^18.0.5",
    "@types/react-test-renderer": "^18.0.0",
    "@types/react-text-truncate": "^0.14.1",
    "@types/request-ip": "^0.0.38",
    "@typescript-eslint/eslint-plugin": "^5.49.0",
    "@typescript-eslint/parser": "^5.49.0",
    "autoprefixer": "^10.4.16",
    "babel-jest": "^27.3.1",
    "babel-loader": "^8.2.3",
    "babel-preset-react-app": "^10.0.0",
    "chalk": "~4.1.2",
    "chokidar": "~3.5.3",
    "constant-case": "^3.0.4",
    "cross-env": "~7.0.3",
    "css-loader": "^6.7.3",
    "dotenv": "^16.0.3",
    "eslint": "^8.32.0",
    "eslint-config-next": "^13.1.5",
    "eslint-config-prettier": "^8.6.0",
    "eslint-plugin-jest": "^27.2.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.1",
    "eslint-plugin-storybook": "^0.6.15",
    "eslint-plugin-testing-library": "^5.10.3",
    "eslint-plugin-yaml": "^0.5.0",
    "generate-template-files": "^3.2.0",
    "graphql-let": "^0.18.6",
    "identity-obj-proxy": "^3.0.0",
    "ignore-loader": "^0.1.2",
    "jest": "^27.3.1",
    "jest-environment-jsdom": "^27.3.1",
    "jest-teamcity-reporter": "^0.9.0",
    "npm-run-all": "~4.1.5",
    "postcss": "^8.4.31",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-import": "^15.1.0",
    "postcss-preset-env": "^9.3.0",
    "precss": "^4.0.0",
    "prettier": "^2.8.3",
    "prettier-plugin-tailwindcss": "^0.1.13",
    "react-test-renderer": "^18.2.0",
    "sass": "^1.62.0",
    "sass-loader": "^13.2.2",
    "storybook": "^7.5.2",
    "style-loader": "^2.0.0",
    "tailwind-safelist-generator": "^1.0.0",
    "tailwindcss": "^3.3.5",
    "ts-node": "^10.9.1",
    "tsconfig-paths": "^4.1.2",
    "typescript": "~4.9.4",
    "yaml-loader": "^0.8.0"
  },
  "scripts": {
    "jss": "jss",
    "lint": "eslint ./src/**/*.tsx ./src/**/*.ts ./scripts/**/*.ts",
    "prettier:check": "prettier --check ./src ./sitecore/definitions ./scripts",
    "prettier:write": "prettier --write ./src ./sitecore/definitions ./scripts",
    "bootstrap": "ts-node --project tsconfig.scripts.json scripts/bootstrap.ts",
    "build": "npm-run-all --serial bootstrap next:build",
    "graphql:update": "ts-node --project tsconfig.scripts.json ./scripts/fetch-graphql-introspection-data.ts",
    "next:build": "next build",
    "next:dev": "cross-env NODE_OPTIONS='--inspect' next dev",
    "next:start": "next start",
    "start": "npm run start:connected",
    "start:connected": "npm-run-all --serial bootstrap --parallel next:dev start:watch-components",
    "start:production": "npm-run-all --serial bootstrap next:build next:start",
    "start:watch-components": "ts-node --project tsconfig.scripts.json scripts/generate-component-builder/index.ts --watch",
    "test:once": "jest",
    "test:watch": "jest --watch",
    "test:snapshot": "jest --updateSnapshot",
    "tsc:once": "tsc",
    "tsc:watch": "tsc --watch --preserveWatchOutput",
    "generate": "node ./scripts/generate-components.js",
    "storybook": "storybook dev -p 6006",
    "storybook:doc": "storybook build",
    "storybook:build": "npm-run-all --serial bootstrap storybook:doc",
    "check-all": "npm-run-all --serial bootstrap tsc:once test:once storybook:build build"
  },
  "eslintConfig": {
    "extends": [
      "plugin:storybook/recommended"
    ]
  }
}

[yavorsk]

Hi @Adamduehansen
I understand your situation and that you cannot upgrade at the moment.
Since this issue is annoying but not critical, publishing a hotfix for v21 is not at the top of our priority list for now :/ ...

[Adamduehansen]

Thank you for your response, @yavorsk. Allthough I hope that you can publish a propper fix some day, I am currently looking into a solution using patch package :)

[yavorsk]

Yep, patch package should be able to help :) thanks for understanding.