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
