missing StoryblokComponent.astro type declarations #352

dovydas0 · 2023-07-20T12:08:17Z

Describe the issue you're facing

When building a page with Astro importing StoryblokComponent.astro component into .astro file gives back a type declaration error. However, other SDK's functions like "useStoryblokApi" are not giving any errors.

The Astro app is running even with an error and the StoryblokComponent is working. But ideally the error should not be there. I could not find any @types/ packages for the @storyblok/astro SDK. But if I go to /src/env.d.ts and provide this line of code: "declare module '@storyblok/astro/StoryblokComponent.astro';" the type error goes away.

Reproduction

https://github.com/doovis/storyblok-bug/blob/master/src/pages/index.astro

Steps to reproduce

Just opening up /src/pages/index.astro should show the error on the "StoryblokComponent" import line.

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 1.10 GB / 7.88 GB
Binaries:
    Node: 19.4.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.2.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
    Edge: Spartan (44.22621.1992.0), Chromium (114.0.1823.79)
    Internet Explorer: 11.0.22621.1

Used Package Manager

yarn

Error logs (Optional)

No response

Validations

Follow our Code of Conduct

manuelschroederdev · 2023-08-09T08:09:01Z

Hey @doovis,

thanks for reporting this bug. However, I cannot reproduce this behavior, neither in your example nor any other project. Are you still facing this issue?

Nish17g · 2023-08-09T16:59:03Z

Hello @manuelschroederdev , I am able to reproduce a similar issue with @storyblok/astro package .Screenshot below

vcotir · 2023-08-19T23:15:07Z

Same. Virtual modules are unimported?

thejackshelton · 2023-08-20T14:57:01Z

I have the same issue as well. It's this virtual module.

Also get another type error on blok.component

StoryblokComponent.astro

/**
 * convert blok components to camel case to match vite-plugin-storyblok-components
 */
let key = camelcase(blok.component);

Argument of type 'string | undefined' is not assignable to parameter of type 'string | readonly string[]'.
  Type 'undefined' is not assignable to type 'string | readonly string[]'.ts(2345)

thejackshelton · 2023-08-20T15:16:41Z

I made a PR for the latter:

#414

leimeter-joaquin · 2023-09-01T16:13:54Z

I am facing the same issue. I don't think I am experienced enough to be of any help but I ma getting the same error with the virtual modules not being found in the StoryblokComponent definition inside node_modules/@storyblok/astro/StoryblokComponent.astro.

Britnell · 2023-09-08T13:03:43Z

Hey, second this, have the exact same error

i am following the astro guide
& have the package installed

{
  "name": "test",
  "type": "module",
  "version": "0.0.1",
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "@storyblok/astro": "^3.0.0",
    "astro": "^3.0.11",
    "storyblok-js-client": "^6.0.0",
    "vite": "^4.4.9"
  }
}

F0rce · 2023-09-13T13:09:02Z

I am getting the exact same error like @Britnell with the exact same dependencies.

github-actions · 2023-09-20T09:39:15Z

🎉 This issue has been resolved in version 3.0.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

shixish · 2023-11-27T05:35:48Z

I'm on version 3.0.1 and I'm still seeing this error message. It appears to work anyway however. 🤷

manuelschroederdev · 2023-11-27T07:43:40Z

Hey @shixish, thanks for sharing. That's weird and I cannot reproduce it. Could you please share a minimal reproducible example?

shixish · 2023-11-27T08:35:10Z

@manuelschroederdev I put together a minimal setup here:
https://github.com/shixish/minimal-astro-storyblok/

The issue can be seen in both of these files:

I tried out this new repo with my Storyblok preview token and this repo appears to work. 👍

github-actions · 2023-12-04T15:53:37Z

🎉 This issue has been resolved in version 3.1.0-next.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

stvnfox · 2023-12-16T08:40:51Z

I'm currently having an error similar like above where camelcase is giving a type error:

TypeError: Expected the input to be string | string[] at Module.camelCase (file:///C:/Projecten/website-stvn/node_modules/.pnpm/[email protected]/node_modules/camelcase/index.js:59:9) at C:\Projecten\website-stvn\node_modules\.pnpm\@[email protected][email protected]\node_modules\@storyblok\astro\components\StoryblokComponent.astro:24:11 at AstroComponentInstance.StoryblokComponent [as factory] (C:\Projecten\website-stvn\node_modules\.pnpm\[email protected][email protected]\node_modules\astro\dist\runtime\server\astro-component.js:18:12) at AstroComponentInstance.init (C:\Projecten\website-stvn\node_modules\.pnpm\[email protected][email protected]\node_modules\astro\dist\runtime\server\render\astro\instance.js:33:29) at AstroComponentInstance.render (C:\Projecten\website-stvn\node_modules\.pnpm\[email protected][email protected]\node_modules\astro\dist\runtime\server\render\astro\instance.js:38:18) at Object.render (C:\Projecten\website-stvn\node_modules\.pnpm\[email protected][email protected]\node_modules\astro\dist\runtime\server\render\component.js:328:22) at Module.renderChild (C:\Projecten\website-stvn\node_modules\.pnpm\[email protected][email protected]\node_modules\astro\dist\runtime\server\render\any.js:29:17) at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

I'm on node 21.3.0 using pnpm and tried out every version of the storyblok-astro package but having this issue on every version.

Package.json file:

davidha99 · 2023-12-31T10:54:14Z

I see the same error shared by @shixish and @Britnell on version ^4.0.0. I'm following the example from Storyblok & Astro integration docs

test-post.astro

astro.config.mjs

edvinasjurele · 2024-02-13T07:36:58Z

I stumbled upon this issue too with v4.0.2

As per https://stackoverflow.com/a/74976845,

Important:
Node Package Imports are supported only when moduleResolution is set to "nodenext" or "node16".

it seems the client need to set the moduleResolution in the tsconfig compilerOptions:

tsconfig.json

...
"compilerOptions": {
    "moduleResolution": "nodenext", // also node16 or bundler
     ...
  }
...

It seems bundler option works fine as it does not require the extensions to be there. But still I cannot make it to fully work 🤔

I see that the DEMO https://stackblitz.com/edit/astro-sdk-demo?file=tsconfig.json extends from astro/tsconfigs/base which has the: "moduleResolution": "Node16",

schabibi1 · 2024-02-28T09:43:37Z

Thanks everyone for reporting.
Could you all try with @storyblok/astro 4.0.3? This version should fix the issue, as I tested and it worked.

Related issue #637

Feel free to re-open this issue if you face a similar case.

ybabenkoJapp · 2024-12-20T11:27:03Z

Hi! I updated Astro js to 5.0.4 and @storyblok/astro to 5.1.0. Now I have such annoying ts error. How to fix it? Thanks you for your help

import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro";
Cannot find module '@storyblok/astro/StoryblokComponent.astro' or its corresponding type declarations.
There are types at '/Users/ybabenko/WebstormProjects/project-name/node_modules/@storyblok/astro/dist/components/StoryblokComponent.d.ts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'.ts(2307)

node version v18.20.4
macOS sequoia 15.1.1
deps
"dependencies": {
"@astrojs/netlify": "^6.0.1",
"@astrojs/sitemap": "3.2.1",
"@astrojs/tailwind": "5.1.3",
"@astrojs/upgrade": "^0.4.2",
"@astrojs/vue": "^5.0.1",
"@lottiefiles/lottie-player": "^2.0.2",
"@popperjs/core": "^2.11.8",
"@storyblok/astro": "^5.1.0",
"@vitejs/plugin-basic-ssl": "1.2.0",
"ansi-align": "3.0.1",
"astro": "5.0.4",
"string-width": "^4.2.3",
"string-width-cjs": "^5.1.1",
"swiper": "11.1.15",
"tailwindcss": "3.4.16",
"vue": "3.5.13"
},
"devDependencies": {
"prettier": "3.4.2",
"prettier-plugin-astro": "^0.14.1",
"prettier-plugin-tailwindcss": "^0.6.9",
"typescript": "^5.7.2",
"vite": "^6.0.3"
},
"resolutions": {
"strip-ansi": "^6.0.1",
"string-width": "^4.2.3"
}

tsconfig.json

{
"extends": "astro/tsconfigs/base",
"include": [".astro/types.d.ts", "**/"],
"exclude": ["dist"],
"compilerOptions": {
"strict": true,
"target": "ESNext",
"module": "ESNext",
"lib": ["dom", "dom.iterable"],
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"baseUrl": ".",
"types": ["astro/client"],
"paths": {
"@/": ["src/*"]
},
"jsx": "preserve"
}
}

F0rce · 2024-12-20T23:38:14Z

@ybabenkoJapp probably related to #1033 - or better said that's the new issue for it

dovydas0 added pending-author [Issue] Awaiting further information or action from the issue author pending-triage [Issue] Ticket is pending to be prioritised labels Jul 20, 2023

manuelschroederdev mentioned this issue Sep 19, 2023

Fix: missing Astro component type declarations #454

Merged

manuelschroederdev closed this as completed in #454 Sep 20, 2023

github-actions bot added the released label Sep 20, 2023

manuelschroederdev reopened this Nov 27, 2023

github-actions bot added the released on @next label Dec 4, 2023

schabibi1 self-assigned this Feb 27, 2024

schabibi1 added investigation [Issue] The Storyblok team is investigating and removed pending-author [Issue] Awaiting further information or action from the issue author pending-triage [Issue] Ticket is pending to be prioritised labels Feb 27, 2024

schabibi1 closed this as completed Feb 28, 2024

schabibi1 mentioned this issue Feb 28, 2024

Fix blok.component type error when blok.component is undefined. #414

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

missing StoryblokComponent.astro type declarations #352

missing StoryblokComponent.astro type declarations #352

dovydas0 commented Jul 20, 2023

manuelschroederdev commented Aug 9, 2023

Nish17g commented Aug 9, 2023 •

edited

Loading

vcotir commented Aug 19, 2023

thejackshelton commented Aug 20, 2023 •

edited

Loading

thejackshelton commented Aug 20, 2023

leimeter-joaquin commented Sep 1, 2023

Britnell commented Sep 8, 2023 •

edited

Loading

F0rce commented Sep 13, 2023

github-actions bot commented Sep 20, 2023

shixish commented Nov 27, 2023

manuelschroederdev commented Nov 27, 2023

shixish commented Nov 27, 2023

github-actions bot commented Dec 4, 2023

stvnfox commented Dec 16, 2023

davidha99 commented Dec 31, 2023 •

edited

Loading

edvinasjurele commented Feb 13, 2024

schabibi1 commented Feb 28, 2024

ybabenkoJapp commented Dec 20, 2024

F0rce commented Dec 20, 2024

missing StoryblokComponent.astro type declarations #352

missing StoryblokComponent.astro type declarations #352

Comments

dovydas0 commented Jul 20, 2023

Describe the issue you're facing

Reproduction

Steps to reproduce

System Info

Used Package Manager

Error logs (Optional)

Validations

manuelschroederdev commented Aug 9, 2023

Nish17g commented Aug 9, 2023 • edited Loading

vcotir commented Aug 19, 2023

thejackshelton commented Aug 20, 2023 • edited Loading

thejackshelton commented Aug 20, 2023

leimeter-joaquin commented Sep 1, 2023

Britnell commented Sep 8, 2023 • edited Loading

F0rce commented Sep 13, 2023

github-actions bot commented Sep 20, 2023

shixish commented Nov 27, 2023

manuelschroederdev commented Nov 27, 2023

shixish commented Nov 27, 2023

github-actions bot commented Dec 4, 2023

stvnfox commented Dec 16, 2023

davidha99 commented Dec 31, 2023 • edited Loading

edvinasjurele commented Feb 13, 2024

schabibi1 commented Feb 28, 2024

ybabenkoJapp commented Dec 20, 2024

F0rce commented Dec 20, 2024

Nish17g commented Aug 9, 2023 •

edited

Loading

thejackshelton commented Aug 20, 2023 •

edited

Loading

Britnell commented Sep 8, 2023 •

edited

Loading

davidha99 commented Dec 31, 2023 •

edited

Loading