T
TanStack11mo ago
sensitive-blue

Unexpected token “export”

I have this reproducible stack blitz and I don’t know how to get it to work: https://stackblitz.com/edit/tanstack-router-t4oym2?file=app%2Froutes%2Findex.tsx
13 Replies
sensitive-blue
sensitive-blueOP11mo ago
I assume that I need some sort of vite config for this but I don’t know how
rival-black
rival-black11mo ago
it looks like @cloudscape-design/components is not a valid ESM module its package.json should have "type": "module" and their imports should have file extensions
sensitive-blue
sensitive-blueOP11mo ago
Ah is there a way that I can fix that without fixing the upstream? some vite plugin or something?
rival-black
rival-black11mo ago
hard
sensitive-blue
sensitive-blueOP11mo ago
I just imagine that I won’t be able to convince Amazon to fix this in any reasonable amount of time Is there a reason this works elsewhere but not in tanstack start?
rival-black
rival-black11mo ago
where is "elsewhere"? you could disable SSR it seems to not be compatible with SSR I fixed the imports, but I get
Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
export const Route = createFileRoute('/')({
component: Home,
ssr: false
});
export const Route = createFileRoute('/')({
component: Home,
ssr: false
});
this will prevent SSR for this route
sensitive-blue
sensitive-blueOP11mo ago
Got it, yeah I can use it in a vite project just fine Anyone else have any ideas? I’m trying to migrate a site I started in NextJS but this is the biggest blocker at the moment
rival-black
rival-black11mo ago
how does it work with nextjs?
sensitive-blue
sensitive-blueOP11mo ago
Idk how it works I just install it and put a use client and it works fine
rival-black
rival-black11mo ago
so it is not server rendered you can do the same with start set ssr: false as route option
sensitive-blue
sensitive-blueOP11mo ago
Just in the index.tsx file right? In app/routes? Because then nothing renders haha Oh wait, that does seem to work actually
rival-black
rival-black11mo ago
cool
sensitive-blue
sensitive-blueOP11mo ago
Huh, I feel like I tried that earlier, but I'm not sure. I appreciate the help!

Did you find this page helpful?