T
TanStack•2mo ago
correct-apricot

Automatic code splitting causing route files to import from my entry point (circular)

Hey, everyone! I'm running into a strange issue with automatic code splitting. Essentially, I have a SPA which has an entrypoint of lead-journey.js. My vite config is adding these imports to my index.html: 
    <script type="module" crossorigin src="/assets/lead-journey.js?v=17719289870"></script>
    <link rel="modulepreload" crossorigin href="/assets/utils-C-Suy_BF.js?v=17719289870">
    <link rel="stylesheet" crossorigin href="/assets/lead-journey.css?v=17719289870">
    <script type="module" crossorigin src="/assets/lead-journey.js?v=17719289870"></script>
    <link rel="modulepreload" crossorigin href="/assets/utils-C-Suy_BF.js?v=17719289870">
    <link rel="stylesheet" crossorigin href="/assets/lead-journey.css?v=17719289870">
When loading a page of the app, I get an invariant failed error in the console (I have minify turned off so that the symbols are easier to read): 
utils-C-Suy_BF.js:5295 Error: Invariant failed
    at invariant (lead-journey.js:9:11)
    at Object.select (lead-journey.js:4837:7)
    at lead-journey.js:3690:19
    at memoizedSelector (lead-journey.js:3563:28)
    at lead-journey.js:3582:20
    at Object.useSyncExternalStore (utils-C-Suy_BF.js:4544:29)
    at react_production.useSyncExternalStore (utils-C-Suy_BF.js:837:35)
    at withSelector_production.useSyncExternalStoreWithSelector (lead-journey.js:3591:17)
    at useStore (lead-journey.js:3615:37)
    at useRouterState (lead-journey.js:3680:10)
utils-C-Suy_BF.js:5295 Error: Invariant failed
    at invariant (lead-journey.js:9:11)
    at Object.select (lead-journey.js:4837:7)
    at lead-journey.js:3690:19
    at memoizedSelector (lead-journey.js:3563:28)
    at lead-journey.js:3582:20
    at Object.useSyncExternalStore (utils-C-Suy_BF.js:4544:29)
    at react_production.useSyncExternalStore (utils-C-Suy_BF.js:837:35)
    at withSelector_production.useSyncExternalStoreWithSelector (lead-journey.js:3591:17)
    at useStore (lead-journey.js:3615:37)
    at useRouterState (lead-journey.js:3680:10)
That confused me for a while, but I think it's happening because the lead-journey.js file is being loaded twice (lead-journey.js is my entrypoint script that's supposed to kick off everything else). When I look at the network tab and find that the lead-journey.js script is being loaded twice, the first is from the script tag shown above and the second is from the file route-DGWPBI4S.js:3, which is one of the files generated by the automatic code splitting. If I look into the code of that file, I see this: 
import {O as Outlet} from "./lead-journey.js";
import {O as Outlet} from "./lead-journey.js";
Does anyone know what's going on and how I can prevent this behavior? I'd like to have the code splitting turned on, because my bundle size is huge when everything is combined into lead-journey.js. Thanks!
3 Replies
like-gold
like-gold•2mo ago
can you provide a complete example project please?
correct-apricot
correct-apricotOP•2mo ago
Thanks, I'll try to see if I can get a smaller project together that has the same issue. The one I'm having the issue in right now is private/internal to my company @Manuel Schiller Sorry I haven't gotten a smaller project together that reproduces it, but digging in I'm noticing it doesn't happen on every page. I'm now wondering if how I've laid out my file based routes is erroneous and confusing the system. Do you see any issues with this file structure? My goal is that everything under /trusted/homeservices/u/** requires authentication and everything else doesn't (so /trusted/homeservices itself, /trusted/homeservices/login, and anything else shouldn't require login). I've handled this by making two pathless layout routes at the top level and they both share some common pathing. It seems like my index at /trusted/homeservices and my login page /trusted/homeservices/login both have the invariant issue and load lead journey twice, but /trusted/homeservices/providers does not have an issue. 
routes
├── __root.tsx
├── _authenticated
│   ├── -components
│   │   ├── CustomSidebarTrigger.tsx
│   │   ├── NavHeader.tsx
│   │   ├── NavMain.tsx
│   │   ├── NavMenu.tsx
│   │   └── TopBar.tsx
│   ├── route.tsx
│   └── trusted
│       └── homeservices
│           └── u
│               └── projects
│                   ├── -messaging
│                   │   ├── loader.ts
│                   │   ├── MessagingCenter.tsx
│                   │   ├── MessagingCenterError.tsx
│                   │   ├── MessagingCenterPending.tsx
│                   │   ├── MessagingCenterProvider.tsx
│                   │   ├── useHoverScrollLock.ts
│                   │   └── useMessagingCenter.ts
│                   ├── -projects
│                   │   ├── loader.ts
│                   │   ├── ProjectCard.tsx
│                   │   ├── ProjectsEmpty.tsx
│                   │   ├── ProjectsError.tsx
│                   │   ├── ProjectsPage.tsx
│                   │   └── ProjectsPending.tsx
│                   ├── index.tsx
│                   └── route.tsx
└── _unauthenticated
    ├── route.tsx
    └── trusted
        └── homeservices
            ├── index.tsx
            ├── login.tsx
            └── providers
                ├── -provider
                │   ├── loader.ts
                │   ├── ProviderAdditionalDetails.tsx
                │   ├── ProviderDetailsCard.tsx
                │   ├── ProviderError.tsx
                │   ├── ProviderProfilePage.tsx
                │   ├── ShareButton.tsx
                │   └── StartNewProjectForm.tsx
                ├── -search
                │   ├── ListProviderProfileCard.tsx
                │   ├── loader.ts
                │   └── SearchPage.tsx
                ├── $officeKey.tsx
                └── index.tsx

15 directories, 37 files
routes
├── __root.tsx
├── _authenticated
│   ├── -components
│   │   ├── CustomSidebarTrigger.tsx
│   │   ├── NavHeader.tsx
│   │   ├── NavMain.tsx
│   │   ├── NavMenu.tsx
│   │   └── TopBar.tsx
│   ├── route.tsx
│   └── trusted
│       └── homeservices
│           └── u
│               └── projects
│                   ├── -messaging
│                   │   ├── loader.ts
│                   │   ├── MessagingCenter.tsx
│                   │   ├── MessagingCenterError.tsx
│                   │   ├── MessagingCenterPending.tsx
│                   │   ├── MessagingCenterProvider.tsx
│                   │   ├── useHoverScrollLock.ts
│                   │   └── useMessagingCenter.ts
│                   ├── -projects
│                   │   ├── loader.ts
│                   │   ├── ProjectCard.tsx
│                   │   ├── ProjectsEmpty.tsx
│                   │   ├── ProjectsError.tsx
│                   │   ├── ProjectsPage.tsx
│                   │   └── ProjectsPending.tsx
│                   ├── index.tsx
│                   └── route.tsx
└── _unauthenticated
    ├── route.tsx
    └── trusted
        └── homeservices
            ├── index.tsx
            ├── login.tsx
            └── providers
                ├── -provider
                │   ├── loader.ts
                │   ├── ProviderAdditionalDetails.tsx
                │   ├── ProviderDetailsCard.tsx
                │   ├── ProviderError.tsx
                │   ├── ProviderProfilePage.tsx
                │   ├── ShareButton.tsx
                │   └── StartNewProjectForm.tsx
                ├── -search
                │   ├── ListProviderProfileCard.tsx
                │   ├── loader.ts
                │   └── SearchPage.tsx
                ├── $officeKey.tsx
                └── index.tsx

15 directories, 37 files
like-gold
like-gold•2mo ago
a full example with this setup would be helpful to debug

Did you find this page helpful?