TanStack
Error loading dynamically imported module
Which project does this relate to?
Router
Describe the bug
Our team upgraded the router package to 1.121.21 and the router-cli is currently at 11.121.21. One of our members is currently encountering the following issue sporadically:
error loading dynamically imported module: http://localhost:5173/src/routes/_protected/_home/admin/reviews/index.tsx?t=1750261158805&tsr-split=component
It happens on some pages but not others. Most of our pages look very similar to one another and overall is very simple. Most of the logic is encapsulated in extracted components:
// where the error occurs
import { OxygenPermissions } from '@/permissions';
import { useState } from 'react';
import { Button } from '@/ui/common/Button';
import {
Dialog,
DialogDescription,
DialogDrawer,
DialogHeader,
DialogOverlay,
DialogTitle,
DialogTrigger,
} from '@/ui/common/Dialog';
import { ReviewTemplateForm } from '@/ui/features/core/review/ReviewTemplateForm';
import { ReviewTemplateTable } from '@/ui/features/core/review/ReviewTemplateTable';
import { GlobalBlock } from '@/ui/layouts/GlobalBlock';
import { ProjectActions, ProjectHeader, ProjectTitle } from '@/ui/layouts/ProjectLayout';
import { Rbac } from '@/ui/layouts/Rbac';
function ReviewTemplatesPage() {
const [open, setOpen] = useState(false);
return (
<Rbac permissions={[OxygenPermissions.GET_REVIEW_TEMPLATES]} blockComponent={<GlobalBlock />}>
<ProjectHeader>
<ProjectTitle>Review Templates</ProjectTitle>
<Rbac permissions={[OxygenPermissions.WRITE_REVIEW_TEMPLATES]}>
<ProjectActions>
<Dialog open={open} onOpenChange={setOpen}>
<DialogOverlay />
<DialogTrigger asChild>
<Button>Add Review Template</Button>
</DialogTrigger>
<DialogDrawer>
<DialogHeader>
<DialogTitle>New Review Template</DialogTitle>
<DialogDescription>Fill out the form below to add a new review template.</DialogDescription>
</DialogHeader>
<ReviewTemplateForm />
</DialogDrawer>
</Dialog>
</ProjectActions>
</Rbac>
</ProjectHeader>
<ReviewTemplateTable />
</Rbac>
);
}
export const Route = createFileRoute(
{
component: ReviewTemplatesPage,
},
);
Here is another page where the error NEVER occurs:
import { OxygenPermissions } from '@permissions';
import { useState } from 'react';
import { Button } from '@/ui/common/Button';
import {
Dialog,
DialogDescription,
DialogDrawer,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/ui/common/Dialog';
import { RoleForm } from '@/ui/features/core/user/RoleForm';
import { RolesTable } from '@/ui/features/core/user/RolesTable';
import { GlobalBlock } from '@/ui/layouts/GlobalBlock';
import {
ProjectActions,
ProjectHeader,
ProjectTitle
} from '@/ui/layouts/ProjectLayout';
import { Rbac } from '@/ui/layouts/Rbac';
import { filterSchema } from '@/utils/filterSchema';
import type { z } from 'zod';
function RolesPage() {
const [open, setOpen] = useState(false);
return (
<Rbac permissions={[OxygenPermissions.GET_ROLES]} blockComponent={<GlobalBlock />}>
<ProjectHeader>
<ProjectTitle>Roles</ProjectTitle>
<Rbac permissions={[OxygenPermissions.WRITE_ROLES]}>
<ProjectActions>
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button>Add Role</Button>
</DialogTrigger>
<DialogDrawer>
<DialogHeader>
<DialogTitle>New Role</DialogTitle>
<DialogDescription>Fill out the form below to add a new role.</DialogDescription>
</DialogHeader>
<RoleForm />
</DialogDrawer>
</Dialog>
</ProjectActions>
</Rbac>
</ProjectHeader>
<RolesTable />
</Rbac>
);
}
type RolesFiltersSchema = z.infer<typeof filterSchema>;
export const Route = createFileRoute({
component: RolesPage,
validateSearch: filterSchema,
});
So far the only solution we've found is to simply restart the dev server but I'm more interested in why this error occurs so we can put a more permanent fix on it. Running tsr generate by itself usually doesn't solve the issue and we've gone through the usual steps of reinstalling packages.
Your Example Website or App
n/a
Steps to Reproduce the Bug or Issue
No real steps to re-produce. It honestly comes up completely randomly.
Expected behavior
It should not be throwing this error.
Screenshots or Videos
No response
Platform
MacOS and Firefox dev edition
Additional context
No response
can you please provide a full debug log by setting the following env var
export TSR_VITE_DEBUG=true
@schiller-manuel Sure thing. Once I encounter it again, I'll update this issue.
@brenelz Nope. I've been monitoring it for a while now and I haven't seen it pop up. If it ever comes up again, I'll update this thread.
I've encountered this issue today & for me the problem was the combination of TanStack-Router Link-components with HeroUI Button-components.
In case anybody else comes across this issue and it might help:
Minimal Sample:
"@tanstack/react-router": "^1.130.10",
"@tanstack/react-router-devtools": "^1.130.10",
import { Button } from "@heroui/react";
import { GearIcon } from "@phosphor-icons/react";
import { Link } from "@tanstack/react-router";
export function Header() {
return (
<header>
<div>
<Link to="/">
Home
</Link>
<Link to="/settings">
<Button>
<GearIcon size={20} />
</Button>
</Link>
</div>
</header>
);
}
This component was breaking the on page navigation from Home to Settings & made the full page reload on clicking the Settings icon, with this console output:
Loading failed for the module with source “http://localhost:5174/node_modules/.vite/deps/dist-IFRPXU42.js?v=53481d4f”. [localhost:5174](http://localhost:5174/)
Uncaught (in promise) TypeError: error loading dynamically imported module: http://localhost:5174/node_modules/.vite/deps/dist-IFRPXU42.js?v=53481d4f
import { GearIcon } from "@phosphor-icons/react";
import { Link } from "@tanstack/react-router";
export function Header() {
return (
<header>
<div>
<Link to="/">
Home
</Link>
<Link to="/settings">
<button className="button">
<GearIcon size={20} />
</button>
</Link>
</div>
</header>
);
}
Replacing the HeroUI Button with a regular HTML button/div or even different UI package button like antd completely removed this issue & restored regular navigation.
