جاوااسکریپت - پکیج npm با @emotion/react با vite همانطور که انتظار میرفت کار نمیکند

پس از انتشار بسته npm وابستگی @emotion/react خراب میشود. من از vite برای بستهبندی استفاده کردهام.

بعد از نصب بسته در پروژهای دیگر، ویژگی css مانند - css="[object Object] نمایش داده میشود. اما باید به یک ویژگی class در HTML تبدیل شود.

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 استفاده کنیم؟

پاسخ شماره ۱

مشکل پیدا شد. تغییر jsxRuntime از classic به automatic مشکل را حل میکند. بنابراین تنظیمات این است-

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