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?]: Error: Client-only API called on the server side. When using npm run dev on a brand new solidstart project #1679

Open
2 tasks done
Garrett-Floyd opened this issue Nov 27, 2024 · 28 comments
Labels
bug Something isn't working

Comments

@Garrett-Floyd
Copy link

Garrett-Floyd commented Nov 27, 2024

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
@Garrett-Floyd Garrett-Floyd added the bug Something isn't working label Nov 27, 2024
@kaeosdesign
Copy link

same issue

@NielsHoogeveen
Copy link

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

@tcerqueira
Copy link

tcerqueira commented Nov 28, 2024

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

threeaio commented Nov 29, 2024

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

rpivo commented Nov 30, 2024

Also observed with npm on macos, but works with pnpm

@catlair
Copy link

catlair commented Dec 3, 2024

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

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

ryansolid commented Dec 3, 2024

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

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

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

@martinliptak
Copy link

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

birkskyum commented Dec 10, 2024

@caseybaggz
Copy link
Contributor

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

birkskyum commented Dec 10, 2024

@caseybaggz what do you see with vinxi 0.5.1?

@caseybaggz
Copy link
Contributor

caseybaggz commented Dec 10, 2024

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

MengLinMaker commented Dec 11, 2024

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

@MengLinMaker , in combination with which vinxi versions?

@romanobro56
Copy link

Tried importing with clientOnly, failed. Saw this, fixed dependency versions, failed. Downloaded pnpm, tried again, failed. I was excited to revamp an old website with the framework I learned web development with, but it would be stupid of me to continue trying!

@MengLinMaker
Copy link

MengLinMaker commented Dec 14, 2024

@MengLinMaker , in combination with which vinxi versions?

@birkskyum vinxi@^0.4.3 with vite@5

@MengLinMaker
Copy link

@romanobro56 Probably tried SolidStart at an unlucky time. This was never an issue when I started.

I think using an older version of vinxi or vite should be a good temporary workaround.

@simonihmig
Copy link

Can confirm you can fix-forward by upgrading vinxi to ^0.5.1. Seems the better option than downgrading vite?

@ryansolid
Copy link
Member

ryansolid commented Dec 16, 2024

Vinxi 0.5 has had other issues when we tried to update so was waiting on those to come in. I can confirm older versions of Vite and Vinxi work properly.

But given that Vite 6 seems to be leaking into new installs through deps of deps in new installs that puts us in an awkward place.

I'm going to lock on Vite 5 for now I think like suggested above and we will deal with it as fixes come in.

@simonihmig
Copy link

While the basic app boilerplate was working for me with vinxie 0.5 and vite 6, I was running into issues later when adding real application code (and vite plugins). But downgrading to vinxie 0.4 and vite 5 as suggested here also did not fix the issue for me.

I have this reproducible in this PR of another project. And looking at that case I can't really confirm the theory that vite 6 is leaking into the dependency graph somehow. This is a monorepo using pnpm, and so far I have seen pnpm do a pretty good job not leaking extraneous dependencies as others do. In that solid-start app, when I go into node_modules/vinxie and call require.resolve('vite') in node REPL (just looking into the folder does not tell you the truth how modules get resolved with pnpm's symlink trickery) it does return a path with vite v5. And in the error stack I also see only references to pnpm node_modules folders with vite 5 in them. So I think there must be something more in play here...

@birkskyum
Copy link
Contributor

@simonihmig I can repro the error in your PR, with vinxi 0.4.3 / vite 5. Paradoxically, I don't see the error when using the main branch with vinxi 0.5.1

@simonihmig
Copy link

Paradoxically, I don't see the error when using the main branch with vinxi 0.5.1

Yeah, as I said earlier, for the plain starter project output the combination vinxie 0.5.1 / vite 6 used to work, but started to show other issues when adding some real code (in this PR).

@alexamy
Copy link

alexamy commented Dec 21, 2024

When using basic template for initializing package, it works ok. But when the package is moved to a monorepo with npm workspaces, dev script run is broken with error below. The bare template works fine in both cases.

9:06:35 PM [vite] Error when evaluating SSR module /@fs/home/alex/hobby/solid-project/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 <Show>.
    at Module.notSup (file:///home/alex/hobby/solid-project/node_modules/solid-js/web/dist/server.js:1136:9)
    at eval (/home/alex/hobby/solid-project/node_modules/@solidjs/router/dist/index.js:1625:49)
    at async instantiateModule (file:///home/alex/hobby/solid-project/node_modules/vinxi/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:52972:5)

Dependencies:

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

Nested installation strategy, as described here, does not work too.

Jakob-Strobl added a commit to Jakob-Strobl/portfolio that referenced this issue Jan 4, 2025
Jakob-Strobl added a commit to Jakob-Strobl/portfolio that referenced this issue Jan 4, 2025
Actually vite6 isn't the issue it's the plugin v1.11.0
Part 2 of my fix for this related issue:
solidjs/solid-start#1679
@Jakob-Strobl
Copy link

I ran into a similar issue. I tried downgrading to vite 5 which fixed my related issue with the tests, but then I realized it broke starting up the dev server.

For me, I found a good place by rolling back the vite-plugin-solid from 2.11.0 to 2.10.2.

// devDependencies
"vite": "^6.0.7",
"vite-plugin-solid": "2.10.2", // I rolled back this from 2.11.0

// dependencies (related)
"@solidjs/meta": "^0.29.4",
"@solidjs/router": "^0.15.2",
"@solidjs/start": "^1.0.10",
"solid-js": "^1.9.3",
"vinxi": "^0.5.1"

This fixes my related issues with the tests and my dev server is still working.
I did have to add a try-catch to some client code being executed the tests and throwing an error. The code is imported with the clientOnly(). I think previously maybe the code wasn't executed, which may be related to the this issues error "Client-only API called on the server side.". I stepped away from my project for a couple months, so I don't remember well.

Jakob-Strobl added a commit to Jakob-Strobl/portfolio that referenced this issue Jan 5, 2025
Jakob-Strobl added a commit to Jakob-Strobl/portfolio that referenced this issue Jan 5, 2025
Actually vite6 isn't the issue it's the plugin v1.11.0
Part 2 of my fix for this related issue:
solidjs/solid-start#1679
@spitcat
Copy link

spitcat commented Jan 7, 2025

every single time i try update solidjs is something broken :(((

my working

package.json

{
  "name": "test",
  "type": "module",
  "scripts": {
    "dev": "vinxi dev",
    "build": "vinxi build",
    "start": "vinxi start"
  },
  "dependencies": {
    "@solidjs/router": "^0.15.0",
    "@solidjs/start": "^1.0.11",
    "autoprefixer": "^10.4.19",
    "postcss": "^8.4.49",
    "solid-js": "^1.9.2",
    "tailwindcss": "^3.4.3",
    "vinxi": "^0.4.3"
  },
  "engines": {
    "node": ">=18.x"
  },
  "overrides": {
    "vite": "5.4.10"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^8.19.1",
    "@typescript-eslint/parser": "^8.19.1",
    "eslint": "^9.17.0",
    "prettier": "^3.4.2"
  }

}

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