Cannot import any of the booster components

[umaraziz0]

Describe the bug I'm unable to import any of the booster components, as the import throws a TS2307 error: Cannot find module '#booster/components/BoosterPicture' or its corresponding type declarations.ts(2307).

To Reproduce Steps to reproduce the behavior:

1. Import a booster component
2. View the error on eslint or IDE

Expected behavior Component should import properly

Screenshots

Desktop (please complete the following information):

• OS: MacOS Sonoma 14.6.1
• Browser: Chrome
• Version

Smartphone (please complete the following information): not tested yet

Additional context I have already installed and added the nuxt-booster module, here are some of my configurations:

"nuxt": "^3.12.4",
"nuxt-booster": "^3.1.5",
"vue": "^3.4.21",

My nuxt-booster config, a simplified version of the template from the docs:

booster: {
    performanceMetrics: {
      device: {
        hardwareConcurrency: { min: 2, max: 48 },
        deviceMemory: { min: 2 },
      },
      timing: {
        fcp: 800,
        dcl: 1200, // fallback if fcp is not available (safari)
      },
    },

    componentAutoImport: false,
    componentPrefix: undefined,

    /**
     * IntersectionObserver rootMargin for Components and Assets
     */
    lazyOffset: {
      component: '0%',
      asset: '0%',
    },
  },

[ThornWalli]

Hello @umaraziz0,

have you also added the module to the nuxt.config?

{
  modules: ['nuxt-booster']
}

[umaraziz0]

Hello @ThornWalli , thanks for replying. Yes I have added the module to my nuxt.config file, double-checked this, but still no results.

Here is a list of my modules and plugins for more context:

modules: [
    '@nuxt/eslint',
    '@nuxtjs/tailwindcss',
    '@nuxt/image',
    '@nuxt/fonts',
    '@nuxtjs/seo',
    'nuxt-security',
    '@nuxt/scripts',
    'nuxt-gtag',
    '@nuxtjs/html-validator',
    '@vueuse/nuxt',
    'dayjs-nuxt',
    'shadcn-nuxt',
    'nuxt-swiper',
    '@formkit/auto-animate/nuxt',
    'nuxt-aos',
    'nuxt-laravel-precognition',
    'vue-recaptcha/nuxt',
    'nuxt-booster',
    'nuxt-delay-hydration',
  ],

  plugins: ['~/plugins/nuxt-laravel-precognition.ts', '~/plugins/vue-google-map.ts'],

  build: {
    analyze: isDev,
    transpile: [
      '@fortawesome/vue-fontawesome',
      '@fortawesome/fontawesome-svg-core',
      '@fortawesome/free-solid-svg-icons',
      '@fortawesome/free-regular-svg-icons',
      '@fortawesome/pro-solid-svg-icons',
      '@fortawesome/pro-regular-svg-icons',
      '@fortawesome/free-brands-svg-icons',
      'vue-google-maps-community-fork',
      '@googlemaps/markerclusterer',
    ],
  },

[ThornWalli]

Hello @umaraziz0,

very strange, it seems that you are missing alias definitions.

Could you put a console.log in the file ./node_modules/nuxt-booster/dist/module.mjs line ~708?

It can't be that it can't find the import if the alias is set.

[ThornWalli]

Hello @umaraziz0,

I think I found the problem...

https://github.com/nuxt/module-builder/issues/349

[umaraziz0]

Hello @umaraziz0,

very strange, it seems that you are missing alias definitions.

Could you put a console.log in the file ./node_modules/nuxt-booster/dist/module.mjs line ~708?

It can't be that it can't find the import if the alias is set.

Hello, I tried this, but unfortunately nothing came out in the console. I tried deleting the node_modules, deleting the lockfile, and installing the dependencies again, but still the same issue.

Hello @umaraziz0,

I think I found the problem...

nuxt/module-builder#349

I see, is there any workaround that I can do in the meantime?

[ThornWalli]

@umaraziz0 Try this version 😉

npm i nuxt-booster@3.1.6-next.1

[umaraziz0]

@umaraziz0 Try this version 😉

npm i nuxt-booster@3.1.6-next.1

Still the same issue, unfortunately

[ThornWalli]

What does your “runtime” folder look like in the node_modules/nuxt-booster?

What does your typescript config look like?

[umaraziz0]

What does your “runtime” folder look like in the node_modules/nuxt-booster?

What does your typescript config look like?

Here it is, seems to still be missing the d.ts files

My tsconfig just extends nuxt's tsconfig.server.json, which I think is the default behavior. Haven't made any changes:

{
  "compilerOptions": {
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noEmit": true,
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "allowJs": true,
    "resolveJsonModule": true,
    "jsx": "preserve",
    "allowSyntheticDefaultImports": true,
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment",
    "paths": {
      "#imports": [
        "./types/nitro-imports"
      ],
      "~/*": [
        "../*",
        "../*"
      ],
      "@/*": [
        "../*",
        "../*"
      ],
      "~~/*": [
        "../*",
        "../*"
      ],
      "@@/*": [
        "../*",
        "../*"
      ],
      "nitropack": [
        "../node_modules/nitropack"
      ],
      "defu": [
        "../node_modules/defu"
      ],
      "h3": [
        "../node_modules/h3"
      ],
      "consola": [
        "../node_modules/consola"
      ],
      "ofetch": [
        "../node_modules/ofetch"
      ],
      "@unhead/vue": [
        "../node_modules/@unhead/vue"
      ],
      "@nuxt/devtools": [
        "../node_modules/@nuxt/devtools"
      ],
      "@vue/runtime-core": [
        "../node_modules/@vue/runtime-core"
      ],
      "@vue/compiler-sfc": [
        "../node_modules/@vue/compiler-sfc"
      ],
      "unplugin-vue-router/client": [
        "../node_modules/unplugin-vue-router/client"
      ],
      "@nuxt/schema": [
        "../node_modules/@nuxt/schema"
      ],
      "nuxt": [
        "../node_modules/nuxt"
      ],
      "#internal/nuxt/paths": [
        "../node_modules/nuxt/dist/core/runtime/nitro/paths"
      ],
      "~": [
        "./.."
      ],
      "@": [
        "./.."
      ],
      "~~": [
        "./.."
      ],
      "@@": [
        "./.."
      ],
      "assets": [
        "../assets"
      ],
      "assets/*": [
        "../assets/*"
      ],
      "public": [
        "../public"
      ],
      "public/*": [
        "../public/*"
      ],
      "#image": [
        "../node_modules/@nuxt/image/dist/runtime"
      ],
      "#image/*": [
        "../node_modules/@nuxt/image/dist/runtime/*"
      ],
      "#sitemap": [
        "../node_modules/@nuxtjs/sitemap/dist/runtime/types"
      ],
      "#nuxt-scripts-validator": [
        "../node_modules/@nuxt/scripts/dist/runtime/validation/valibot"
      ],
      "#nuxt-scripts": [
        "../node_modules/@nuxt/scripts/dist/runtime/types"
      ],
      "#nuxt-scripts-utils": [
        "../node_modules/@nuxt/scripts/dist/runtime/utils"
      ],
      "#dayjs": [
        "../node_modules/dayjs-nuxt/dist/runtime/composables/dayjs"
      ],
      "#aos": [
        "../node_modules/nuxt-aos/dist/runtime"
      ],
      "#aos/*": [
        "../node_modules/nuxt-aos/dist/runtime/*"
      ],
      "#booster": [
        "../node_modules/nuxt-booster/dist/runtime"
      ],
      "#booster/*": [
        "../node_modules/nuxt-booster/dist/runtime/*"
      ],
      "#nuxt-delay-hydration/api": [
        "./delay-hydration"
      ],
      "#vue-router": [
        "./vue-router"
      ],
      "#internal/nuxt-site-config": [
        "../node_modules/nuxt-site-config/dist/runtime/nitro/composables"
      ],
      "#internal/nuxt-site-config/*": [
        "../node_modules/nuxt-site-config/dist/runtime/nitro/composables/*"
      ],
      "#internal/nuxt-simple-robots": [
        "../node_modules/@nuxtjs/robots/dist/runtime/nitro/composables"
      ],
      "#internal/nuxt-simple-robots/*": [
        "../node_modules/@nuxtjs/robots/dist/runtime/nitro/composables/*"
      ],
      "#internal/nuxt-robots": [
        "../node_modules/@nuxtjs/robots/dist/runtime/nitro/composables"
      ],
      "#internal/nuxt-robots/*": [
        "../node_modules/@nuxtjs/robots/dist/runtime/nitro/composables/*"
      ],
      "#content/server": [
        "../node_modules/nuxt-link-checker/dist/runtime/nitro/composables/content-mock"
      ],
      "#link-checker/pure": [
        "../node_modules/nuxt-link-checker/dist/runtime/pure"
      ],
      "#link-checker/pure/*": [
        "../node_modules/nuxt-link-checker/dist/runtime/pure/*"
      ]
    },
    "lib": [
      "esnext",
      "webworker",
      "dom.iterable"
    ]
  },
  "include": [
    "./types/nitro-nuxt.d.ts",
    "../node_modules/@nuxt/eslint/runtime/server",
    "../node_modules/@nuxtjs/tailwindcss/runtime/server",
    "../node_modules/@nuxt/image/runtime/server",
    "../node_modules/@nuxt/fonts/runtime/server",
    "../node_modules/nuxt-site-config/dist/module.mjs/runtime/server",
    "../node_modules/@nuxtjs/robots/dist/module.mjs/runtime/server",
    "../node_modules/@nuxtjs/sitemap/dist/module.mjs/runtime/server",
    "../node_modules/nuxt-og-image/dist/module.mjs/runtime/server",
    "../node_modules/nuxt-schema-org/dist/module.mjs/runtime/server",
    "../node_modules/nuxt-seo-experiments/dist/module.mjs/runtime/server",
    "../node_modules/nuxt-link-checker/dist/module.mjs/runtime/server",
    "../node_modules/@nuxtjs/seo/runtime/server",
    "../node_modules/nuxt-security/runtime/server",
    "../node_modules/@nuxt/scripts/runtime/server",
    "../node_modules/nuxt-gtag/runtime/server",
    "../node_modules/@nuxtjs/html-validator/runtime/server",
    "../node_modules/@vueuse/nuxt/runtime/server",
    "../node_modules/dayjs-nuxt/runtime/server",
    "../node_modules/shadcn-nuxt/runtime/server",
    "../node_modules/nuxt-swiper/runtime/server",
    "../node_modules/@formkit/auto-animate/nuxt/runtime/server",
    "../node_modules/nuxt-aos/runtime/server",
    "../node_modules/nuxt-laravel-precognition/runtime/server",
    "../../runtime/server",
    "../node_modules/@nuxtjs/fontaine/runtime/server",
    "../node_modules/nuxt-booster/runtime/server",
    "../node_modules/nuxt-delay-hydration/runtime/server",
    "../node_modules/@nuxt/devtools/runtime/server",
    "../node_modules/@nuxt/telemetry/runtime/server",
    "./module/nuxt-site-config.d.ts",
    "./module/nuxt-robots.d.ts",
    "./module/@nuxtjs-sitemap.d.ts",
    "./types/nitro.d.ts",
    "../**/*",
    "../server/**/*"
  ],
  "exclude": [
    "../node_modules",
    "../node_modules/nuxt/node_modules",
    "../node_modules/nuxt-site-config/dist/node_modules",
    "../node_modules/@nuxtjs/robots/dist/node_modules",
    "../node_modules/@nuxtjs/sitemap/dist/node_modules",
    "../node_modules/nuxt-og-image/dist/node_modules",
    "../node_modules/nuxt-schema-org/dist/node_modules",
    "../node_modules/nuxt-seo-experiments/dist/node_modules",
    "../node_modules/nuxt-link-checker/dist/node_modules",
    "../dist"
  ]
}

[umaraziz0]

Update: I did a wipe of the node_modules folder and the d.ts files seems to be here now, but still having the same error

[ThornWalli]

@umaraziz0 Can you try to make an import from @nuxt/image?

And see if you get the same message. To narrow down the error.

e.g. import NuxtPicture from '#image/components/NuxtPicture';

I think it should all be there.

[umaraziz0]

import NuxtPicture from '#image/components/NuxtPicture';

Yep, gives me the same error. I've been relying on nuxt image's auto import, so I never had to manually import their components before

[ThornWalli]

@umaraziz0 Try with .vue extension… 🙃

[umaraziz0]

@ThornWalli nuxt image's component seems to be working now, however the BoosterPicture can't seem to find the declaration files for some reason

[ThornWalli]

@umaraziz0 Could you perhaps provide a small project to reproduce?

I can't reproduce it right now...

[umaraziz0]

@ThornWalli working on a company project right now so I might not be able to create an exact reproduction, but I'll see if i can recreate in another repo