wise-white

Problem getting View Transitions to work with SolidJS

hi, thank you for the great library. like in the title. The exact same setup works fine with React, but Solid does not animate elements sharing the same view-transition-name I set defaultViewTransition: true on the Router https://stackblitz.com/edit/tanstack-router-hwsymfma?file=src%2Froutes%2Findex.tsx Uploaded how it works on the React side Is there something that I am missing to get it working the same with Solid?

Jakub

StackBlitz

Tanstack-Router-Solid-View-Transitions - StackBlitz

Tanstack router - solidjs - view transitions issue

18 Replies

foreign-sapphire•9mo ago

cc @Birk Skyum @brenelz

funny-blue•9mo ago

Hmm it looks like it transitions but it's just a fade?

foreign-sapphire•9mo ago

can you please post the stackblitz for the reaction version as well?

wise-whiteOP•9mo ago

yes, of course. Should have added it since the beginning. sorry. React version: https://stackblitz.com/edit/tanstack-router-a9utvecb?file=src%2Fmain.tsx

Jakub

StackBlitz

Tanstack-Router-React-View-Transitions - StackBlitz

Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz

foreign-sapphire•9mo ago

i played with your example, somehow this works now: https://stackblitz.com/edit/tanstack-router-7nhvcvuq?file=src%2Fposts.tsx,src%2Fstyles.css,src%2Fmain.tsx,tailwind.config.mjs,src%2Froutes%2Fabout.tsx

StackBlitz

Tanstack-Router-Solid-View-Transitions (forked) - StackBlitz

Tanstack router - solidjs - view transitions issue

wise-whiteOP•9mo ago

haha indeed. Somehow it works but I can't see what's different 😅

foreign-sapphire•9mo ago

me neither

wise-whiteOP•9mo ago

Thank you for looking into this : )

foreign-sapphire•9mo ago

well it's a mystery still

wise-whiteOP•9mo ago

okay, I see what's different in vite.config.js you commented out autoCodeSplitting

import { defineConfig } from 'vite';
import solid from 'vite-plugin-solid';
import { TanStackRouterVite } from '@tanstack/router-plugin/vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    TanStackRouterVite({
      target: 'solid',
      // autoCodeSplitting: false,
    }),
    solid(),
  ],
});

import { defineConfig } from 'vite';
import solid from 'vite-plugin-solid';
import { TanStackRouterVite } from '@tanstack/router-plugin/vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    TanStackRouterVite({
      target: 'solid',
      // autoCodeSplitting: false,
    }),
    solid(),
  ],
});

foreign-sapphire•9mo ago

yeah I tried a lot of settings does this have any impact though?

wise-whiteOP•9mo ago

yes, it works!! when removing autoCodeSplitting

foreign-sapphire•9mo ago

well then there is a bug to be fixed can you please create a GitHub issue for this?

wise-whiteOP•9mo ago

sure thing 🙂 Thank you so much

wise-whiteOP•9mo ago

issue created: https://github.com/TanStack/router/issues/3736

GitHub

solid-router view transitions don't work with autoCodeSplitting · I...

Which project does this relate to? Router Describe the bug After following the Quick Start for Solid-Router docs and adding this line to vite.config.js file (autoCodeSplitting) TanStackRouterVite({...

funny-blue•9mo ago

Does this version of the package work for your view transitions:

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@3813

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@3813

wise-whiteOP•9mo ago

Looks like it is working now with the latest version ^^ Thank you

funny-blue•9mo ago

Glad to hear!

Gaming

Programming

Problem getting View Transitions to work with SolidJS

Did you find this page helpful?