Module not found: Can't resolve '@sitecore-cloudsdk/personalize/server'

[bewards]

Describe the Bug

After upgrading from 21.1.6 to 21.6.0 on a non xm-cloud Next.js application, we are receiving an error trying to load the rendering host stating that the '@sitecore-cloudsdk/personalize/server' module was not found:

package-lock.json

    "node_modules/@sitecore-jss/sitecore-jss-nextjs": {
      "version": "21.6.0",
      "resolved": "https://registry.npmjs.org/@sitecore-jss/sitecore-jss-nextjs/-/sitecore-jss-nextjs-21.6.0.tgz",
      "integrity": "sha512-movSzJTtu4TngDTvOlch4+jYomo8l4qzXnbjZkqx8fPQ1IVA0vkPrG8KGs1oIHeQML3zUDAsXkS5W4opGyux6w==",
      "dependencies": {
        "@sitecore-jss/sitecore-jss": "21.6.0",
        "@sitecore-jss/sitecore-jss-dev-tools": "21.6.0",
        "@sitecore-jss/sitecore-jss-react": "21.6.0",
        "@vercel/kv": "^0.2.1",
        "node-html-parser": "^6.1.4",
        "prop-types": "^15.8.1",
        "regex-parser": "^2.2.11",
        "sync-disk-cache": "^2.1.0"
      },
      "engines": {
        "node": ">=18"
      },
      "peerDependencies": {
        "@sitecore-cloudsdk/events": "^0.1.3",
        "@sitecore-cloudsdk/personalize": "^0.1.3",
        "next": "^13.4.16",
        "react": "^18.2.0",
        "react-dom": "^18.2.0"
      }
    },

Maybe it has to do with adding some sitecore package dependencies that are personalize related in my package.json?

package.json

  "dependencies": {
    "@sitecore-feaas/clientside": "^0.5.5",
    "@sitecore-jss/sitecore-jss-nextjs": "~21.6.0",
    "@sitecore/components": "~1.0.19",
      ...
   },
  "devDependencies": {
    "@sitecore-jss/sitecore-jss-cli": "~21.6.0",
    "@sitecore-jss/sitecore-jss-dev-tools": "~21.6.0",
      ...
   },

To Reproduce

• Upgrade from 21.1.6 to 21.6.0 (add in/update/remove all the file updates) via npx create-sitecore-jss@v21.6.0 and set the templates to Next.js and SXA
• Run local docker next.js template

Expected Behavior

Expected behavior would be no rendering host errors regarding the personalize middleware for a non xm-cloud application.

Possible Fix

No response

Provide environment information

• Sitecore Version: XM 10.3 (Azure PaaS)
• JSS Version: 21.6.0

[illiakovalenko]

@bewards Hey, using a fresh "nextjs" + "nextjs-sxa" do you face the same problem?
I verified that it works without any errors. Is it a "potentially" problem related to your upgrade process?
If you can provide more information it could be helpful. Are you using any personalize related functionality?
(probably you shouldn't, since 21.6 requires to use XMCloud for Personalization)

[bewards]

We are not using any of the personalize related functionality. I did a clean removal of node_modules and re-install (removed package-lock.json first), and the error remained. I see zero references to "personalize" in my project besides the peerDependencies noted above in the package-lock file.

I will check a fresh nextjs + nextjs-sxa install next.

[ashishch-98]

Getting the same error with fresh install. I'm not using docker.

{
  "name": "local-nextjs",
  "description": "Application utilizing Sitecore JavaScript Services and Next.js",
  "version": "21.6.3",
  "private": true,
  "config": {
    "appName": "local-nextjs",
    "rootPlaceholders": [
      "jss-main"
    ],
    "sitecoreConfigPath": "/App_Config/Include/zzz",
    "graphQLEndpointPath": "/sitecore/api/graph/edge",
    "language": "en",
    "templates": [
      "nextjs",
      "nextjs-sxa"
    ]
  },
  "author": {
    "name": "Sitecore Corporation",
    "url": "https://jss.sitecore.com"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/sitecore/jss.git"
  },
  "bugs": {
    "url": "https://github.com/sitecore/jss/issues"
  },
  "license": "Apache-2.0",
  "dependencies": {
    "@sitecore-feaas/clientside": "^0.5.5",
    "@sitecore-jss/sitecore-jss-nextjs": "~21.6.3",
    "@sitecore/components": "~1.0.19",
    "bootstrap": "^5.1.3",
    "font-awesome": "^4.7.0",
    "graphql": "~15.8.0",
    "graphql-tag": "^2.12.6",
    "next": "^13.4.16",
    "next-localization": "^0.12.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sass": "^1.52.3",
    "sass-alias": "^1.0.5"
  },
  "devDependencies": {
    "@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-jss/sitecore-jss-cli": "~21.6.3",
    "@sitecore-jss/sitecore-jss-dev-tools": "~21.6.3",
    "@types/node": "^18.11.18",
    "@types/react": "^18.2.22",
    "@types/react-dom": "^18.0.5",
    "@typescript-eslint/eslint-plugin": "^5.49.0",
    "@typescript-eslint/parser": "^5.49.0",
    "chalk": "~4.1.2",
    "chokidar": "~3.5.3",
    "constant-case": "^3.0.4",
    "cross-env": "~7.0.3",
    "dotenv": "^16.0.3",
    "eslint": "^8.32.0",
    "eslint-config-next": "^13.1.5",
    "eslint-config-prettier": "^8.6.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.1",
    "eslint-plugin-yaml": "^0.5.0",
    "graphql-let": "^0.18.6",
    "npm-run-all": "~4.1.5",
    "prettier": "^2.8.3",
    "ts-node": "^10.9.1",
    "tsconfig-paths": "^4.1.2",
    "typescript": "~4.9.4",
    "yaml-loader": "^0.8.0"
  },
  "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",
    "install-pre-push-hook": "ts-node --project tsconfig.scripts.json ./scripts/install-pre-push-hook.ts",
    "jss": "jss",
    "lint": "eslint ./src/**/*.tsx ./src/**/*.ts ./scripts/**/*.ts",
    "next:build": "next build",
    "next:dev": "cross-env NODE_OPTIONS='--inspect' next dev",
    "next:start": "next start",
    "scaffold": "ts-node --project tsconfig.scripts.json scripts/scaffold-component/index.ts",
    "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"
  }
}

[bewards]

I believe I was able to get around this with the following steps:

1. Removed an old .npmrc file at the root (introduced in earlier JSS version possibly) that included the flag that sets project wide legacy-peer-deps=true. The --legacy-peer-deps flag was introduced with npm v7 as a way to bypass peerDependency auto-installation; it tells NPM to ignore peer deps and proceed with the installation anyway. Removing this flag probably forced the peerDependency (personalize) to be installed.

2. Upgrading my npm version from 8.1.0 to 8.3.0, where the "overrides" attribute was introduced. I needed this to fix some node modules that were looking for peerDepdencies in lower versions (storybook was looking for react 17).

3. Commented out the logic within the content-styles page-props-factory plugin, as I don't have the right templates for the stylesheet links, and this part was erroring out the page.

[illiakovalenko]

@bewards, @ashishch-98 The required node version is >= 18. Which version do you use? Does it meet our rules?
May be it's a main cause of this issue?

[bewards]

Current node version within Docker is 18.3.0 (I updated it from previously using v16).

@ashishch-98 do you have any project references for "legacy-peer-deps"? If you do, try removing that flag and re-installing the node modules.

[illiakovalenko]

@bewards I see. Potentially, it was your problem. But in any case our team will put some effort to explore this problem

[ashishch-98]

Thank you for providing the details. Unfortunately, the steps suggested by @bewards didn't work in my case. My Node version is v20.10.0, and my npm version is 10.2.3.

Upon inspecting my package-lock.json, I discovered that @sitecore-cloudsdk/personalize is listed as a peerDependency of @sitecore-jss/sitecore-jss-nextjs. However, for reasons still unknown to me, npm install failed to automatically install it, nor did it provide any errors or warnings during installation, as expected for npm >v7. I didn't have the legacy-peer-deps=true flag set in the code, as this is a fresh vanilla Sitecore JSS Nextjs setup.

Installing @sitecore-cloudsdk/personalize as a dev dependency resolved the issue for me.

[illiakovalenko]

@ashishch-98 Thank you for the details! We will resolve/guide how to resolve this issue properly

[thezaff]

@ashishch-98 Thank you for the details! We will resolve/guide how to resolve this issue properly

@illiakovalenko any updates?
Facing the same, when updated to "next": "^14.1.3"

"@sitecore-jss/sitecore-jss-nextjs": "~21.6.3",

[addy-pathania]

This issue is being caused by the legacy-peer-deps flag being set to true in one of the following .npmrc files. Make sure to set it to false for your project or system

1. per-project configuration file (/path/to/my/project/.npmrc)
2. npm's built-in configuration file (/path/to/npm/npmrc)
3. per-user configuration file (defaults to $HOME/.npmrc; configurable via CLI option --userconfig or environment variable $NPM_CONFIG_USERCONFIG)
4. global configuration file (defaults to $PREFIX/etc/npmrc; configurable via CLI option --globalconfig or environment variable $NPM_CONFIG_GLOBALCONFIG)