0

After creating a JSS Next.js app, I'd like to build it with jss build command and deploy, but that gives me GraphQL related error:

./src/components/graphql/GraphQL-ConnectedDemo.dynamic.tsx:114:72
Type error: Argument of type 'TypedDocumentNode<ConnectedDemoQueryQuery, Exact<{ datasource: string; contextItem: string; language: string; }>>' is not assignable to parameter of type 'string | DocumentNode'.
  Type 'TypedDocumentNode<ConnectedDemoQueryQuery, Exact<{ datasource: string; contextItem: string; language: string; }>>' is not assignable to type 'DocumentNode'.
    Types of property 'kind' are incompatible.
      Type '"Document"' is not assignable to type 'Kind.DOCUMENT'.

Commands that I ran:

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

Selected REST for fetching Layout and Dictionary data and SSG to be used for prerendering.

If I remove GraphQL demo components, then a different error is returned by jss build:

./src/pages/_app.tsx:21:11
Type error: Property 'dictionary' does not exist on type '{}'.

  19 |
  20 | function App({ Component, pageProps }: AppProps): JSX.Element {
> 21 |   const { dictionary, ...rest } = pageProps;

I'm fairly new to headless development with Next.js, so would appreciate any pointers to how to get sample application built and deployed.

1
  • Same issue, I tried with "@sitecore-jss/sitecore-jss-nextjs": "^20.0.1" and it works fine. However with "@sitecore-jss/sitecore-jss-nextjs": "^21.0.0". I'm facing same issue. I don´t know if this is version related. If someone else found the solution please post it. Commented Nov 29, 2022 at 2:54

1 Answer 1

0

While I don't have a fix for this issue I do have a workaround.

I've turned off Typescript and ESLint for builds to get the sample site building.

Create two new files

  1. src\lib\next-config\plugins\typescript.js
const typescript = (nextConfig = {}) => {
  return Object.assign({}, nextConfig, {
    typescript: {
      ignoreBuildErrors: true,
    },
  });
};

module.exports = typescript;
  1. src\lib\next-config\plugins\eslint.js
const eslint = (nextConfig = {}) => {
  return Object.assign({}, nextConfig, {
    eslint: {
      ignoreDuringBuilds: true,
    },
  });
};

module.exports = eslint;

This should allow jss build to work although I was testing with yarn build

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.