使用Vite时Emotion CSS Prop样式未生效问题排查

环境版本 #

• vite@3.1.6
• @vitejs/plugin-react@2.1.6
• @emotion/react@11.10.4
• react@17.0.2

当前Vite配置 #

{
  plugins: [
    react({
        exclude: /\.stories\.(t|j)sx?$/,
        babel: {
            plugins: ["@emotion/babel-plugin"]
        }
    }),
    tsconfigPaths(),
    svgrPlugin()
  ],
  esbuild: {
      logOverride: { "this-is-undefined-in-esm": "silent" },
      jsxFactory: `jsx`,
      jsxImportSource: "@emotion/react",
  },
  build: {
      outDir: "build",
  },
  server: {
      port: 3000,
  },
  optimizeDeps: {
      esbuildOptions: {
          define: {
              // Node.js global to browser globalThis
              global: "globalThis",
          },
          plugins: [
              // Enable esbuild polyfill plugins
              NodeGlobalsPolyfillPlugin({
                  buffer: true,
              }),
          ],
      },
  },
  resolve: {
      preserveSymlinks: true,
      dedupe: ["react", "react-dom", "@emotion/styled", "@emotion/core"],
      alias: [
          {
              // this is required for the scss modules
              find: /^~(.*)$/,
              replacement: '$1',
          },
          {
              find: "@emotion/core",
              replacement: getRootPackageDir("@emotion/react"),
          },
          {
              find: "emotion-theming",
              replacement: getRootPackageDir("@emotion/react"),
          },
          {
              find: "@emotion/styled",
              replacement: getRootPackageDir("@emotion/styled"),
          },
      ],
  }
}

问题 #

项目自身使用Emotion 11，但依赖中存在Emotion 10版本，已通过别名配置指向根依赖，但CSS Prop样式仍未应用到任何组件。

排查与修复步骤 #

1. 完善TypeScript配置
   如果使用TS，需在tsconfig.json中添加Emotion类型支持，确保CSS Prop能被正确识别：

   {
     "compilerOptions": {
       "jsxImportSource": "@emotion/react",
       "types": ["@emotion/react/types/css-prop"]
     }
   }
   

   若未全局配置，需在组件文件顶部添加注释：/** @jsxImportSource @emotion/react */

2. 强化依赖去重与别名
   在resolve.dedupe中加入@emotion/react，强制所有依赖使用同一版本：

   resolve: {
     dedupe: ["react", "react-dom", "@emotion/react", "@emotion/styled", "@emotion/core"],
     // ... 其他配置
   }
   

   测试getRootPackageDir是否返回正确路径，可临时替换为绝对路径验证：

   {
     find: "@emotion/core",
     replacement: require.resolve("@emotion/react")
   }
   

3. 协调Babel与Esbuild的JSX配置
   当同时使用Babel插件和Esbuild的JSX配置时可能存在冲突，可先注释Esbuild的JSX相关配置，仅保留Babel插件配置，测试样式是否生效：

   esbuild: {
       logOverride: { "this-is-undefined-in-esm": "silent" },
       // 暂时注释以下两行
       // jsxFactory: `jsx`,
       // jsxImportSource: "@emotion/react",
   },
   

4. 检查组件使用方式
   确保组件正确导入并使用CSS Prop：

   import { css } from '@emotion/react';
   
   const MyComponent = () => {
     // 两种写法均可
     return <div css={css({ color: 'red' })}>测试文本</div>;
     // 或 <div css={{ color: 'red' }}>测试文本</div>
   };
   

5. 清理缓存重启服务
   执行vite --force重启开发服务器，清理Vite依赖优化缓存，确保新配置生效。

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