带@emption/react 的 npm 包和 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'],
        },
      }),
    ]
});

安装库并用于反应项目后，它显示为 -

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

带@emption/react 的 npm 包和 vite 不能按预期工作

npm package with @emption/react with vite not working as expected

javascript

emotion

typescript

reactjs

vite