Same post shown twice in the blog list

[Zwyx]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

I noticed one of my blog posts showing twice in the main blog list. One time rightfully, the other time taking the spot of another post. I managed to get a minimal setup to reproduce it:

Reproducible demo

https://stackblitz.com/edit/github-bmgrpn

Steps to reproduce

From a fresh Docusaurus install, empty the blog folder and create the two folders and files that are in it now.

On the website, in the blog, there are two posts: Post 1 and Post 2. We can see them in the list of recent posts. However, Post 1 is not present in the main list, and Post 2 is present twice:

We also notice this React error in the console:

react-dom.development.js?ac89:67 Warning: Encountered two children with the same key, `/blog/post2`. Keys should be unique so that components maintain their identity across updates.

Note: it is still possible to build the site with yarn build, the error won't be present in the output.

Other observations:

• Renaming any of the two blog post folders (simply changing one character) fixes the issue (it looks like hashes colliding, so I tinkered in docuHash in docusaurus-utils/src/hashUtils.ts but it didn't do anything conclusive).

• Changing the 4th line of the Post 2 index.mdx file from tags: [tag] to tags: [] makes now Post 1 being present twice instead of Post 2:

Expected behavior

No duplicate post.

Actual behavior

See above.

Your environment

• Public source code: https://stackblitz.com/edit/github-bmgrpn or https://github.com/Zwyx/docusaurus-bug-demo
• Public site URL: N/A — building the site works, it's only when running in dev mode that the issue appears
• Docusaurus version used: 2.2.0
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome 108, Node 18.
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Ubuntu 22.04.1 LTS

Self-service

• I'd be willing to fix this bug myself.

[Josh-Cena]

Nice construction—we have a hash collision! The culprit is in this function:

docusaurus/packages/docusaurus/src/server/routes.ts

Lines 66 to 88 in e8a0763

	export function genChunkName(
	modulePath: string,
	prefix?: string,
	preferredName?: string,
	shortId: boolean = process.env.NODE_ENV === 'production',
	): string {
	let chunkName = chunkNameCache.get(modulePath);
	if (!chunkName) {
	if (shortId) {
	chunkName = simpleHash(modulePath, 8);
	} else {
	let str = modulePath;
	if (preferredName) {
	const shortHash = simpleHash(modulePath, 3);
	str = `${preferredName}${shortHash}`;
	}
	const name = str === '/' ? 'index' : docuHash(str);
	chunkName = prefix ? `${prefix}---${name}` : name;
	}
	chunkNameCache.set(modulePath, chunkName);
	}
	return chunkName;
	}

Here are two inputs and outputs:

[Arguments] {
  '0': '@site/blog/2022-11-18-bye-medium/index.mdx?truncated=true',
  '1': 'content',
  '2': '/blog'
} => content---blogc-99-485
[Arguments] {
  '0': '@site/blog/2019-10-05-react-nfc/index.mdx?truncated=true',
  '1': 'content',
  '2': '/blog'
} => content---blogc-99-485

The two blog modules have the exact same hash, so the list page receives the following props:

  "/blog-7e3": {
    "__comp": "__comp---theme-blog-list-pagea-6-a-7ba",
    "__context": {
      "plugin": "plugin---blogdb-9-70f"
    },
    "sidebar": "sidebar---blog-814-8ac",
    "items": [
      {
        "content": "content---blogc-99-485"
      },
      {
        "content": "content---blogc-99-485"
      }
    ],
    "metadata": "metadata---blogb-2-b-df1"
  },

I think we have to append an incrementing suffix to avoid collision.