Piny 'Click to select' not working: Piny plugin order with tanstack in vite?

Piny
1

Hi team, it’s a wonderful project but recently i have been having trouble getting Piny to work with a tanstack app created with vite. the specific issue is that i cannot get ‘Click to select’ to work.
I suspect the plugin order in vite.config.ts maybe the issue.

here is the current (not working) vite config.

is there a workaround i can try?

thank u.

import { defineConfig } from 'vite'
import { devtools } from '@tanstack/devtools-vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import viteReact from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import PinyVite from '@pinegrow/piny-vite'




const config = defineConfig({

resolve: { tsconfigPaths: true },

plugins: [ 

devtools(),

tailwindcss(), 

tanstackStart(), 

viteReact(),

PinyVite()  

  ]

})

export default config
2

I just tried tanstack with piny, and it works for me - GitHub - TechAkayy/tanstack-vite · GitHub. Can you give this repo a shot.

image
image2700×1636 440 KB

3

thanks for the followup. your repo is great and works for me.

the default vite command to install tanstack router insists on installing tanstack Start (the template). this interferes with injecting piny into the page.

i found out you need to add {import.meta.env.DEV && } in __root.tsx as below.

image
image606×494 13.6 KB

1 Like
4

I didn’t quite catch the issue with your setup.

If you check `node_modules/@pinegrow/piny-vite/dist/index.js`, the runtime path is automatically injected (screeenshot below). Does you setup does something that interferes with this? Your feedback is welcome, so that we can improve our setup. Thanks!

image
image1332×982 81.1 KB

5

hi @TechAkayy ,

apologies for the delay in replying.
i setup a ‘tanstack router’ app and selected all the other tanstack modules: DB, Form, Table, Store, Query.

i’m using yarn, so i added ‘Click to Select’ with: ‘yarn add @pinegrow/piny-vite --dev’

testtanstack9 2
testtanstack9 2665×741 68.7 KB

after adding Piny() to the vite config and running the app, Piny doesn’t inject.

6

tanstackinspect 2
tanstackinspect 21098×693 146 KB

7

piny_viteconfig.jpeg
piny_viteconfig.jpeg676×360 59.3 KB

i tried various plugin orders but none work.

8

Thanks @vips. That was very useful. Our piny vite plugin uses `transformIndexHtml` to inject piny into the shell index.html which is present in vanilla tanstack app (my git repo), while in the full tanstack app you shared, there is no shell, and is generated dynamically. We will patch it up to cover this scenario if possible. cc: @matjaz

Meanwhile, your hack adding it to __root.tsx was a smart one. Thanks for sharing.

image
image1918×914 208 KB