Unable to import StructuredText from @datocms/astro in Astro project

Hi,

I’m working on an Astro project and have installed the @datocms/astro package using npm install @datocms/astro. However, when I try to import the StructuredText component from @datocms/astro/src/StructuredText, I encounter the following error in VSCode:

Error: 'StructuredText' is declared but its value is never read.ts(6133) Cannot find module '@datocms/astro/StructuredText' or its corresponding type declarations.

I’ve tried importing from different paths such as @datocms/astro and @datocms/astro/src/StructuredText, but the issue persists.

Could you please advise on how to properly import and use the StructuredText component in this setup? Any help would be greatly appreciated!

Thanks!

Hi @phillee8705,

There are a couple different things going on here. Could I please suggest you use our Astro Starter Kit to begin with? Or look at an example file from it to see how we use Structured Text there?

To answer your questions, though, there are two separate errors:
'StructuredText' is declared but its value is never read.ts(6133)

This just means you imported it but haven’t used it in the file yet. It’s just a warning that you have a import you don’t need. Once you use the <StructuredText/> component, it will go away.

As for:
Cannot find module '@datocms/astro/StructuredText' or its corresponding type declarations.

Please be sure you’re importing it like this (with curly braces, and without a specific folder):

// Do this
import { StructuredText } from '@datocms/astro';

If you try to import it like:

// Not this. This is wrong and won't work.
import StructuredText from '@datocms/astro/src/StructuredText';

You’re importing the wrong thing (an invalid default export vs a named constant), and your IDE is warning you about it. Here’s a blog article explaining what that means: https://callbackcat.medium.com/understand-the-difference-between-default-and-named-imports-and-exports-fc04b2736c1a

But hopefully the starter kit will show the recommended ways to use our packages :slight_smile: Let us know if you need further help!

1 Like