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