1

I am trying to setup a JSS app on Sitecore 10.2 (with SXA) but that is not going as expected.

I checked the downloads page for Headless Rendering and that mentions version 20.0.2 as latest now compatible with Sitecore 10.2. This install went fine. Creating a headless site with SXA seems to have worked and our graphQL playground is working.

I assumed that for the actual front-end app I had to use the same version (https://sitecore.stackexchange.com/a/30563/237 confirms that) so I used "npx create-sitecore-jss@ver20 --templates nextjs,nextjs-sxa ..." to do a setup and that created a nextjs app for me. Did the rest of the setup and config deploys and that seemed to go well - but when I start the site I get an error: Cannot query field "site" on type "Query".

Apparently the RedirectsQuery is doing a graphQL query for "sites" which is not supported. If I try that in my graphQL-UI it is indeed not in the schema. It is as from 10.3 however.

So now I'm thinking I have some wrong version somewhere.. so the question is actually if anyone has an idea what version I should be using on a Sitecore 10.2?

3 Answers 3

2

Apparently the version what not the issue - but the parameters. Including nextjs-sxa appears to be only supported for XMCloud. Found that in some well hidden docs - although I must admit that if you don't use it you are asked to include it and it is very clearly mentioned in that case.

Lesson learned: use lesser parameters in the creation command and let the questions come to you..

1
  • Yes for Sitecore 10.2 compatible version is version 20.0.2 which you are using. Check your frontend app if it has the same version. Try to uninstall the current version using the following command:

    npm uninstall -g @sitecore-jss/sitecore-jss-cli

  • Then install the latest version:

    npm install -g @sitecore-jss/[email protected]

  • Then create your app --

    npx create-sitecore-jss --templates nextjs --appName my-nextjs-app --fetchWith GraphQL

4
  • Checked all that - versions all seem fine. The CLI is the correct version and the app was created with a ver20 tag which is version 20.1.3 today (npmjs.com/package/@sitecore-jss/…)
    – Gatogordo
    Apr 11, 2023 at 7:24
  • For both frontend and the package version should be 20.0.2 Apr 11, 2023 at 8:00
  • And how would I do that? I can only use the tags on the frontend and if I take the tag for version 20 it is 20.1.3. Unless I'm missing something there (which is possible as I'm no npm expert)
    – Gatogordo
    Apr 11, 2023 at 8:41
  • Thanks for pointing that out! I apologize for any confusion that my previous message may have caused. To determine the proper version of JSS to use, I would recommend checking the documentation of the specific library or framework you are using. They will usually have recommendations for the compatible version of JSS. Additionally, it's always a good idea to keep your dependencies up-to-date to avoid any potential security vulnerabilities. Here's a helpful link to get started:npmjs.com/package/@sitecore-jss/sitecore-jss-cli/v/20.0.2 Apr 11, 2023 at 20:46
0

With Sitecore Headless Rendering version 20, you can install NextJS SXA, which is only compatible with XM cloud. It is mentioned when you install it using the command:

npx create-sitecore-jss@ver20

It will ask if you would like to include any add-on initializers:

Would you like to include any add-on initializers? (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ( ) nextjs-styleguide - Includes example components and setup for working disconnected
>(*) nextjs-sxa - Includes example components and setup for SXA Headless (only compatible with Sitecore XM Cloud)

enter image description here

On the other hand, With version 21, you will get much more options. You can choose nextjs-sxa, it will include example components and setup for Headless SXA projects which is even compatible with non XM cloud headless setup.

 Would you like to include any add-on initializers? (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>( ) nextjs-styleguide - Includes example components and setup for working disconnected
 ( ) nextjs-styleguide-tracking - Includes example (Sitecore XP) tracking component
 ( ) nextjs-sxa - Includes example components and setup for Headless SXA projects
 ( ) nextjs-personalize - Includes example setup for projects using XM Cloud Embedded Personalization
 ( ) nextjs-multisite - Includes example setup for hosting multiple sites in a single NextJS application

enter image description here

2
  • But version 21 is not compatible with 10.2 - right?
    – Gatogordo
    Apr 11, 2023 at 15:52
  • As per this documentation, version 21 is not compatible with 10.2 support.sitecore.com/… Apr 11, 2023 at 17:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.