missing StoryblokComponent.astro type declarations

dovydas0 commented 1 year ago

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

[X] Follow our Code of Conduct

manuelschroederdev commented 1 year ago

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 commented 1 year ago

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

vcotir commented 1 year ago

Same. Virtual modules are unimported?

thejackshelton commented 1 year ago

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 commented 1 year ago

I made a PR for the latter:

https://github.com/storyblok/storyblok-astro/pull/414

leimeter-joaquin commented 1 year ago

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 commented 1 year ago

Hey, second this, have the exact same error grafik

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 commented 1 year ago

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

github-actions[bot] commented 1 year ago

:tada: This issue has been resolved in version 3.0.1 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

shixish commented 10 months ago

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

manuelschroederdev commented 10 months ago

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

shixish commented 10 months ago

@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[bot] commented 10 months ago

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

The release is available on:

Your semantic-release bot :package::rocket:

stvnfox commented 10 months ago

I'm currently having an error similar like above where camelcase is giving a type error: TypeError: Expected the input to bestring | string[] at Module.camelCase (file:///C:/Projecten/website-stvn/node_modules/.pnpm/camelcase@8.0.0/node_modules/camelcase/index.js:59:9) at C:\Projecten\website-stvn\node_modules\.pnpm\@storyblok+astro@3.1.0-next.3_astro@4.0.6\node_modules\@storyblok\astro\components\StoryblokComponent.astro:24:11 at AstroComponentInstance.StoryblokComponent [as factory] (C:\Projecten\website-stvn\node_modules\.pnpm\astro@4.0.6_typescript@5.3.3\node_modules\astro\dist\runtime\server\astro-component.js:18:12) at AstroComponentInstance.init (C:\Projecten\website-stvn\node_modules\.pnpm\astro@4.0.6_typescript@5.3.3\node_modules\astro\dist\runtime\server\render\astro\instance.js:33:29) at AstroComponentInstance.render (C:\Projecten\website-stvn\node_modules\.pnpm\astro@4.0.6_typescript@5.3.3\node_modules\astro\dist\runtime\server\render\astro\instance.js:38:18) at Object.render (C:\Projecten\website-stvn\node_modules\.pnpm\astro@4.0.6_typescript@5.3.3\node_modules\astro\dist\runtime\server\render\component.js:328:22) at Module.renderChild (C:\Projecten\website-stvn\node_modules\.pnpm\astro@4.0.6_typescript@5.3.3\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 commented 9 months ago

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 commented 8 months ago

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 commented 7 months ago

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.

storyblok / storyblok-astro