Loader data does not persist with client navigation in dev mode when using Remix v2

[EbaraKoji]

Issue Description

When using remix>=2.12, the notes data fetched by loader is gone when revisiting /notes page by Link components.
This problem only happens in dev mode. When running server by npm run build and npm start, it works fine as expected.

Debugging

To inspect the problem I logged useLoaderData() to the console.

const NotesPage = () => {
  const loadedData = useLoaderData<typeof loader>()
  console.log(typeof loadedData)
  console.log(loadedData)
  const { notes } = loadedData
  return (
    <main>
      <NewNote />
      {notes?.length > 0 && (
        <div className='mt-4 w-4/5 mx-auto'>
          <NoteList notes={notes} />
        </div>
      )}
    </main>
  )
}

When visiting the /notes page for the first time, the loadedData is correctly set as list of note.

object
notes: (4) [{…}, {…}, {…}, {…}]

When visiting again by the Link component, the loadedData is just the JS code of type string.

string
export const notes = [
	{
		id: "b6d2514f-0601-4c7a-91b0-c109526bc9de",
		title: "test note",
		content: "test content",
		createdAt: "2024-10-09T10:33:29.874Z"
	},
	{
		id: "6e5d715f-3e4a-4f6e-8614-91622ecf1d48",
		title: "test note 2",
		content: "test content 2",
		createdAt: "2024-10-09T10:36:15.603Z"
	}
];
export default {
	notes: notes
};

Solution

Moving notes.json from the root of the project to app folder fixed the problem.
Related Issue on Stack Overflow