Cannot find module 'astro:content'

[azan-n]

What version of astro are you using?

1.8.0

Are you using an SSR adapter? If so, which one?

No

What package manager are you using?

npm, pnpm

What operating system are you using?

macOS 13

Describe the Bug

I have been eagerly waiting for even a beta of the Content Collections RFC to start shipping my blog. Thanks to @bholmesdev I got a chance much earlier than I could expect. I upgraded from 1.6.4(?) to 1.8.0 but I got the TS error Cannot find module 'astro:content' or its corresponding type declarations.ts(2307) when trying to import the defineCollection function.

Steps to reproduce

1. pnpm create astro@latest or npm create astro@latest
2. Create a 'content' directory and create a 'config.ts' within the folder
3. Write import { defineCollection, z } from "astro:content" within the 'config.ts'

Continuing with this state of the application leads to no errors during the build or in the dev server.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-j2falm?file=content/config.ts

Participation

• [x] I am willing to submit a pull request for this issue.

[bholmesdev]

Hey @azan-n! Yes, you’ll need to run a build or use our new sync command to generate this module. Try running pnpm astro sync in your terminal.

[azan-n]

Try running pnpm astro sync in your terminal.

I have tried this with npx, pnpm, and pnpx in separate repos. Regardless, the error does not go away.

EDIT: In all cases, I do get a message that reads [content] Types generated 34ms

[bholmesdev]

@azan-n hm, and do you see a src/content/types.generated.d.ts file? If not, there might be something else going wrong. You can also quit and restart your editor, or reset the TS language server using the VS Code command palette (cmd + shift + P):

[bholmesdev]

Update: just realized types only generate if there is at least one .md or .mdx file inside a collection directory. It won't run on an empty content/ folder! Let me know if adding a file resolves your issue.

I also agree this is pretty confusing. Will address with a bug fix 👍

[azan-n]

do you see a src/content/types.generated.d.ts file?

No.

reset the TS language server

I make it a point after every generation command. I realize TS can be a bit slow to catchup.

at least one .md or .mdx file inside a collection directory

In all cases, I have had .md files in nested or the same directory as content/. I have no generated file in it, and the error persists.

I also agree this is pretty confusing. Will address with a bug fix 👍

Thanks so much for the support. I've had quite some time on my badge writing documentation. I'd love to help with it if required.

[r-sp]

I got the same msg Cannot find module 'astro:content' or its corresponding type declarations.ts(2307).

After creating hello-world.md inside content/blog/, and trying reset TS language server after that I try running npx astro sync, all problem gone.

Don't forget configuring schema and collection entry. Thanks 👍

[bholmesdev]

@rizkysaskiaputra Ah yes, I think an empty config file will block type gen as well. I think relaxing the error detection on collection files before generating types would be helpful. Good to know that works for you though!

[azan-n]

@rizkysaskiaputra Ah yes, I think an empty config file will block type gen as well. I think relaxing the error detection on collection files before generating types would be helpful. Good to know that works for you though!

My config file has been complete with schema declarations and the import statement. I just updated to 1.9.2 and still face the same issue.

EDIT: Updated to 2.0.0-beta.2. It works now. Thanks so much.

[bholmesdev]

So glad to hear that @azan-n! To anyone following the thread, you'll find future content collections improvements on the 2.0 beta branch. Install in your projects with npm i astro@beta. If you have the MDX integration, bump with npm i @astrojs/mdx@beta as well.

[natguy]

Hello, I'm getting a postCSS / @astrojs/tailwind error when I update this existing project to astro@beta & @astrojs/mdx@beta

Does @astrojs/tailwind 2.1.3 need to be updated too?

error Cannot read properties of undefined (reading 'postcss') File: /Users/.../node_modules/@astrojs/tailwind/dist/index.js:78:22 Code: 77 | const tailwindConfig = (userConfig == null ? void 0 : userConfig.value) ?? getDefaultTailwindConfig(config.srcDir);

78 | config.style.postcss.plugins.push(tailwindPlugin(tailwindConfig)); | ^ 79 | config.style.postcss.plugins.push(autoprefixerPlugin); 80 | if (applyBaseStyles) { 81 | injectScript("page-ssr", import '@astrojs/tailwind/base.css';); Stacktrace: TypeError: Cannot read properties of undefined (reading 'postcss')

Dependencies:

"dependencies": { "@astrojs/markdown-remark": "^1.2.0", "@astrojs/mdx": "^1.0.0-beta.2", "@astrojs/rss": "^2.0.0", "@astrojs/sitemap": "^1.0.0", "@astrojs/tailwind": "^2.1.3", "@astropub/md": "^0.1.4", "astro": "^2.0.0-beta.4", "tailwindcss": "^3.2.4" }, "devDependencies": { "@tailwindcss/typography": "^0.5.9" }

tailwind.config.cjs:

module.exports = { content: ['./src/*/.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], theme: { extend: {}, }, plugins: [ require('@tailwindcss/typography'), ], }

Note: build and sync + having a mdx file in /content/mycollection didn't fix the missing 'astro:content' module.

Thanks.

[bholmesdev]

@natguy Ah yes, you'll need to install @astrojs/tailwind@beta as well. We've introduced a small breaking changes to the integration internals. Happy to share we are baselining our betas today though, so you'll be free to install @latest soon enough 😄

[ilievskif]

@natguy Ah yes, you'll need to install @astrojs/tailwind@beta as well. We've introduced a small breaking changes to the integration internals. Happy to share we are baselining our betas today though, so you'll be free to install @latest soon enough 😄

This was the solution. Thank you!

[bholmesdev]

@ilievskif Nice! We just baselined all of our betas, so installing @latest for Astro core and the Tailwind integration should do the trick too 🙌

[MerlinMason]

I'm getting this same issue with Astro 2.1.9 in my src/content/config.ts file.

The code runs fine but I get an error from eslint/no-unresolved, is there specific way Eslint should be configured? I couldn't spot anything in the docs or examples.

[bholmesdev]

@MerlinMason Interesting, there shouldn't be anything else to configure here. I assume you tried running astro sync or astro dev to generate the astro:content module?

[MerlinMason]

Hi Ben, thanks for getting back to me!

Yeah the .astro/types.d.ts file exists, I'm running my dev server with astro check --watch & astro dev. There's also a src/env.d.ts which references the generated types. Regenerating the types with astro sync doesn't seem to make a difference.

I'm able to import astro:content into my .astro pages and the linter is happy, but importing into rss.xml.js or config.ts and it complains.

Looking inside .astro/types.d.ts I can see the following module has been declared 10 times (is that expected?)

declare module 'astro:content' {
    interface Render {
        '.mdx': Promise<{
            Content: import('astro').MarkdownInstance<{}>['Content'];
            headings: import('astro').MarkdownHeading[];
            remarkPluginFrontmatter: Record<string, any>;
        }>;
    }
}

And then there's a few other type definitions, but nothing else that mentions astro:content.

[bholmesdev]

Got it, thanks for confirming @MerlinMason. And that definitely shouldn't be declared 10 times! 😅 I'll look into that separately.

And admittedly... it sounds like everything is wired up correctly for you. I'm wondering if there's some eslint rule that's conflicting here. Can you send your eslint and prettier configs to be sure?

[MerlinMason]

Hi Ben, apologies for the huge delay here, I've been away on holiday and just catching up with messages - thanks again for looking into this!

Here's my config files, apologies the Eslint config is slightly long.

Prettier

```json { "tabWidth": 4, "printWidth": 100, "arrowParens": "always", "proseWrap": "always", "overrides": [ { "files": "*.mdx", "options": { "printWidth": 80 } } ] } ```

Eslint

```js { "env": { "browser": true, "es2021": true, "jest/globals": true }, "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": "latest", "sourceType": "module" }, "globals": { "React": true, "JSX": true }, "processor": "disable/disable", "extends": [ "plugin:@typescript-eslint/recommended", "plugin:react/recommended", "plugin:astro/recommended", "airbnb", "plugin:react/jsx-runtime", "plugin:react-hooks/recommended", "plugin:jest/recommended", "plugin:jest/style", "prettier" ], "plugins": ["react", "@typescript-eslint", "import", "jsx-a11y", "jest", "disable", "prettier"], "rules": { "import/extensions": 0, "import/no-extraneous-dependencies": ["error", { "devDependencies": true }], "react/require-default-props": 0, "react/function-component-definition": [2, { "namedComponents": "arrow-function" }], "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".tsx", ".mdx"] }], "react/jsx-props-no-spreading": 0 }, "settings": { "react": { "version": "detect" }, "import/parsers": { "@typescript-eslint/parser": [".ts", ".tsx"] }, "import/resolver": { "typescript": { "alwaysTryTypes": true // always try to resolve types under `@types` directory even it doesn't contain any source code, like `@types/unist` } } }, "overrides": [ { "files": ["**/*.mdx"], "extends": ["plugin:mdx/recommended"], "settings": { "mdx/code-blocks": true, "mdx/language-mapper": {} } }, { // we need to make sure we're not linting js files twice "files": ["**/*.js", "**/*.jsx"], "settings": { "disable/plugins": "@typescript-eslint" } }, { "files": ["*.astro"], "parser": "astro-eslint-parser", "parserOptions": { "parser": "@typescript-eslint/parser", "extraFileExtensions": [".astro"] } } ] } ```

[johny]

This issue should be reopened, its still happening unfortunately 🤷

[bholmesdev]

@johny Curious if you have a repro different from Merlin's above? This should be handled with the fixes outlined above, so I have a feeling we're fixing edge cases now

[bholmesdev]

@MerlinMason Late reply incoming! I poked around your setup, and I found eslint-config-airbnb and the import plugin were causing the issue.

First removing airbnb, I found installing eslint-import-resolver-typescript fixed any import/nounresolved errors. Trying to add airbnb back, a bit of Googling brought me to eslint-config-airbnb-typescript. Here's my final eslint and dependencies:

.eslintrc.json

```json { "env": { "browser": true, "es2021": true, "jest/globals": true }, "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": "latest", "sourceType": "module", "project": "./tsconfig.json" }, "globals": { "React": true, "JSX": true }, "processor": "disable/disable", "extends": [ "plugin:@typescript-eslint/recommended", "plugin:react/recommended", "plugin:astro/recommended", "airbnb", "airbnb-typescript", "plugin:react/jsx-runtime", "plugin:react-hooks/recommended", "plugin:jest/recommended", "plugin:jest/style", "prettier" ], "plugins": ["react", "@typescript-eslint", "import", "jsx-a11y", "jest", "disable", "prettier"], "rules": { "import/extensions": 0, "import/no-extraneous-dependencies": ["error", { "devDependencies": true }], "react/require-default-props": 0, "react/function-component-definition": [2, { "namedComponents": "arrow-function" }], "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".tsx", ".mdx"] }], "react/jsx-props-no-spreading": 0 }, "settings": { "react": { "version": "detect" }, "import/parsers": { "@typescript-eslint/parser": [".ts", ".tsx"] }, "import/resolver": { "typescript": { "alwaysTryTypes": true } } }, "overrides": [ { "files": ["**/*.mdx"], "extends": ["plugin:mdx/recommended"], "settings": { "mdx/code-blocks": true, "mdx/language-mapper": {} } }, { "files": ["**/*.js", "**/*.jsx"], "settings": { "disable/plugins": "@typescript-eslint" } }, { "files": ["*.astro"], "parser": "astro-eslint-parser", "parserOptions": { "parser": "@typescript-eslint/parser", "extraFileExtensions": [".astro"] } } ] } ```

package.json

```json { "dependencies": { "@astrojs/markdoc": "^0.1.2", "@astrojs/mdx": "^0.19.1", "astro": "^2.4.1", "eslint-config-airbnb": "^19.0.4", "kleur": "^4.1.5", "react": "^18.2.0" }, "devDependencies": { "@typescript-eslint/eslint-plugin": "^5.59.6", "@typescript-eslint/parser": "^5.59.6", "eslint": "^8.40.0", "eslint-config-airbnb-typescript": "^17.0.0", "eslint-config-prettier": "^8.8.0", "eslint-import-resolver-typescript": "^3.5.5", "eslint-plugin-airbnb": "0.0.1-security", "eslint-plugin-astro": "^0.27.0", "eslint-plugin-disable": "^2.0.3", "eslint-plugin-import": "^2.27.5", "eslint-plugin-jest": "^27.2.1", "eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-mdx": "^2.1.0", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.32.2", "jest": "^29.5.0", "typescript": "^5.0.4" } } ```

Hope this helps!

[bholmesdev]

Closing since this issue hasn't seen any replies. Seems reported issues with astro:content are linter-specific. Feel free to respond to my messages above as we debug @MerlinMason!

[lloydjatkinson]

This is an issue again with Astro 2.7:

 FAIL  src/domain/article-query.spec.ts [ src/domain/article-query.spec.ts ]
 FAIL  src/domain/book-query.spec.ts [ src/domain/book-query.spec.ts ]
 FAIL  src/domain/note-query.spec.ts [ src/domain/note-query.spec.ts ]
Error: Failed to load url astro:content (resolved id: astro:content) in /workspace/lloydatkinson.net/src/domain/types.ts. Does the file exist?

[bluwy]

@lloydjatkinson can you open a new issue with a repro? Thanks!

[RayyanNafees]

I just solved the issue by adding module declaration for .astro files in src/env.d.ts

declare module '*.astro'

[tsevdos]

If you are getting this error while deploying to Cloudflare Pages (SSG), you can resolve it with 2 options:

Either your change your build command to npx astro sync && npm run build on Cloudflare's dashboard (very easy solution)

OR

You generate the types locally by running the sync command locally npx astro sync and then commit / push the generated tsconfig.tsbuildinfo file to your repo. You only need to do this, if you change your .md / .mdx schema. Finally, you might have this file listed on your .gitignore file so be careful.

Edit: the second solution is not working, my bad...

[number44]

I had the same problem, command "npm run astro check" worked for me.

[arvi]

Had the same problem and npm run build then restarting TS server is what worked for me. 😄

[AndresdoSantos]

In my case I put the wrong name in the folder, instead of putting /content I put /contents 😄...This took me 30 minutes lol

[bennycode]

In my case the error TS2307: Cannot find module  astro:content showed in a blank Astro project. I had to run npm run dev and afterwards my WebStorm 2023.2.2 was able to find the type definitions for Astro. 🚀

[pranav-solvative]

npm run astro check

yes for me also...thank you :)

[SotaNoniwa]

Runing npx astro sync then close VSCode and restart it again resolved mine.

[Keoooo]

@SotaNoniwa good fix 🚀

[IsTheMartin]

Hi all, I'm facing this issue in Astro v4.3.2, is there a workaround or solution for that issue?

I've followed all your comments mentioned above a none of them have helped to me :(

Nvm, I've found the reason: don't put content/blog folder inside pages/ It should be src/content/blog