Nuxt `generate` appears to fail

jamieomaguire commented 5 months ago

Describe the bug When I use this package in a Nuxt 3 app, a yarn build command succeeds however a yarn generate results in a number of Lit rendering errors. I am just curious to know if the SSG command is expected to succeed with this package?

Example of the output after running yarn generate:

 ERROR  [nuxt] [request error] [unhandled] [500] customElements.get(...) is not a constructor                                                                                  15:32:25
  at new LitElementRenderer (./node_modules/@lit-labs/ssr/lib/lit-element-renderer.js:22:24)  
  at createLitElementRenderer (./.nuxt/prerender/chunks/app/_nuxt/LitWrapperServer-SqObjmpZ.mjs:43:20)  
  at ssrRender (./.nuxt/prerender/chunks/app/_nuxt/LitWrapperServer-SqObjmpZ.mjs:107:22)  
  at renderComponentSubTree (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:437:9)  
  at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:383:12)  
  at renderVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:497:14)  
  at renderComponentSubTree (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:452:7)  
  at ./node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:381:25  
  at async unrollBuffer$1 (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:624:16)  
  at async unrollBuffer$1 (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:629:16)

To Reproduce

It is probably easier to look at how I have added our Lit component library to my project rather than reproduce. All the changes are in the nuxt-app directory in the PR.

Expected behavior The generate command to succeed

Screenshots

Nuxt version: 3.9.1
Version: 1.6.10

duduyo commented 4 months ago

Hi, Same situation here. Additionally I can say that it seem to be unstable (sometimes working, sometimes not). We have several pages in our app, using the same lit component, and in some cases it's working, in other not.

prashantpalikhe commented 4 months ago

@jamieomaguire I have not tested the module with nuxt generate at all.

Do you experience the same issue when using generate in this project itself?

prashantpalikhe commented 4 months ago

@duduyo Do you have the issue with generate as well or also with build?

I have been using this module on prod with our custom Lit component library for a while now. Have not noticed the issue you described.

But, if you mean, with generate that's a different story.

duduyo commented 4 months ago

@duduyo Do you have the issue with generate as well or also with build?

I have been using this module on prod with our custom Lit component library for a while now. Have not noticed the issue you described.

But, if you mean, with generate that's a different story.

Hi, Thank you for your reply (and your job on this module !)

Here are some details on our context : we do not use generate on our project. We don't have problem on nuxt dev, but the bug appears while serving the production bundle. And something strange is that the same lit component works on some pages, and raise this bug on other pages... while we are using exactly the same code.

I've tried a short investigation, and when it comes to an error, the customElements registry is missing at least one element (it's like the customElements.define() has not been done yet...)

Hope this helps !

prashantpalikhe commented 4 months ago

@duduyo is it possible to maybe look into your issue together?

Or, if it is easily reproducible in a StackBlitz or something, that'd be great too.

jamieomaguire commented 4 months ago

@jamieomaguire I have not tested the module with nuxt generate at all.

Do you experience the same issue when using generate in this project itself?

Sorry @prashantpalikhe, I don't see a generate command in this package. How would I do this?

duduyo commented 4 months ago

@duduyo is it possible to maybe look into your issue together?

Or, if it is easily reproducible in a StackBlitz or something, that'd be great too.

Yes, sure ! I cannot easily reproduce it to stackblitz, but, you can see here an example of the error : https://territoiresfertiles.org/diagnostics/pdf/paris And to reproduce, you can run our app on your side :

the repo is here, download the snapshot of this release where we've got the bug
once you've got the repo on your disk : npm install, npm run build -w apps/tef, npm run serve -w apps/tef and go to http://localhost:8777/diagnostics/pdf/paris , you should see the error
if you stop the server, run npm run start:tef, and go to http://localhost:8777/diagnostics/pdf/paris , you should not see the error (no error on dev mode...)

jamieomaguire commented 2 months ago

Heya, this appears to be related to a known issue with Nitro. We got around it by adding the individual component packages to our nuxt config 😄

Example nuxt.config.ts file:

export default defineNuxtConfig({
    ssr: true,
    nitro: {
        moduleSideEffects: [
            '@justeattakeaway/pie-assistive-text',
            '@justeattakeaway/pie-button',
            '@justeattakeaway/pie-card',
            '@justeattakeaway/pie-chip',
            '@justeattakeaway/pie-cookie-banner',
            '@justeattakeaway/pie-divider',
            '@justeattakeaway/pie-input',
            '@justeattakeaway/pie-form-label',
            '@justeattakeaway/pie-icon-button',
            '@justeattakeaway/pie-link',
            '@justeattakeaway/pie-modal',
            '@justeattakeaway/pie-spinner',
            '@justeattakeaway/pie-switch',
            '@justeattakeaway/pie-tag',
            '@justeattakeaway/pie-icons-webc',
        ],
    },
    modules: [['nuxt-ssr-lit', { litElementPrefix: ['pie-', 'icon-'] }]],
    imports: {
        transform: {
            exclude: [/\bpie-\b/, /\bicon-\b/],
        },
    },
    css: ['@justeattakeaway/pie-css'],
    devtools: { enabled: true },
    devServer: {
        port: 3002,
    },
});

prashantpalikhe commented 2 months ago

Looks similar to the issue we discussed here

https://github.com/prashantpalikhe/nuxt-ssr-lit/issues/137

prashantpalikhe / nuxt-ssr-lit

Nuxt `generate` appears to fail #123