javascript - npm-paket med @emotion/react med vite fungerar inte som förväntat
Efter att ha publicerat npm-paketet går beroendet @emotion/react fel. Jag har använt vite för paketering.
Efter att ha installerat paketet till ett annat projekt visas css-egenskapen som - css="[object Object]. Men det borde konverteras till ett class-attribut i HTML.
vite.config.tsexport default defineConfig({
plugins: [
react({
jsxRuntime: 'classic',
jsxImportSource: '@emotion/react',
babel: {
plugins: ['@emotion/babel-plugin'],
},
}),
]
});
Efter att ha installerat biblioteket och använt det i ett React-projekt visas det som -
<div css="[object Object]">
<div role="button" css="[object Object]" tabindex="-1">
</div>
</div>;
Men css-attributet bör vara class-attributet.
Så, hur använder man @emotion/react i ett React-biblioteksprojekt med vite?
Svar #1
Hittade problemet. Jag har ändrat jsxRuntime från classic till automatic, vilket löser problemet. Så konfigurationen är-
export default defineConfig({
plugins: [
react({
jsxRuntime: 'automatic', // <---
jsxImportSource: '@emotion/react',
babel: {
plugins: ['@emotion/babel-plugin'],
},
}),
]
});
