CollectionDoesNotExistError on fresh install of "Astro Starter Kit: Blog"

[hirasso]

What version of astro are you using?

2.6.4

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

No

What package manager are you using?

npm

What operating system are you using?

Mac

What browser are you using?

Chrome

Describe the Bug

I installed the "Starter Kit: Blog" from https://github.com/withastro/astro/tree/main/examples/blog

When I run npm run dev, the dev server starts and I can visit the site on localhost:3000. The home (/) and /about/ pages work as expected, but on the /blog/ page, I am getting a CollectionDoesNotExistError:

Any idea what's happening here? I haven't changed anything, just npm create astro@latest -- --template blog and said "yes" to all questions. The weird thing is that the demo on stackblitz works just fine...

Link to Minimal Reproducible Example

https://github.com/hirasso/astro-starter-kit-blog

Participation

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

[hirasso]

I have found the issue, and it's a weird one 👽

This is the path I had put my astro install in:

/Users/<me>/Documents/__test/my-astro-install

Notice the folder /__test/ there? The leading underscores seem to break something in astro! When I remove them, like so:

/Users/<me>/Documents/test/my-astro-install

...the content collections are starting to work.

Out of curiosity I also tested it with only one underscore (/_test/), that also breaks the content collections.

[alexzub]

@hirasso wow, thank you for posting the solution.

I've been fighting with this error for the last 2 days. Sure enough, a folder named "_Projects" was the culprit!
Renamed to "-Projects" instead (which broke a number of other things for me, but it is what it is), and it's now working.

Definitely a bug, and one that would be an incredibly difficult one to trouble shoot for most people.

[bluwy]

I'm guessing the bug is here:

astro/packages/astro/src/content/utils.ts

Lines 288 to 297 in d2020c2

	export function hasUnderscoreBelowContentDirectoryPath(
	fileUrl: URL,
	contentDir: ContentPaths['contentDir']
	): boolean {
	const parts = fileUrl.pathname.replace(contentDir.pathname, '').split('/');
	for (const part of parts) {
	if (part.startsWith('_')) return true;
	}
	return false;
	}

We do only check for the underscore within the project root (.replace handling), but maybe the pathname didn't match.

[hilmanski]

happen to me as well.
I have a normal named folder. (no underscore or - )

this error shows up

I already have that folder

[hirasso]

I'm guessing the bug is here:

astro/packages/astro/src/content/utils.ts

Lines 288 to 297 in d2020c2

	export function hasUnderscoreBelowContentDirectoryPath(
	fileUrl: URL,
	contentDir: ContentPaths['contentDir']
	): boolean {
	const parts = fileUrl.pathname.replace(contentDir.pathname, '').split('/');
	for (const part of parts) {
	if (part.startsWith('_')) return true;
	}
	return false;
	}

We do only check for the underscore within the project root (.replace handling), but maybe the pathname didn't match.

I just deactivated this function and ran the test again – turns out it's not related to the described bug. This is what I did:

• removed the first if clause in getEntryType() entirely
• ran pnpm --filter astro run build
• ran pnpm --filter @example/blog run dev
• Visited http://localhost:3000/blog

Got the same error

[hirasso]

Something seems to be going wrong in globWithUnderscoresIgnored:

astro/packages/astro/src/content/vite-plugin-content-virtual-mod.ts

Lines 210 to 213 in 869197a

	function globWithUnderscoresIgnored(relContentDir: string, exts: string[]): string[] {
	const extGlob = getExtGlob(exts);
	return [`${relContentDir}/**/*${extGlob}`, `!**/_*/**${extGlob}`, `!**/_*${extGlob}`];
	}

By the way, how do I embed a source code snippet how you did @bluwy ? :) found it

[hirasso]

Ran a test. This is the current output from globWithUnderscoresIgnored:

[
  '/src/content//**/*{.md,.mdx}',
  '!**/_*/**{.md,.mdx}',
  '!**/_*{.md,.mdx}'
]

The problem is that the negation patterns are being matched on the full path. Changed the function to this:

function globWithUnderscoresIgnored(relContentDir: string, exts: string[]): string[] {
	const extGlob = getExtGlob(exts);
-       return [`${relContentDir}/**/*${extGlob}`, `!**/_*/**${extGlob}`, `!**/_*${extGlob}`]; 
+	return [`${relContentDir}**/*${extGlob}`, `!${relContentDir}_*/**${extGlob}`, `!${relContentDir}_*${extGlob}`];
}

This fixed the content collections for me 🎉

A drive-by improvement would be that the double // in the first entry would be gone. I'm not sure if relContentDir could ever not have a trailing slash? If so, we could do this:

function globWithUnderscoresIgnored(relContentDir: string, exts: string[]): string[] {
	const extGlob = getExtGlob(exts);
	const contentDir = addTrailingSlash(relContentDir).trim();
	return [`${contentDir}**/*${extGlob}`, `!${contentDir}_*/**${extGlob}`, `!${contentDir}_*${extGlob}`];
}

function addTrailingSlash(path: string): string {
	return path.endsWith('/') ? path : `${path}/`;
}