Integration Issues Log: @lit-labs/nextjs with next@14 App Router

[raoufswe]

Context:

This document highlights the issues faced while integrating @lit-labs/nextjs into a [email protected] application and the App Router with a critical SSR requirement.

Issue 1: Build Step Fails Within the Docker Container

After adding the @lit-labs/nextjs plugin to the next.config.js file, the build process within the Docker container started to fail and I believe the issue happens due to multiple transformations of node_modules triggered by the Lit plugin.

Module parse failed: 'import' and 'export' may appear only with 'sourceType: module'

📓 The issue doesn't affect next dev or next build.

ℹ️ Status:

The issue has been reported to the Lit team and can be tracked here. A temporary workaround is also provided in the linked issue.

Issue 2: Mixing of dev and production bundles of Lit

After resolving the first issue, we noticed that the (SSR) of all pages frequently breaks with next dev and hot module reloading and consistently breaks in the playwright testing environment as the server relied on the dev server. The following error is logged:

Error: Internal error: It is possible that both dev mode and production mode Lit was mixed together during SSR. Please comment on the issue: https://github.com/lit/lit/issues/4527

📓 The issue doesn't affect next build

ℹ️ Status:

The issue has been reported to the Lit team and can be tracked here. Based on the discussion, there is a workaround to use serverComponentsExternalPackages and list all lit dependencies, however, the following error is thrown.

Issue 3: Invalid Elements

When adding the following configuration to next.config.js, as suggested by the Lit team to fix the dev/prod bundle issue

   serverComponentsExternalPackages: [ 'lit', "lit-element", '@lit/reactive-element', 'lit-html', "@lit-labs/ssr" ],

the following error is encountered:

Internal error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

📓 The issue affects both next dev and next build.

ℹ️ Status:

The issue has been reported to the Vercel team and is being tracked here.
According to the discussion, the issue began after version 14.1.3 and affects all subsequent 14.x.x versions and next@15 should fix the issue.