Error during build of sample Next.js app

Question

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.

Answer 1

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