TanStackT
TanStack•6mo ago•
5 replies
ordinary-sapphire

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">


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)


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";


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!
Was this page helpful?