npm包@emption/与未按预期工作的vite作出反应

Question

发布npm包后，依赖项@emotion/react出错。我用过vite来包装。

将包安装到另一个项目后，css属性显示为- css="[object Object]。但是它应该转换成HTML的class属性。

vite.config.ts

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

在安装了这个库并使用了一个react项目之后，它显示如下-

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