fix: workaround solution for Nuxt 3.2.0

[prashantpalikhe]

Async server component is not possible in Nuxt right now because of the issue below. https://github.com/nuxt/nuxt/issues/18500

Until then, we can get around the issue by not using client/server components at all. But that will lead to a lot of unnecessary code being bundled in the client build.

This Vite plugin will remove the import of LitWrapperServer from the client build of LitWrapper.vue.

This will help us get around the issue above while not impacting the bundle size.

Fixes #51

[prashantpalikhe]

@steveworkman With this Vite plugin, I am getting this source map issue, which I think you tackled before.

Do you recall what the cause of this was?

[steveworkman]

@steveworkman With this Vite plugin, I am getting this source map issue, which I think you tackled before.

Do you recall what the cause of this was?

https://github.com/prashantpalikhe/nuxt-ssr-lit/pull/52#issuecomment-1426700857 resolved this. That side effect may need to be changed

[prashantpalikhe]

@steveworkman Not sure what you mean. What resolved this?

[steveworkman]

Importing the lit render function as a side effect. Since we don't use that import any more, we may be able to remove this line

[prashantpalikhe]

Ah, we still need that. I tried removing that line. But it errors out on an attempt to use LitElementRenderer before it is defined.

The Vite warning only seems to appear in my project but not in the playground in the module. Could you also test it on your application with 1.2.3-beta.9?

[steveworkman]

With Nuxt 3.2.2 and this library 1.2.3-beta.9 I get

Template:

<mc-tooltip :fit="fit">
              <mc-checkbox
                slot="trigger"
                name="terms"
                value="agreed"
                class="field"
                label="I agree to the terms & conditions"
                :fit="fit"
                ><span slot="hint"
                  >You might like to read our full
                  <a href="https://designsystem.maersk.com">terms & conditions</a></span
                ></mc-checkbox
              >
              <span>You need to agree to the terms and condition</span>
            </mc-tooltip>

Error:

 ERROR  9:57:35 AM [vite] Internal server error: Element is missing end tag.                                       09:57:35
  Plugin: vite:vue
  File: /Users/steve/code/mds/kitchen-sink/nuxt3/pages/FormData.vue:100:15
  98 |              </mc-select-native>
  99 |              <mc-tooltip :fit="fit">
  100|                <mc-checkbox
     |                 ^
  101|                  slot="trigger"
  102|                  name="terms"
      at createCompilerError (/Users/kitchen-sink/nuxt3/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:19:19)
      at emitError (/Users/kitchen-sink/nuxt3/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:1613:29)
      at parseElement (/Users/kitchen-sink/nuxt3/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:1165:9)
      at parseChildren (/Users/kitchen-sink/nuxt3/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:943:28)
      at parseElement (/Users/kitchen-sink/nuxt3/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:1144:22)
      at parseChildren (/Users/kitchen-sink/nuxt3/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:943:28)
      at parseElement (/Users/kitchen-sink/nuxt3/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:1144:22)
      at parseChildren (/Users/kitchen-sink/nuxt3/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:943:28)
      at parseElement (/Users/kitchen-sink/nuxt3/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:1144:22)
      at parseChildren (/Users/kitchen-sink/nuxt3/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:943:28)

[prashantpalikhe]

Closing this in favor of #71