React component import is not resolved in Sitecore deployment environment

Question

I am using next/jss starter kit and trying to add a React component inside Sitecore navbar (src/sxastarter/src/components/Navigation.tsx) and push it to Sitecore. The component I am trying to add is taken from another repository that acts as pvt npm package. It is added to the nextjs project as a gitsubmodule.

The issue I am facing is that the project build fails with a type error in Sitecore pipeline though it builds successfully in the local env.

Type error: Cannot find module '@ui-design/dashboard' or its corresponding type declarations.

I have configured a custom Sitecore pipeline to install .gitsubmodules to a folder called pvt-components inside sxa starter and the repository is cloned successfully. I have dependencies in the nextjs project that are installed from the submodule and they get installed successfully. So I guess there is no issue cloning the submodule to Sitecore deploy environment.

Is there any reason that component cannot find its type or module in the Sitecore deploy environment? Cant I directly push a react component like this to Sitecore or am I missing any steps? There is no way to reproduce this type error on local project since it builds successfully in local and shows the added component in Sitecore navbar.

tsconfig.json

   "paths": {
  "components/*": ["src/components/*"],
  "lib/*": ["src/lib/*"],
  "temp/*": ["src/temp/*"],
  "assets/*": ["src/assets/*"],
  "graphql-types": ["node_modules/@types/graphql-let/__generated__/__types__"],
  "@ui-design/*": ["node_modules/@ui-design/*"],
  "@ui-design/legacy-components/*": ["node_modules/@ui-design/legacy-components/*"]
}

package.json dependencies

"@ui-design/custom-bootstrap": "file:./pvt-components/packages/custom-bootstrap",
"@dtp-vic/dashboard": "file:./pvt-components/packages/dashboard",

this is the component that I am adding to Navigation.tsx

'use client';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { AuthPanelContainer } from '@ui-design/dashboard';


export default function MyAuth() {
  const router = useRouter();

  return (
    <>
    <AuthPanelContainer
          onBuyRequest={handleBuyRequest}
          onRegister={handleRegister}
          onToUnlock={handleUnlock}
          onUpdatePasswordSuccess={handleUpdatePasswordSuccess}
        >
         //...some logic
        </AuthPanelContainer>
      </div>
    </>
  );
}

Error points to this import in the above component

import { AuthPanelContainer } from '@ui-design/dashboard';

Answer 1

At the time of writing, XM Cloud Deploy does not support private npm packages or git submodules. If you are using the github/Azure DevOps integration, this will not work.

You can make the submodule workaround work by using the CLI to create deployments. You would need to create your deploy pipeline to checkout your main repo, then pull in your submodules, finally create a deployment with the --upload command. This will upload all the source code in the folder to XM Cloud Deploy and start the build/deploy process.

dotnet sitecore cloud deployment create --environment-id <id> --upload

Its important to note, you can only do this if you created the Project and Environment by using the CLI. If the Project was created by the UI and linked to a repo integration, it will only allow integration deployments.

You will also need to make sure that your pvt-components folder is not in your .gitignore, the deployment create command with upload, obeys your .gitignore settings.