adverse-sapphire

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

relaxed-coral•7mo ago

cc @Birk Skyum @brenelz

sensitive-blue•7mo ago

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

relaxed-coral•7mo ago

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

adverse-sapphireOP•7mo 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

relaxed-coral•7mo 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

adverse-sapphireOP•7mo ago

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

relaxed-coral•7mo ago

me neither

adverse-sapphireOP•7mo ago

Thank you for looking into this : )

relaxed-coral•7mo ago

well it's a mystery still

adverse-sapphireOP•7mo 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(),
  ],
});

relaxed-coral•7mo ago

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

adverse-sapphireOP•7mo ago

yes, it works!! when removing autoCodeSplitting

relaxed-coral•7mo ago

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

adverse-sapphireOP•7mo ago

sure thing 🙂 Thank you so much

adverse-sapphireOP•7mo 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({...

sensitive-blue•6mo 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

adverse-sapphireOP•6mo ago

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

sensitive-blue•6mo ago

Glad to hear!

Gaming

Programming

Problem getting View Transitions to work with SolidJS

Did you find this page helpful?