Cannot import any of the booster components #1112

umaraziz0 · 2024-08-28T09:31:35Z

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:

Import a booster component
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%',
    },
  },

The text was updated successfully, but these errors were encountered:

ThornWalli · 2024-08-28T15:24:45Z

Hello @umaraziz0,

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

{
  modules: ['nuxt-booster']
}

umaraziz0 · 2024-09-03T02:54:52Z

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 · 2024-09-03T09:02:25Z

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 · 2024-09-05T10:05:34Z

Hello @umaraziz0,

I think I found the problem...

nuxt/module-builder#349

umaraziz0 · 2024-09-05T10:25:13Z

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 · 2024-09-05T11:19:48Z

@umaraziz0 Try this version 😉

npm i [email protected]

umaraziz0 · 2024-09-05T11:36:02Z

@umaraziz0 Try this version 😉

npm i [email protected]

Still the same issue, unfortunately

ThornWalli · 2024-09-05T11:40:37Z

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

What does your typescript config look like?

umaraziz0 · 2024-09-05T11:44:59Z

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 · 2024-09-05T11:48:51Z

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 · 2024-09-05T12:11:16Z

@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 · 2024-09-05T12:26:30Z

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 · 2024-09-05T12:42:51Z

@umaraziz0 Try with .vue extension… 🙃

umaraziz0 · 2024-09-05T12:59:13Z

@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 · 2024-09-05T13:30:40Z

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

I can't reproduce it right now...

umaraziz0 · 2024-09-05T13:36:25Z

@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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot import any of the booster components #1112

Cannot import any of the booster components #1112

umaraziz0 commented Aug 28, 2024

ThornWalli commented Aug 28, 2024

umaraziz0 commented Sep 3, 2024 •

edited

Loading

ThornWalli commented Sep 3, 2024

ThornWalli commented Sep 5, 2024 •

edited

Loading

umaraziz0 commented Sep 5, 2024 •

edited

Loading

ThornWalli commented Sep 5, 2024

umaraziz0 commented Sep 5, 2024

ThornWalli commented Sep 5, 2024

umaraziz0 commented Sep 5, 2024

umaraziz0 commented Sep 5, 2024

ThornWalli commented Sep 5, 2024

umaraziz0 commented Sep 5, 2024

ThornWalli commented Sep 5, 2024

umaraziz0 commented Sep 5, 2024

ThornWalli commented Sep 5, 2024

umaraziz0 commented Sep 5, 2024

Cannot import any of the booster components #1112

Cannot import any of the booster components #1112

Comments

umaraziz0 commented Aug 28, 2024

ThornWalli commented Aug 28, 2024

umaraziz0 commented Sep 3, 2024 • edited Loading

ThornWalli commented Sep 3, 2024

ThornWalli commented Sep 5, 2024 • edited Loading

umaraziz0 commented Sep 5, 2024 • edited Loading

ThornWalli commented Sep 5, 2024

umaraziz0 commented Sep 5, 2024

ThornWalli commented Sep 5, 2024

umaraziz0 commented Sep 5, 2024

umaraziz0 commented Sep 5, 2024

ThornWalli commented Sep 5, 2024

umaraziz0 commented Sep 5, 2024

ThornWalli commented Sep 5, 2024

umaraziz0 commented Sep 5, 2024

ThornWalli commented Sep 5, 2024

umaraziz0 commented Sep 5, 2024

umaraziz0 commented Sep 3, 2024 •

edited

Loading

ThornWalli commented Sep 5, 2024 •

edited

Loading

umaraziz0 commented Sep 5, 2024 •

edited

Loading