SolidJS•2y ago

Losing reactivity in production build due to multi-project setup lib <--> app

So Im having an issue that my createEffect() is not being triggered. Everything works as expected as long as I use the vite command. But when I use vite build && vite preview it does not work anymore. The createEffect is only ever triggered once and subsequent accesses of the signal do not trigger it anymore. How can I debug such a case?

6 Replies

DeflaktorOP•2y ago

Okay I found the root cause. The problem is that I am having a multi-project setup. I have a part which is "common" project and a part which is "client". The client code calls some class inside the "common" project which runs the createEffect(). It seems that part is then not compiled correctly when using vite build.

DeflaktorOP•2y ago

Here is my current setup and I can reproduce that vite on the my-app project works but vite build && vite preview does not

multi-project-issue....

DeflaktorOP•2y ago

So what do I need to do to make this multi-project setup work?

thetarnav•2y ago

it's not a pnpm/npm/yarn workspace, right? I guess there is an issue with duplicating dependencies. It's common when having multiple projects linked together. This could be solved in a couple of ways afaik: 1. add resolve aliases in vite config for duplicated dependencies (to always point to node_modules in your app) 2. use a monorepo setup with pnpm where the common dependencies are shared (or other managers, but in pnpm that is the case by default) 3. instead of linking the source code via tsconfig, build the commonn library with a bundler like tsup or rollup, and install, import in the app as a normal dependency Although it's a bit weird that it works differently during development actually 3. might not solve it on it's own to test if thats actually the cause, you might try exploring the sources tab in chrome devtools in the build website. if solid-js is duplicated you'll find it there twice also a funny, but quick test is to do:

// lib
import { createSignal } from "solid-js"
window.a = createSignal

// app
import "lib"
import { createSignal } from "solid-js"
console.log(window.a === createSignal) // false if the module is duplicated

// lib
import { createSignal } from "solid-js"
window.a = createSignal

// app
import "lib"
import { createSignal } from "solid-js"
console.log(window.a === createSignal) // false if the module is duplicated

DeflaktorOP•2y ago

Thanks for the hints. Does that mean that in my setup solidjs is packaged twice in production build? Is this normal behavior for vite? Are all dependencies which both my library and app projects use, duplicated? I resolved the issue for now by using

  "dependencies": {
    "solid-js": "file:../common/node_modules/solid-js",
  },

  "dependencies": {
    "solid-js": "file:../common/node_modules/solid-js",
  },

in the app/package.json though I think it's a weird workaround.

thetarnav•2y ago

Yeah this is not solid specific nor vite really I had a webpack vue project with the same issue

Gaming

Programming

Losing reactivity in production build due to multi-project setup lib <--> app