I'm trying to apply the first 4 things to new project

Question

I tried applying StyleX to vite. So, I installed and applied the library called "vite-plugin-stylex": "^0.4.1".

vite.config.ts

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react-swc"
import styleX from "vite-plugin-stylex"

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

eslintrc.cjs

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react/recommended", "prettier"],
  overrides: [
    {
      env: {
        node: true,
      },
      files: [".eslintrc.{js,cjs}"],
      parserOptions: {
        sourceType: "script",
      },
    },
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["@typescript-eslint", "react", "@stylexjs"],
  rules: {
    "react/react-in-jsx-scope": "off",
    "@stylexjs/valid-styles": [
      "error",
      {
        animationName: "off",
      },
    ],
  },
}

package.json

"dependencies": {
    "@stylexjs/stylex": "^0.4.1",
    "@tanstack/react-query": "^5.17.9",
    "axios": "^1.6.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.21.1",
    "recoil": "^0.7.7"
  },
  "devDependencies": {
    "@stylexjs/dev-runtime": "^0.4.1",
    "@stylexjs/eslint-plugin": "^0.4.1",
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@typescript-eslint/eslint-plugin": "^6.18.0",
    "@typescript-eslint/parser": "^6.18.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^8.55.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "typescript": "^5.2.2",
    "vite": "^5.0.8",
    "vite-plugin-stylex": "^0.4.1"
  },
  "packageManager": "[email protected]"

But an error occurred during dev.

Error Message

error when starting dev server:
Error: @stylexjs/babel-plugin tried to access @babel/types (a peer dependency) but it isn't provided by its ancestors; this makes the require call ambiguous and unsound.

Required package: @babel/types
Required by: @stylexjs/babel-plugin@virtual:9d508b2b76b36ad6cf4935fa1f8eb6ed833fe5ea90e7480ef922181da57452dd450c843d3cffb88b22f6cdc354b65ad87f3e5ce6a0737030399a7cfe165a33ca#npm:0.3.0 (via /Users/ensnif/Desktop/daemarket/.yarn/__virtual__/@stylexjs-babel-plugin-virtual-93ace3c5e4/3/.yarn/berry/cache/@stylexjs-babel-plugin-npm-0.3.0-dfa2d73404-10c0.zip/node_modules/@stylexjs/babel-plugin/lib/)

Ancestor breaking the chain: vite-plugin-stylex@virtual:b6eb18cdd1130995b6fa51c00434fbab46438119bd3c3821577947a7228956003bffd6376f5020cdf264887e9d7f8f2f54e56d8b55774a47e0a963b93316ff60#npm:0.4.1


Require stack:
- /Users/ensnif/Desktop/daemarket/.yarn/__virtual__/@stylexjs-babel-plugin-virtual-93ace3c5e4/3/.yarn/berry/cache/@stylexjs-babel-plugin-npm-0.3.0-dfa2d73404-10c0.zip/node_modules/@stylexjs/babel-plugin/lib/index.js
    at require$$0.Module._resolveFilename (/Users/ensnif/Desktop/daemarket/.pnp.cjs:10715:13)
    at Module._load (node:internal/modules/cjs/loader:901:27)
    at require$$0.Module._load (/Users/ensnif/Desktop/daemarket/.pnp.cjs:10606:31)
    at Module.require (node:internal/modules/cjs/loader:1115:19)
    at require (node:internal/modules/helpers:130:18)
    at Object.<anonymous> (/Users/ensnif/Desktop/daemarket/.yarn/__virtual__/@stylexjs-babel-plugin-virtual-93ace3c5e4/3/.yarn/berry/cache/@stylexjs-babel-plugin-npm-0.3.0-dfa2d73404-10c0.zip/node_modules/@stylexjs/babel-plugin/lib/index.js:3:9)
    at Module._compile (node:internal/modules/cjs/loader:1241:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at require$$0.Module._extensions..js (/Users/ensnif/Desktop/daemarket/.pnp.cjs:10758:33)
    at Module.load (node:internal/modules/cjs/loader:1091:32)

All installed package.json

  "dependencies": {
    "@stylexjs/stylex": "^0.4.1",
    "@tanstack/react-query": "^5.17.9",
    "axios": "^1.6.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.21.1",
    "recoil": "^0.7.7"
  },
  "devDependencies": {
    "@babel/traverse": "^7.23.7",
    "@babel/types": "^7.23.6",
    "@stylexjs/dev-runtime": "^0.4.1",
    "@stylexjs/eslint-plugin": "^0.4.1",
    "@types/babel__traverse": "^7",
    "@types/invariant": "^2",
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@typescript-eslint/eslint-plugin": "^6.18.0",
    "@typescript-eslint/parser": "^6.18.0",
    "@vitejs/plugin-react": "^4.2.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^8.55.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "invariant": "^2.2.4",
    "postcss-value-parser": "^4.2.0",
    "styleq": "^0.1.3",
    "typescript": "^5.2.2",
    "vite": "^5.0.8",
    "vite-plugin-stylex": "^0.4.1"
  },
  "packageManager": "[email protected]"
}

I installed and ran all necessary packages.

Login.tsx

import * as stylex from "@stylexjs/stylex"

const styles = stylex.create({
  title: {
    color: 'grey',
  },
})
const Login = () => {
  return (
    <>
      <h1 {...stylex.props(styles.title)}>Vite + React</h1>
    </>
  )
}

export default Login

Login.tsx:2 Uncaught TypeError: stylex.inject is not a function

An error message appeared in the console as shown above. Once I lowered the version of Stylex, the problem was solved.

How to do it to work normally in the Stylex version 0.4.1

Answer 1

This is a bug in StyleX 0.4.1 and Vite. The problem will be fixed in 0.5.0 and you try it today by trying 0.5.0-alpha.3