[Bug?]: Error: Client-only API called on the server side. When using npm run dev on a brand new solidstart project

[Garrett-Floyd]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

On running npm run dev for new solid start project (using basic template) throws a bunch of errors about trying to use client side only features on server side. Old projects run fine.

Expected behavior 🤔

SolidStart project should start on local host 3000.

Steps to reproduce 🕹

Steps:

1. npm init solid@latest
2. Project Name: datePicker
3. Is this a SolidStart project? Yes
4. Which template would you like to use? basic
5. Use Typescript? No
6. Project successfully created!
7. cd datePicker
8. npm install
9. npm run dev

10. dev vinxi dev

vinxi v0.4.3 vinxi starting dev server

WARN No valid compatibility date is specified. nitro 9:59:42 PM

ℹ Using 2024-04-03 as fallback. nitro 9:59:42 PM Please specify compatibility date to avoid unwanted behavior changes:

• Add compatibilityDate: '2024-11-26' to the config file.

• Or set COMPATIBILITY_DATE=2024-11-26 environment variable.

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

  11. ctrl+click on http://localhost:3000/
  12. command line updates to:

dev vinxi dev

vinxi v0.4.3 vinxi starting dev server

WARN No valid compatibility date is specified. nitro 9:59:42 PM

ℹ Using 2024-04-03 as fallback. nitro 9:59:42 PM Please specify compatibility date to avoid unwanted behavior changes:

• Add compatibilityDate: '2024-11-26' to the config file.

• Or set COMPATIBILITY_DATE=2024-11-26 environment variable.

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

9:59:52 PM [vite] page reload vinxi/routes 9:59:52 PM [vite] page reload vinxi/routes (x2) 9:59:52 PM [vite] page reload vinxi/routes (x3) 9:59:54 PM [vite] Error when evaluating SSR module /node_modules/@solidjs/router/dist/index.js: |- Error: Client-only API called on the server side. Run client-only code in onMount, or conditionally run client-only component with . at Module.notSup (file:///mnt/c/Users/almos/Documents/Codes/web_dev/datePicker/node_modules/solid-js/web/dist/server.js:1136:9) at eval (/mnt/c/Users/almos/Documents/Codes/web_dev/datePicker/node_modules/@solidjs/router/dist/index.js:1470:49) at async instantiateModule (file:///mnt/c/Users/almos/Documents/Codes/web_dev/datePicker/node_modules/vinxi/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:52972:5)

9:59:54 PM [vite] Error when evaluating SSR module /src/app.jsx: |- Error: Client-only API called on the server side. Run client-only code in onMount, or conditionally run client-only component with . at Module.notSup (file:///mnt/c/Users/almos/Documents/Codes/web_dev/datePicker/node_modules/solid-js/web/dist/server.js:1136:9) at eval (/mnt/c/Users/almos/Documents/Codes/web_dev/datePicker/node_modules/@solidjs/router/dist/index.js:1470:49) at async instantiateModule (file:///mnt/c/Users/almos/Documents/Codes/web_dev/datePicker/node_modules/vinxi/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:52972:5)

9:59:54 PM [vite] Error when evaluating SSR module /node_modules/@solidjs/start/dist/server/StartServer.jsx: |- Error: Client-only API called on the server side. Run client-only code in onMount, or conditionally run client-only component with . at Module.notSup (file:///mnt/c/Users/almos/Documents/Codes/web_dev/datePicker/node_modules/solid-js/web/dist/server.js:1136:9) at eval (/mnt/c/Users/almos/Documents/Codes/web_dev/datePicker/node_modules/@solidjs/router/dist/index.js:1470:49) at async instantiateModule (file:///mnt/c/Users/almos/Documents/Codes/web_dev/datePicker/node_modules/vinxi/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:52972:5)

9:59:54 PM [vite] Error when evaluating SSR module /node_modules/@solidjs/start/dist/server/index.jsx: |- Error: Client-only API called on the server side. Run client-only code in onMount, or conditionally run client-only component with . at Module.notSup (file:///mnt/c/Users/almos/Documents/Codes/web_dev/datePicker/node_modules/solid-js/web/dist/server.js:1136:9) at eval (/mnt/c/Users/almos/Documents/Codes/web_dev/datePicker/node_modules/@solidjs/router/dist/index.js:1470:49) at async instantiateModule (file:///mnt/c/Users/almos/Documents/Codes/web_dev/datePicker/node_modules/vinxi/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:52972:5)

9:59:54 PM [vite] Error when evaluating SSR module /src/entry-server.jsx: |- Error: Client-only API called on the server side. Run client-only code in onMount, or conditionally run client-only component with . at Module.notSup (file:///mnt/c/Users/almos/Documents/Codes/web_dev/datePicker/node_modules/solid-js/web/dist/server.js:1136:9) at eval (/mnt/c/Users/almos/Documents/Codes/web_dev/datePicker/node_modules/@solidjs/router/dist/index.js:1470:49) at async instantiateModule (file:///mnt/c/Users/almos/Documents/Codes/web_dev/datePicker/node_modules/vinxi/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:52972:5)

9:59:54 PM [vite] Error when evaluating SSR module $vinxi/handler/ssr: |- Error: Client-only API called on the server side. Run client-only code in onMount, or conditionally run client-only component with . at Module.notSup (file:///mnt/c/Users/almos/Documents/Codes/web_dev/datePicker/node_modules/solid-js/web/dist/server.js:1136:9) at eval (/mnt/c/Users/almos/Documents/Codes/web_dev/datePicker/node_modules/@solidjs/router/dist/index.js:1470:49) at async instantiateModule (file:///mnt/c/Users/almos/Documents/Codes/web_dev/datePicker/node_modules/vinxi/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:52972:5)

[h3] [unhandled] H3Error: Client-only API called on the server side. Run client-only code in onMount, or conditionally run client-only component with . at Module.notSup (file:///mnt/c/Users/almos/Documents/Codes/web_dev/datePicker/node_modules/solid-js/web/dist/server.js:1136:9) at eval (/mnt/c/Users/almos/Documents/Codes/web_dev/datePicker/node_modules/@solidjs/router/dist/index.js:1470:49) at async instantiateModule (file:///mnt/c/Users/almos/Documents/Codes/web_dev/datePicker/node_modules/vinxi/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:52972:5) { cause: Error: Client-only API called on the server side. Run client-only code in onMount, or conditionally run client-only component with . at Module.notSup (file:///mnt/c/Users/almos/Documents/Codes/web_dev/datePicker/node_modules/solid-js/web/dist/server.js:1136:9) at eval (/mnt/c/Users/almos/Documents/Codes/web_dev/datePicker/node_modules/@solidjs/router/dist/index.js:1470:49) at async instantiateModule (file:///mnt/c/Users/almos/Documents/Codes/web_dev/datePicker/node_modules/vinxi/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:52972:5), statusCode: 500, fatal: false, unhandled: true, statusMessage: undefined, data: undefined }

Context 🔦

run new SolidStart project in dev mode successfully. Old projects run fine.

Your environment 🌎

System:
  OS Name: Microsoft Windows 11 Home
  OS Version: 10.0.22631 N/A Build 22631
  System Type:               x64-based PC
  Processor(s):              1 Processor(s) Installed.
                             [01]: Intel64 Family 6 Model 154 Stepping 3 GenuineIntel ~2700 Mhz
Binaries:
  Node: v20.13.1
  npm: 10.9.0

[kaeosdesign]

same issue

[NielsHoogeveen]

I had the same issue as well. Using pnpm create solid@latest, pnpm install, pnpm dev. Didn't give the same issues.

[tcerqueira]

Same issue. I'm running npm version 10.9.0 and node version v22.11.0 on MacOS.

Edit: using pnpm solved the issue.

[threeaio]

Same Problem. :( ... checked some (not all!) package-versions and they all seem to be the same as in my working projects. Running on MacOS. Using pnpm didn´t help :/ I copied the node_modules from a previous project and that worked.

[rpivo]

Also observed with npm on macos, but works with pnpm