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'],
        },
      }),
    ]
});