Dynamic component SSR rendering problem

[bastienrossi]

Dynamic component SSR rendering problem

[bastienrossi]

Hi, the problem doesn't seem to come entirely from rollup, in fact rollup returns an object {__proto__: null, default: _sfc_main} instead of a module, so the defineAsyncComponent code doesn't work and doesn't call the .default

if (comp && (comp.__esModule || comp[Symbol.toStringTag] === 'Module')) {
  comp = comp.default
}

https://github.com/vuejs/core/blob/e0428884b57ac834274045bd33841263aeae259e/packages/runtime-core/src/apiAsyncComponent.ts#L100.

Workaround that I've found for the moment is to ask rollup to put the code in es2015.

defineNuxtConfig({
  vite: {
    $server: {
      build: {
        rollupOptions: {
          output: {
            generatedCode: {
              preset: 'es2015' // temporary fix for https://github.com/nuxt/nuxt/issues/27836
            }
          }
        }
      }
    }
  }
}

Generate

const BaseTestChild2 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
	__proto__: null,
	default: _sfc_main
}, Symbol.toStringTag, { value: 'Module' }));

instead of

const BaseTestChild2 = /* @__PURE__ */ Object.freeze({
  __proto__: null,
  default: _sfc_main
});

and match defineAsyncComponent condition.

[danielroe]

For a workaround, you can add an interop default line:

const BaseTestChild2 = defineAsyncComponent(
  () => import("@/components/BaseTestChild2.vue").then(r => r.default || r)
);

I don't think this is a Nuxt issue but rather a Vue one - defineAsyncComponent probably needs to update its condition. Would you raise an issue on vuejs/core#6638 ? 🙏

[bastienrossi]

There already seems to be a way out on view concerning the behaviour of "defineAsyncComponent".
vuejs/core#8351
It says that there is also another, cleaner alternative to converting everything to es2015 in rollup to fix the problem temporarily.

defineNuxtConfig({
  vite: {
    $server: {
      build: {
        rollupOptions: {
          output: {
            generatedCode: {
              symbols: true // temporary fix for https://github.com/nuxt/nuxt/issues/27836
            }
          }
        }
      }
    }
  }
}

[danielroe]

I would be willing to investigate adding that configuration in Nuxt by default.