Vite project starts with an error "Preprocessor dependency "sass" failed to load"

Question

I install my dependencies in my Vite project (React+TS) and try to run it (I use yarn dev), and then I get an error:

Preprocessor dependency "sass" failed to load

This is my package.json:

 "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-use-websocket": "3.0.0",
    "sass": "^1.69.3"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }

This problem occurs on my work computer (I did the project on my personal laptop and everything runs fine there, the project was cloned from my repository).

Full error message:

[plugin:vite:css] Preprocessor dependency "sass" failed to load:
Cannot read properties of undefined (reading 'pop')

Answer 1

Node v21.0.0 did not include a navigator.userAgent value, breaking compatibility with Dart when compiled with JS.

Downgrade to v20.8.1 or upgrade to v21.1.0 to fix the issue.

GitHub issue and resolution thread: https://github.com/dart-lang/sdk/issues/53784