Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
2 tasks done
lmtr0 opened this issue May 24, 2024 · 20 comments
Closed
2 tasks done

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

lmtr0 opened this issue May 24, 2024 · 20 comments
Labels
bug Something isn't working

Comments

@lmtr0
Copy link

lmtr0 commented May 24, 2024

Duplicates

  • I have searched the existing issues

Latest version

  • 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'),
  ]
};
  1. 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.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

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"
@lmtr0 lmtr0 added the bug Something isn't working label May 24, 2024
@lmtr0
Copy link
Author

lmtr0 commented May 24, 2024

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

@lmtr0
Copy link
Author

lmtr0 commented May 24, 2024

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
Copy link

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

@lmtr0
Copy link
Author

lmtr0 commented May 25, 2024

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
Copy link

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
Copy link
Author

lmtr0 commented May 25, 2024

can you share how you did the setup?

@CripyIce
Copy link

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
Copy link

thinke5 commented May 27, 2024

@eduludi
Copy link

eduludi commented May 27, 2024

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
Copy link

kms0219kms commented May 27, 2024

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
Copy link

harveylii commented May 27, 2024

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
Copy link
Author

lmtr0 commented May 28, 2024

@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
Copy link
Contributor

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

@lmtr0
Copy link
Author

lmtr0 commented May 29, 2024

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

@Brendonovich
Copy link
Contributor

Once the change is released yeah

@lmtr0
Copy link
Author

lmtr0 commented May 29, 2024

sounds good

@harrybawsac
Copy link

harrybawsac commented May 29, 2024

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
Copy link

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

@harrybawsac
Copy link

Yes! Can confirm it's been fixed.

@lmtr0
Copy link
Author

lmtr0 commented May 30, 2024

Can confirm, v1.0.1 fixed the issue

@lmtr0 lmtr0 closed this as completed May 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

9 participants