npm package with @emption/react with vite 未按預期工作

Question

在發布npm package 之后，依賴項@emotion/react出錯了。 我已經使用vite進行包裝。

將 package 安裝到另一個項目后， css屬性顯示為 - css="[object Object] 。但它應該轉換為 HTML 的class屬性。

vite.config.ts

export default defineConfig({
  plugins: [
     react({
        jsxRuntime: 'classic',
        jsxImportSource: '@emotion/react',
        babel: {
          plugins: ['@emotion/babel-plugin'],
        },
      }),
    ]
});

安裝庫並用於反應項目后，它顯示為 -

<div css="[object Object]">
  <div role="button" css="[object Object]" tabindex="-1">
  </div>
</div>;

但是css屬性應該是class屬性。

那么，如何使用@emotion/react來配合vite的react 庫項目呢？

Answer 1

發現了問題。 我已經將jsxRuntime從classic更改為automatic解決了這個問題。 所以配置是-

export default defineConfig({
  plugins: [
     react({
        jsxRuntime: 'automatic', // <---
        jsxImportSource: '@emotion/react',
        babel: {
          plugins: ['@emotion/babel-plugin'],
        },
      }),
    ]
});