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

[Garrett-Floyd]

Duplicates

• I have searched the existing issues

Latest version

• 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

[catlair]

❯ pnpm -v
9.11.0
❯ npm -v
10.8.3
❯ node -v
v22.9.0
❯ uname
Linux

An error occurred in pnpm workspace

Works fine in pnpm (not workspace) or npm

[Just-a-Jason]

Same problem here. For a new project I copied node_modules folder from working project and it works fine, but I hope they will fix it soon.

[ryansolid]

I was able to reproduce this by updating to Vite 6 on the main project. So it is some sort of mismatch on versioning I think. I do use pnpm to be fair so I hadn't noticed it on any of the projects or examples until I made the vite 6 change. We also happen to be working on updating Vinxi and Vite versions so there should be a release soon that has all the matching versions again. I'm not sure how wrong versions are getting included. Something to do with package resolution and locking I guess but I'm gathering it has to do with sub dependencies depending on different versions of packages.

[Lunatic83]

Same issue on every pnpm create solid@latest example I've used.
I did investigate further using hackernews example using a 3 weeks old sandbox hackernews example in my local env
I've done the following steps:

pnpm create solid@latest
pnpm install
pnpn dev

At this stage I had the Client-only API on the server side error than I did

rm -Rf node_modules
# copy the pnpm-lock.yaml from the 3 weeks old sandbox
pnpm install
pnpm dev

Everything works with the old libs lock references I did perform a diff between the 2 pnpm-lock.yaml
I think some dependencies upgrade created a regression.

I found vite to have a dependency to a new version 6.0.2

I did force to override on the package.json with vite: 5.4.10
and it works.

This is my new package.json

{
  "name": "example-hackernews",
  "type": "module",
  "scripts": {
    "dev": "vinxi dev",
    "build": "vinxi build",
    "start": "vinxi start"
  },
  "dependencies": {
    "@solidjs/router": "^0.15.0",
    "@solidjs/start": "^1.0.10",
    "solid-js": "^1.9.2",
    "vinxi": "^0.4.3"
  },
  "pnpm": {
    "overrides": {
      "vite": "5.4.10"
    }
  },
  "engines": {
    "node": ">=18"
  }
}

[Lunatic83]

I think is something specifically with vite@6.0.2 I did override with version vite@6.0.1 and it works.

[martinliptak]

This package.json works for NPM (added "overrides"):

{
  "name": "example-basic",
  "type": "module",
  "scripts": {
    "dev": "vinxi dev",
    "build": "vinxi build",
    "start": "vinxi start",
    "version": "vinxi version"
  },
  "dependencies": {
    "@solidjs/meta": "^0.29.4",
    "@solidjs/router": "^0.15.0",
    "@solidjs/start": "^1.0.10",
    "solid-js": "^1.9.2",
    "vinxi": "^0.4.3"
  },
  "overrides": {
    "vite": "5.4.10"
  },
  "engines": {
    "node": ">=18"
  }
}

[birkskyum]

@Lunatic83 , is vite 6.0.3 any better? https://github.com/vitejs/vite/blob/v6.0.3/packages/vite/CHANGELOG.md

[caseybaggz]

I just tried 6.0.3 and it's still broken 😭

{
  "name": "example-basic",
  "type": "module",
  "scripts": {
    "build": "vinxi build",
    "dev": "vinxi dev",
    "start": "vinxi start",
    "version": "vinxi version"
  },
  "dependencies": {
    "@solidjs/meta": "^0.29.4",
    "@solidjs/router": "^0.15.0",
    "@solidjs/start": "^1.0.10",
    "solid-js": "^1.9.3",
    "vinxi": "^0.4.3"
  },
  "pnpm": {
    "overrides": {
      "vite": "6.0.3"
    }
  },
  "engines": {
    "node": ">=18"
  }
}