Stylex、React、Typescript 和 Vite 项目设置

Question

我试图将

Stylex

包含在我的

vite

项目中，该项目是用

react

和

typescript

构建的，但我一直在错误中绊倒。例如：

1. 最新版本的

   stylex

   和

   vite-plugin-stylex

   不兼容。
2. 为了获得与插件兼容的版本，将

   @stylexjs/stylex

   从

   0.6.1

   降级为

   0.5.1

   后，当我尝试在

   vite.config.ts

   中导入插件时，插件会抛出错误。

错误：

Cannot find module 'vite-plugin-stylex' or its corresponding type declarations.
  There are types at '/run/media/andre/Kingston/dev-setup/Babylon/babylon-ui-app/node_modules/vite-plugin-stylex/dist/index.d.mts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'

我想提一下，我尝试了所有指定的

moduleResolution

，但没有任何效果。

这是我的

vite.config.ts

：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import stylex from 'vite-plugin-stylex';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), stylex()],
});

@stylexjs/stylex

：

0.5.1

vite-plugin-stylex

：

0.8.3

此外，项目的构建无法加载

stylex

样式。

如果有人设法使用

vite

、

react

、

typescript

和

stylex

设置项目，请分享设置，以便我尝试。

更新1：添加tsconfig

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "baseUrl": "./",
    "paths": {
      "@components": ["src/components"],
      "@components/*": ["src/components/*"],
      "@widgets": ["src/widgets"],
      "@widgets/*": ["src/widgets/*"],
      "@config": ["src/config"],
      "@config/*": ["src/config/*"],
      "@dto": ["src/dto"],
      "@dto/*": ["src/dto/*"],
      "@hooks": ["src/hooks"],
      "@hooks/*": ["src/hooks/*"],
      "@redux": ["src/redux"],
      "@redux/*": ["src/redux/*"],
      "@socket": ["src/socket"],
      "@socket/*": ["src/socket"],
      "@types": ["src/types"],
      "@types/*": ["src/types"],
      "@utils": ["src/utils"],
      "@utils/*": ["src/utils*"]
    },
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

更新2：

tsconfig.node.json

是需要更新的文件。

module

和

moduleResolution

应设置为

nodenext

。

{
  "compilerOptions": {
    "composite": true,
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

但这并不能解决构建问题。项目构建后，样式根本不会保存。

考虑

vite

和

stylex

是否可能太早了？

Answer 1

这个对我有用，覆盖 package.json 中的部分很重要。

查看Medium上的这篇博文