[Bug] npx onlook: "Cannot determine the project framework"

[BatthewZ]

Describe the bug

Running npx onlook in my react typescript project fails and returns this:

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'glob@11.0.0',
npm WARN EBADENGINE   required: { node: '20 || >=22' },
npm WARN EBADENGINE   current: { node: 'v21.1.0', npm: '10.2.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'jackspeak@4.0.1',
npm WARN EBADENGINE   required: { node: '20 || >=22' },
npm WARN EBADENGINE   current: { node: 'v21.1.0', npm: '10.2.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'minimatch@10.0.1',
npm WARN EBADENGINE   required: { node: '20 || >=22' },
npm WARN EBADENGINE   current: { node: 'v21.1.0', npm: '10.2.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'path-scurry@2.0.0',
npm WARN EBADENGINE   required: { node: '20 || >=22' },
npm WARN EBADENGINE   current: { node: 'v21.1.0', npm: '10.2.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'lru-cache@11.0.0',
npm WARN EBADENGINE   required: { node: '20 || >=22' },
npm WARN EBADENGINE   current: { node: 'v21.1.0', npm: '10.2.0' }
npm WARN EBADENGINE }
Cannot determine the project framework.

This is my package.json:

{
  "name": "react-ts-playground",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.57.1",
    "@typescript-eslint/parser": "^5.57.1",
    "@vitejs/plugin-react-swc": "^3.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "typescript": "^5.0.2",
    "vite": "^4.3.2"
  }
}

It's worth noting, I am running in Windows OS (not WSL2), and the project path does have spaces in it (ie D:\my code path\my_project )

[Kitenite]

Seems like the CLI is not correctly picking up that this is a Vite framework. This should likely be returning true if either the dependency or the configuration file exists. And add logic to add a configuration file if it doesn't exist.

https://github.com/onlook-dev/onlook/blob/a697741f0d3b5f84b4bc3aed214514e143b3463a/cli/vite.js#L37-L56

[Kitenite]

@BatthewZ thank you for the issue. Can you confirm if there is a vite.config file in the repo?

[OutOfTokens]

Having the same issue on a Next.js and Tailwind app. Are there any other workarounds for this?

// Off-topic but I was in bed and found a Reddit thread about Onlook. I spent so much time looking for something like this that I got out of bed to install and use it with my app lol.

Hoping for a fix soon! :)

[Kitenite]

@OutOfTokens @BatthewZ For now, you can manually install Onlook to your project instead. https://github.com/onlook-dev/onlook/wiki/How-to-set-up-my-project%3F#do-it-manually

1. You would install the plugin with

npm i -D @onlook/nextjs

2. And then update next.config.mjs or next.config.js with the swcPlugin line:

   
   const nextConfig = {
   reactStrictMode: true,
   experimental: {
   swcPlugins: [["@onlook/nextjs"]],
   },
   }

export default nextConfig

3. You can run your project regularly and Onlook will pick up your code changes.

[BatthewZ]

@Kitenite Yo!

Yes, there is a vite.config.ts. Admittedly this is an older 'playground/sandbox' project I just wanted to add Onlook to, but I could try spinning up a new project to see if it helps.

vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

I'll look into the manual install, ty!

[Kitenite]

@BatthewZ , there’s a Vite demo here: https://github.com/onlook-dev/onlook/tree/main/demos/remix

Does this work?

[Kitenite]

@BatthewZ , I'm looking into this further.

Seems like the project should be picked up when vite.config.ts exists and vite is in dependencies. In this case, it is.

It's possible that glob does not work correctly for your current version of node node: 'v21.1.0'. In this case, you could try to use Node 20 or Node >=22.

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'glob@11.0.0',
npm WARN EBADENGINE   required: { node: '20 || >=22' },
npm WARN EBADENGINE   current: { node: 'v21.1.0', npm: '10.2.0' }
npm WARN EBADENGINE }

Otherwise, did the manual method work?