Vite项目集成StyleX 0.4.1报错，求适配该版本的解决方案

1. 修复@babel/types依赖不兼容问题 #

安装@stylexjs/babel-plugin时提示的peer依赖缺失，并非简单安装任意版本的@babel/types即可，需要匹配StyleX 0.4.1兼容的版本：

npm install @babel/types@^7.23.0 --save-dev
# 或使用yarn/pnpm
# yarn add @babel/types@^7.23.0 -D
# pnpm add @babel/types@^7.23.0 -D

2. 解决stylex.inject不是函数错误 #

这个问题核心是编译配置或代码使用方式不符合StyleX 0.4.1的要求，按以下步骤逐一排查：

步骤1：修正Vite插件配置 #

确保vite.config.ts中vite-plugin-stylex的配置完整，尤其要开启开发模式支持：

import { defineConfig } from 'vite';
import stylexPlugin from 'vite-plugin-stylex';

export default defineConfig({
  plugins: [
    stylexPlugin({
      dev: process.env.NODE_ENV === 'development',
      importImport: '@stylexjs/stylex',
    }),
  ],
});

步骤2：调整StyleX代码使用方式 #

StyleX 0.4.1中stylex.inject是编译阶段自动处理的逻辑，不需要在业务代码中手动调用。如果你的Login.tsx里有手动调用stylex.inject的代码，直接移除，改用标准的样式应用方式：

import stylex from '@stylexjs/stylex';

// 定义样式
const styles = stylex.create({
  loginContainer: {
    padding: '20px',
    borderRadius: '8px',
    backgroundColor: '#fff',
  },
});

// 使用样式
export default function Login() {
  return <div {...stylex.props(styles.loginContainer)}>登录表单</div>;
}

步骤3：同步ESLint配置 #

确保.eslintrc.cjs中的StyleX规则配置正确，避免误判合法的代码：

module.exports = {
  plugins: ['@stylexjs'],
  rules: {
    '@stylexjs/valid-styles': 'error',
  },
  settings: {
    stylex: {
      modules: ['@stylexjs/stylex'],
    },
  },
};

步骤4：清除缓存并重启服务 #

Vite的缓存可能残留旧编译产物，执行以下命令后重新启动开发服务器：

rm -rf node_modules/.vite
npm run dev

3. 统一依赖版本 #

检查package.json中所有StyleX相关依赖的版本是否一致为0.4.1，避免版本不匹配引发的隐性问题：

{
  "dependencies": {
    "@stylexjs/stylex": "^0.4.1"
  },
  "devDependencies": {
    "vite-plugin-stylex": "^0.4.1",
    "@stylexjs/babel-plugin": "^0.4.1",
    "@babel/types": "^7.23.0"
  }
}

内容的提问来源于stack exchange，提问作者Ensnif