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

Garrett-Floyd · 2024-11-27T04:00:46Z

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:

npm init solid@latest
Project Name: datePicker
Is this a SolidStart project? Yes
Which template would you like to use? basic
Use Typescript? No
Project successfully created!
cd datePicker
npm install
npm run dev
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 · 2024-11-27T15:10:50Z

same issue

NielsHoogeveen · 2024-11-28T11:55:05Z

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

tcerqueira · 2024-11-28T20:04:44Z

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 · 2024-11-29T10:33:43Z

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 · 2024-11-30T20:55:15Z

Also observed with npm on macos, but works with pnpm

catlair · 2024-12-03T13:04:17Z

❯ 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 · 2024-12-03T14:39:38Z

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 · 2024-12-03T19:21:10Z

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 · 2024-12-03T22:19:52Z

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 · 2024-12-03T22:25:27Z

I think is something specifically with [email protected] I did override with version [email protected] and it works.

martinliptak · 2024-12-05T10:55:45Z

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 · 2024-12-10T14:41:48Z

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

caseybaggz · 2024-12-10T14:50:13Z

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"
  }
}

birkskyum · 2024-12-10T14:52:44Z

@caseybaggz what do you see with vinxi 0.5.1?

caseybaggz · 2024-12-10T20:57:12Z

@caseybaggz what do you see with vinxi 0.5.1?

Yes!

Working package.json & pnPm

{
  "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.5.1"
  },
  "engines": {
    "node": ">=18"
  }
}

MengLinMaker · 2024-12-11T21:37:26Z

Explicitly downloading vite@5 in the packages seem to solve the issue.

Maybe it's a peer deps issue from vinxi?

Had the same problem using pnpm

birkskyum · 2024-12-11T22:00:42Z

@MengLinMaker , in combination with which vinxi versions?

Garrett-Floyd added the bug Something isn't working label Nov 27, 2024

birkskyum mentioned this issue Dec 10, 2024

Move docs from root package to /docs package #1685

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Garrett-Floyd commented Nov 27, 2024 •

edited

Loading

kaeosdesign commented Nov 27, 2024

NielsHoogeveen commented Nov 28, 2024

tcerqueira commented Nov 28, 2024 •

edited

Loading

threeaio commented Nov 29, 2024 •

edited

Loading

rpivo commented Nov 30, 2024

catlair commented Dec 3, 2024

Just-a-Jason commented Dec 3, 2024

ryansolid commented Dec 3, 2024 •

edited

Loading

Lunatic83 commented Dec 3, 2024

Lunatic83 commented Dec 3, 2024

martinliptak commented Dec 5, 2024

birkskyum commented Dec 10, 2024 •

edited

Loading

caseybaggz commented Dec 10, 2024

birkskyum commented Dec 10, 2024 •

edited

Loading

caseybaggz commented Dec 10, 2024 •

edited

Loading

MengLinMaker commented Dec 11, 2024 •

edited

Loading

birkskyum commented Dec 11, 2024

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

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

Comments

Garrett-Floyd commented Nov 27, 2024 • edited Loading

Duplicates

Latest version

Current behavior 😯

Expected behavior 🤔

Steps to reproduce 🕹

Context 🔦

Your environment 🌎

kaeosdesign commented Nov 27, 2024

NielsHoogeveen commented Nov 28, 2024

tcerqueira commented Nov 28, 2024 • edited Loading

threeaio commented Nov 29, 2024 • edited Loading

rpivo commented Nov 30, 2024

catlair commented Dec 3, 2024

Just-a-Jason commented Dec 3, 2024

ryansolid commented Dec 3, 2024 • edited Loading

Lunatic83 commented Dec 3, 2024

Lunatic83 commented Dec 3, 2024

martinliptak commented Dec 5, 2024

birkskyum commented Dec 10, 2024 • edited Loading

caseybaggz commented Dec 10, 2024

birkskyum commented Dec 10, 2024 • edited Loading

caseybaggz commented Dec 10, 2024 • edited Loading

MengLinMaker commented Dec 11, 2024 • edited Loading

birkskyum commented Dec 11, 2024

Garrett-Floyd commented Nov 27, 2024 •

edited

Loading

tcerqueira commented Nov 28, 2024 •

edited

Loading

threeaio commented Nov 29, 2024 •

edited

Loading

ryansolid commented Dec 3, 2024 •

edited

Loading

birkskyum commented Dec 10, 2024 •

edited

Loading

birkskyum commented Dec 10, 2024 •

edited

Loading

caseybaggz commented Dec 10, 2024 •

edited

Loading

MengLinMaker commented Dec 11, 2024 •

edited

Loading