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