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

[lmtr0]

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/@solidjs+start@1.0.0_rollup@4.18.0_solid-js@1.8.17_vinxi@0.3.11_@opentelemetry+api@1.8.0_@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/@solidjs+start@1.0.0_rollup@4.18.0_solid-js@1.8.17_vinxi@0.3.11_@opentelemetry+api@1.8.0_@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/solid-js@1.8.17/node_modules/solid-js/web/dist/server.js:539:57)
    at injectAssets (file:///home/me/repo/warpfactor/autodialer/client/node_modules/.pnpm/solid-js@1.8.17/node_modules/solid-js/web/dist/server.js:584:70)
    at doShell (file:///home/me/repo/warpfactor/autodialer/client/node_modules/.pnpm/solid-js@1.8.17/node_modules/solid-js/web/dist/server.js:295:12)
    at Object.onDone (file:///home/me/repo/warpfactor/autodialer/client/node_modules/.pnpm/solid-js@1.8.17/node_modules/solid-js/web/dist/server.js:163:5)
    at Te.flush (file:///home/me/repo/warpfactor/autodialer/client/node_modules/.pnpm/seroval@1.0.7/node_modules/seroval/dist/esm/production/index.mjs:17:38999)
    at file:///home/me/repo/warpfactor/autodialer/client/node_modules/.pnpm/solid-js@1.8.17/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.

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

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

4. 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/@solidjs+start@1.0.0_rollup@4.18.0_solid-js@1.8.17vinxi@0.3.11@opentelemetry+api@1.8.0_@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/@solidjs+start@1.0.0_rollup@4.18.0_solid-js@1.8.17vinxi@0.3.11@opentelemetry+api@1.8.0_@typ_cofjxkxhwsoh6svfiqk3i4goem/node_modules/@solidjs/start/dist/server/StartServer.jsx:65:48) at Array. (file:///home/me/repo/warpfactor/autodialer/client/node_modules/.pnpm/solid-js@1.8.17/node_modules/solid-js/web/dist/server.js:539:57) at injectAssets (file:///home/me/repo/warpfactor/autodialer/client/node_modules/.pnpm/solid-js@1.8.17/node_modules/solid-js/web/dist/server.js:584:70) at doShell (file:///home/me/repo/warpfactor/autodialer/client/node_modules/.pnpm/solid-js@1.8.17/node_modules/solid-js/web/dist/server.js:295:12) at Object.onDone (file:///home/me/repo/warpfactor/autodialer/client/node_modules/.pnpm/solid-js@1.8.17/node_modules/solid-js/web/dist/server.js:163:5) at Te.flush (file:///home/me/repo/warpfactor/autodialer/client/node_modules/.pnpm/seroval@1.0.7/node_modules/seroval/dist/esm/production/index.mjs:17:38999) at file:///home/me/repo/warpfactor/autodialer/client/node_modules/.pnpm/solid-js@1.8.17/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 🌎

```shell
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"

[lmtr0]

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

[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.

[harveylii]

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

[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?

[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?

nope, it's still here

[lmtr0]

can you share how you did the setup?

[CripyIce]

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

[thinke5]

I think it's because of this

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

[eduludi]

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.

[kms0219kms]

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

node_modules/.pnpm/@solidjs+start@1.0.0_rollup@4.18.0_solid-js@1.8.17_vinxi@0.3.11_@opentelemetry+api@1.8.0_@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/@solidjs+start@1.0.0_rollup@4.18.0_solid-js@1.8.17_vinxi@0.3.11_@opentelemetry+api@1.8.0_@typ_cofjxkxhwsoh6svfiqk3i4goem/node_modules/@solidjs/start/dist/server/StartServer.jsx:65:48)
    at Array.<anonymous> (file:///workspaces/wakulator/node_modules/.pnpm/solid-js@1.8.17/node_modules/solid-js/web/dist/server.js:539:57)
    at injectAssets (file:///workspaces/wakulator/node_modules/.pnpm/solid-js@1.8.17/node_modules/solid-js/web/dist/server.js:584:70)
    at doShell (file:///workspaces/wakulator/node_modules/.pnpm/solid-js@1.8.17/node_modules/solid-js/web/dist/server.js:295:12)
    at Object.onDone (file:///workspaces/wakulator/node_modules/.pnpm/solid-js@1.8.17/node_modules/solid-js/web/dist/server.js:163:5)
    at Te.flush (file:///workspaces/wakulator/node_modules/.pnpm/seroval@1.0.7/node_modules/seroval/dist/esm/production/index.mjs:17:38999)
    at file:///workspaces/wakulator/node_modules/.pnpm/solid-js@1.8.17/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.

[harveylii]

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...

[lmtr0]

@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

[Brendonovich]

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

[lmtr0]

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

[Brendonovich]

Once the change is released yeah

[lmtr0]

sounds good

[harrybawsac]

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.

[han-tyumi]

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

[harrybawsac]

Yes! Can confirm it's been fixed.

[lmtr0]

Can confirm, v1.0.1 fixed the issue