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

user_4610740 0
Viewed 359

After publishing the npm package the dependency @emotion/react goes wrong. I've used vite for packaging.

After installing the package to another project the css property shows like - css="[object Object]. But it should convert into a class attribute of the HTML.

vite.config.ts

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

After installing the library and using to a react project it shows like-

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

But the css attribute should be class attribute.

So, how to use @emotion/react to the react library project with vite?

emotion vite typescript reactjs javascript
1 Answers

Found the problem. I've changed the jsxRuntime from classic to automatic solves the issue. So the config is-

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