solid-start [Bug?]: SolidStart fails to start with Daisyui and tailwindcss

Duplicates

[X] I have searched the existing issues

Latest version

[X] I have tested the latest version

Current behavior 😯

After installing daisyui following their documentation and adding it to tailwindcss, the server fails to build the client and I can't start the dev server.

here is the output

> bun dev
$ vinxi dev
vinxi v0.3.11
vinxi starting dev server

  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose


🌼   daisyUI 4.11.1
├─ ✔︎ 2 themes added            https://daisyui.com/docs/themes
╰─ ★ Star daisyUI on GitHub     https://github.com/saadeghi/daisyui

/home/me/repo/warpfactor/autodialer/client/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_@[email protected]_@typ_cofjxkxhwsoh6svfiqk3i4goem/node_modules/@solidjs/start/dist/server/StartServer.jsx:65
  __vite_ssr_import_6__.useAssets(() => assets.length ? assets.map((m) => __vite_ssr_import_8__.renderAsset(m)) : void 0);
                                               ^

TypeError: Cannot read properties of undefined (reading 'length')
    at eval (/home/me/repo/warpfactor/autodialer/client/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_@[email protected]_@typ_cofjxkxhwsoh6svfiqk3i4goem/node_modules/@solidjs/start/dist/server/StartServer.jsx:65:48)
    at Array.<anonymous> (file:///home/me/repo/warpfactor/autodialer/client/node_modules/.pnpm/[email protected]/node_modules/solid-js/web/dist/server.js:539:57)
    at injectAssets (file:///home/me/repo/warpfactor/autodialer/client/node_modules/.pnpm/[email protected]/node_modules/solid-js/web/dist/server.js:584:70)
    at doShell (file:///home/me/repo/warpfactor/autodialer/client/node_modules/.pnpm/[email protected]/node_modules/solid-js/web/dist/server.js:295:12)
    at Object.onDone (file:///home/me/repo/warpfactor/autodialer/client/node_modules/.pnpm/[email protected]/node_modules/solid-js/web/dist/server.js:163:5)
    at Te.flush (file:///home/me/repo/warpfactor/autodialer/client/node_modules/.pnpm/[email protected]/node_modules/seroval/dist/esm/production/index.mjs:17:38999)
    at file:///home/me/repo/warpfactor/autodialer/client/node_modules/.pnpm/[email protected]/node_modules/solid-js/web/dist/server.js:182:42

Node.js v20.11.1
error: script "dev" exited with code 1

However the build process works and the nitro server doesn't fail

Expected behavior 🤔

Start the dev server without errors

Steps to reproduce 🕹

Steps:

when a command is [cmd1|cmd2] means I rand both of then to test.

run [pnpm|npm] create solid and check the tailwindcss option
run [bun|pnpm|yarn] install daisyui@latest
then alter the tailwindcss file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {}
  },
  plugins: [
    require('daisyui'),
  ]
};

run [bun|pnpm] dev, then, open the browser, the output in the terminal should be:

> bun dev
$ vinxi dev
vinxi v0.3.11
vinxi starting dev server

  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose


🌼   daisyUI 4.11.1
├─ ✔︎ 2 themes added            https://daisyui.com/docs/themes
╰─ ★ Star daisyUI on GitHub     https://github.com/saadeghi/daisyui

/home/me/repo/warpfactor/autodialer/client/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_@[email protected]_@typ_cofjxkxhwsoh6svfiqk3i4goem/node_modules/@solidjs/start/dist/server/StartServer.jsx:65
  __vite_ssr_import_6__.useAssets(() => assets.length ? assets.map((m) => __vite_ssr_import_8__.renderAsset(m)) : void 0);
                                               ^

TypeError: Cannot read properties of undefined (reading 'length')
    at eval (/home/me/repo/warpfactor/autodialer/client/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_@[email protected]_@typ_cofjxkxhwsoh6svfiqk3i4goem/node_modules/@solidjs/start/dist/server/StartServer.jsx:65:48)
    at Array.<anonymous> (file:///home/me/repo/warpfactor/autodialer/client/node_modules/.pnpm/[email protected]/node_modules/solid-js/web/dist/server.js:539:57)
    at injectAssets (file:///home/me/repo/warpfactor/autodialer/client/node_modules/.pnpm/[email protected]/node_modules/solid-js/web/dist/server.js:584:70)
    at doShell (file:///home/me/repo/warpfactor/autodialer/client/node_modules/.pnpm/[email protected]/node_modules/solid-js/web/dist/server.js:295:12)
    at Object.onDone (file:///home/me/repo/warpfactor/autodialer/client/node_modules/.pnpm/[email protected]/node_modules/solid-js/web/dist/server.js:163:5)
    at Te.flush (file:///home/me/repo/warpfactor/autodialer/client/node_modules/.pnpm/[email protected]/node_modules/seroval/dist/esm/production/index.mjs:17:38999)
    at file:///home/me/repo/warpfactor/autodialer/client/node_modules/.pnpm/[email protected]/node_modules/solid-js/web/dist/server.js:182:42

Node.js v20.11.1
error: script "dev" exited with code 1

Context 🔦

I'm trying to make a website with tailwindcss, daisyui to be deployed to cloudflare workers

Your environment 🌎

System:
   os: Linux fedora 6.8.9-300.fc40.x86_64 
   cpu: amd64
Binaries:
   node: v20.11.1
   pnpm: 9.1.2
   bun: 1.1.4
Packages:
    "@solidjs/router": "^0.13.3",
    "@solidjs/start": "^1.0.0",
    "autoprefixer": "^10.4.19",
    "postcss": "^8.4.38",
    "solid-js": "^1.8.17",
    "tailwindcss": "^3.4.3",
    "vinxi": "^0.3.11"

May 24 '24 13:05 lmtr0

Problem looks to be originating from useAssets(() => (assets.length ? assets.map(m => renderAsset(m)) : undefined));

May 24 '24 13:05 lmtr0

Lol, I think there is a problem with the template, I just went through the manual process of adding tailwind in the basic template and It worked.

May 24 '24 13:05 lmtr0

I‘m alos having this issue, but I did not use any ui framework...

May 25 '24 12:05 harveylii

I‘m alos having this issue, but I did not use any ui framework...

did your issue also solve itself once you did the manual setup?

May 25 '24 13:05 lmtr0

I‘m alos having this issue, but I did not use any ui framework...

did your issue also solve itself once you did the manual setup?

nope, it's still here

May 25 '24 15:05 harveylii

can you share how you did the setup?

May 25 '24 15:05 lmtr0

Same here, but without even adding DaisyUI. Just tried today creating a new SolidStart project with tailwind template as the CLI offered me, and got the same error.

/Users/eitanaflalo/Documents/solid-project/node_modules/@solidjs/start/dist/server/StartServer.jsx:65
  __vite_ssr_import_6__.useAssets(() => assets.length ? assets.map((m) => __vite_ssr_import_8__.renderAsset(m)) : void 0);
                                               ^

TypeError: Cannot read properties of undefined (reading 'length')
    at eval (/Users/eitanaflalo/Documents/solid-project/node_modules/@solidjs/start/dist/server/StartServer.jsx:65:48)
    at Array.<anonymous> (file:///Users/eitanaflalo/Documents/solid-project/node_modules/solid-js/web/dist/server.js:539:57)
    at injectAssets (file:///Users/eitanaflalo/Documents/solid-project/node_modules/solid-js/web/dist/server.js:584:70)
    at doShell (file:///Users/eitanaflalo/Documents/solid-project/node_modules/solid-js/web/dist/server.js:295:12)
    at Object.onDone (file:///Users/eitanaflalo/Documents/solid-project/node_modules/solid-js/web/dist/server.js:163:5)
    at Te.flush (file:///Users/eitanaflalo/Documents/solid-project/node_modules/seroval/dist/esm/production/index.mjs:17:38999)
    at file:///Users/eitanaflalo/Documents/solid-project/node_modules/solid-js/web/dist/server.js:182:42

Node.js v18.18.0
error: script "dev" exited with code 1

May 26 '24 10:05 CripyIce

I think it's because of this

https://github.com/ryansolid/dom-expressions/blob/38ad815b0c610b936ad140ed5c230afe4419d3b7/packages/dom-expressions/src/client.js#L40

May 27 '24 06:05 thinke5

Same error here, except I'm not using DaisyUI. Just started a new solid-start project with tailwindcss (using javascript).

I added a ?operator after assets in node_modules/@solidjs/start/dist/server/StartServer.jsx, line 57:

useAssets(() => (assets?.length ? assets.map(m => renderAsset(m)) : undefined));

That fixed the issue, but not sure of the implications of that.

May 27 '24 08:05 eduludi

Same here. I didn't used tailwindcss and I used solid-styled-components.

node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_@[email protected]_@typ_cofjxkxhwsoh6svfiqk3i4goem/node_modules/@solidjs/start/dist/server/StartServer.jsx:65
  __vite_ssr_import_6__.useAssets(() => assets.length ? assets.map((m) => __vite_ssr_import_8__.renderAsset(m)) : void 0);
                                               ^

TypeError: Cannot read properties of undefined (reading 'length')
    at eval (/workspaces/wakulator/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_@[email protected]_@typ_cofjxkxhwsoh6svfiqk3i4goem/node_modules/@solidjs/start/dist/server/StartServer.jsx:65:48)
    at Array.<anonymous> (file:///workspaces/wakulator/node_modules/.pnpm/[email protected]/node_modules/solid-js/web/dist/server.js:539:57)
    at injectAssets (file:///workspaces/wakulator/node_modules/.pnpm/[email protected]/node_modules/solid-js/web/dist/server.js:584:70)
    at doShell (file:///workspaces/wakulator/node_modules/.pnpm/[email protected]/node_modules/solid-js/web/dist/server.js:295:12)
    at Object.onDone (file:///workspaces/wakulator/node_modules/.pnpm/[email protected]/node_modules/solid-js/web/dist/server.js:163:5)
    at Te.flush (file:///workspaces/wakulator/node_modules/.pnpm/[email protected]/node_modules/seroval/dist/esm/production/index.mjs:17:38999)
    at file:///workspaces/wakulator/node_modules/.pnpm/[email protected]/node_modules/solid-js/web/dist/server.js:182:42

Node.js v20.13.1

And, @eduludi 's fix is worked well. However, this is just temporary fix. I need a permanent fix as I am using CI for production deployment.

May 27 '24 14:05 kms0219kms

I've fixed this issue through a very strange way. I add ? after assets in node_modules/@solidjs/start/dist/server/StartServer.jsx line 57:

useAssets(() => (assets?.length ? assets.map(m => renderAsset(m)) : undefined));

That fixed this issue temporarily, but there is a Hydration Mismatch error shows up after the app started. I checked the entire project and found out nothing unnormal, so I tried adding a Suspense component at the topest of my app, then everything runs fine.

After this I delete the ? I add before, the app is still running properly. Can not figure out why...

May 27 '24 15:05 harveylii

@harveylii Is it to any good for you to make a pr, I fixed by doing the work of setting up tailwindcss with daisyui manually in the basic template. So It makes me think that there is a problem with the template itself, and not with the framework. But probably I'm wrong as I'm not very familiar with the internal workings of solid start

May 28 '24 23:05 lmtr0

I think my last PR already implemented the equivalent of that fix, since I just gave assets a default value.

May 29 '24 02:05 Brendonovich

@Brendonovich so, it's just a matter of updating the templates and the dependencies?

May 29 '24 12:05 lmtr0

Once the change is released yeah

May 29 '24 12:05 Brendonovich

sounds good

May 29 '24 12:05 lmtr0

I got the same problem here. I just started a new solid start project with tailwind CSS (the starter). It presented the error on the first yarn dev run.

Building it and then running with yarn start, works perfectly.

May 29 '24 20:05 harrybawsac

v1.0.1 seems to fix the issue for me. 🎉

May 30 '24 03:05 han-tyumi

Yes! Can confirm it's been fixed.

May 30 '24 07:05 harrybawsac

Can confirm, v1.0.1 fixed the issue

May 30 '24 15:05 lmtr0