Skip to content

LazyLoadHintPlugin: Two runtime errors with component wrapping (undefined components + TDZ violation) #241

@PatrikFurm

Description

@PatrikFurm

Environment

  • @nuxt/hints: v1.0.0-alpha.8
  • Nuxt: v4.1.3
  • Node.js: v22.18.0

Reproduction

Any Vue component that imports other .vue components triggers both errors.
No special configuration needed — a standard Nuxt 4 project with nuxt-csurf and auto-imported components is enough.

  1. Install @nuxt/hints v1.0.0-alpha.8
  2. Run nuxi dev
  3. Open any page that renders a component with multiple child .vue imports

Bug 1 appears first. After patching composables.js (adding null guard), Bug 2 appears.

Describe the bug

The LazyLoadHintPlugin causes two separate runtime errors that prevent the dev server from starting.

Bug 1: Cannot read properties of undefined (reading 'setup')

__wrapImportedComponent in dist/runtime/lazy-load/composables.js does not guard against undefined components:

// composables.js:25-29
export function __wrapImportedComponent(component, componentName, importSource, importedBy) {
  if (component && component.name === "AsyncComponentWrapper") {
    return component;
  }
  const originalSetup = component.setup; // 💥 crashes if component is undefined

Bug 2: Can't access lexical declaration '__original___nuxt_component_X' before initialization

The LazyLoadHintPlugin transform generates code with a Temporal Dead Zone violation. It:

  1. Renames imports from ComponentName__original_ComponentName
  2. Prepends wrapper statements before the import declarations

This produces:

// ❌ wrapper references __original_Foo BEFORE it's imported
const Foo = __wrapImportedComponent(__original_Foo, 'Foo', './Foo.vue', '...')
import __original_Foo from './Foo.vue'

The issue is in module.mjs:

m.prepend(wrapperStatements + "\n");

Workaround

Disable the lazy-load feature by commenting out in dist/module.mjs:

// addPlugin(resolver.resolve("./runtime/lazy-load/plugin.client"));
// addServerPlugin(resolver.resolve("./runtime/lazy-load/nitro.plugin"));
// nuxt.hook("modules:done", () => {
//   addBuildPlugin(LazyLoadHintPlugin, { client: false });
//   addBuildPlugin(LazyLoadHintPlugin, { server: false });
// });

All other features (Web Vitals, hydration debugging, third-party scripts, DevTools UI) work correctly.

Additional context

No response

Logs

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions