How to use @lit-labs/nextjs with nextjs app created in nrwl nx mono-repo?.

[manandkumaar]

Hi Nx Team,

is there any document on how to configure NX nextjs app with @lit-labs/nextjs plugin?
This plugin is recommended by Lit to deep server render Lit react wrappers in a nextjs app.

As per nx nextjs guide, withLitSSR export of @lit-labs/nextjs plugin to be included in plugins array in next.config.js as below -

//@ts-check

const withLitSSR = require('@lit-labs/nextjs')();

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { composePlugins, withNx } = require('@nx/next');

/**
 * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
 **/
const nextConfig = {
  nx: {
    // Set this to true if you would like to use SVGR
    // See: https://github.com/gregberge/svgr
    svgr: false
  },
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.(ts)x?$/, // Just `tsx?` file only
      use: [
        {
          loader: 'ts-loader',
          options: {
            transpileOnly: true,
            experimentalWatchApi: true,
            onlyCompileBundledFiles: true
          }
        }
      ]
    });

    return config;
  },
  reactStrictMode: true,
  swcMinify: true
};

const plugins = [
  // Add more Next.js plugins to this list if needed.
  withLitSSR,
  withNx,
];

module.exports = composePlugins(...plugins)(nextConfig);

But the above config throws this error -

Versions -
"lit": "^3.2.0",
"@lit/react": "^1.0.5",
"@lit-labs/nextjs": "^0.2.0",
"nx": "20.0.3",

Any help on fixing the error is greatly appreciated. Thanks.

CC: @augustjk @justinfagnani