How to get intellisense in VS code for react-babylonjs?

Questions
1

Hi all,
I’m playing with react-babylonjs examples by copy/paste js code into a vite project (npm create vite@latest my-project -- --template react).

Code is working fine but the intellisense is not working at all. Any pointers?

Screenshot 2024-12-08 at 11.06.40 PM
Screenshot 2024-12-08 at 11.06.40 PM1786×1364 472 KB

2

cc @brianzinn

3

hi @wxz - thanks for using the forum. good question. I’ve never tried in in a JS project. Did you try restarting VS Code? Sometimes in TS you need to restart the TS server.

The “mesh” and “standardMaterial” are registerd as a JSX intrinsic elements (global) when you include react-babylonjs, so those properties should be known. If the restart VS code doesn’t work I can look. I should have moved the CRA examples over to vite years ago anyway.

On the other hand, if those are eslint warnings about an unknown property - that is a different discussion…

edit: can you share your package.json?

4

hi @wxz not sure how you fared - it does look like eslint. If you have any more questions we can follow up. Cheers.

5

hi @brianzinn,

Sorry for the late reply. Restart VS Code didn’t help. Here’s the content of package.json:

{
  "name": "vite_react_alpha",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@babylonjs/core": "^7.36.0",
    "@babylonjs/gui": "^7.36.0",
    "react": "^18.3.1",
    "react-babylonjs": "^3.2.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.15.0",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react": "^4.3.4",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.15.0",
    "eslint-plugin-react": "^7.37.2",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.14",
    "globals": "^15.12.0",
    "postcss": "^8.4.49",
    "tailwindcss": "^3.4.15",
    "vite": "^6.0.1"
  }
}
6

I don’t know if you caught my last message. What are the errors - maybe they show up in the “problems” tab (ctrl+`).

7

hi, the error is:

Unknown property 'fromInstance' found. eslint (...

Intellisense works with TypeScript. I’ll switch to that.

8

hi @wxz - glad you got it working. The eslint errors are from a long-standing issue downstream in React ecosystem. It actually affects all react renderers unfortunately and stems from a library that should be dropped. Must be that the typescript eslint maybe is more forgiving.

I wonder if your eslint.config.js excludes unknown properties! Thank-you for reporting back.