reactjs - ماژول پیدا نشد: خطا: مسیر بسته ./dist/style.css از بسته صادر نشده است

من یک کتابخانه عمومی ساخته شده با ویته دارم، حالا میخواهم CSS را از کتابخانه عمومی وارد کنم:

import 'rd-component/dist/style.css';

اما وقتی پروژه را میسازم، خطا نشان میدهد:

ERROR in ./src/page/photo/gen/GenPhoto.tsx 18:0-37
Module not found: Error: Package path ./dist/style.css is not exported from package /Users/john/source/reddwarf/frontend/snap-web/node_modules/rd-component (see exports field in /Users/john/source/reddwarf/frontend/snap-web/node_modules/rd-component/package.json)

webpack compiled with 1 error and 1 warning
No issues found.

برای صادر کردن فایل CSS چه کاری باید انجام دهم؟ من اینطور امتحان کردهام:

plugins: [
    {
      name: 'extract-css', 
      generateBundle(_, bundle) {
        for (const fileName in bundle) {
          const chunk = bundle[fileName];

          if (fileName.endsWith('.js') && chunk.code.includes('import "./style.css";')) {
            const cssFileName = fileName.replace('.js', '.css');
            const css = chunk.code.match(/(?<=import ")[^"]+(?=";)/s)[0];

            fs.writeFileSync(`dist/${cssFileName}`, css, 'utf-8');

            chunk.code = chunk.code.replace(css, `./${cssFileName}`);
          }
        }
      },
    },
  ],

خطا نشان میدهد که chunk شامل ویژگی code نیست. چگونه میتوان CSS را از کتابخانه عمومی صادر کرد و بهطور موفقیتآمیز از پروژه فعلی وارد کرد؟ این node_modules کتابخانه عمومی است:

پاسخ شماره ۱

در نهایت، متوجه شدم که باید CSS را به این صورت در package.json صادر کنم:

"exports": {
        ".": {
            "import": "./dist/rd-component.es.js",
            "require": "./dist/rd-component.umd.js"
        },
        "./dist/style.css": {
            "import": "./dist/style.css",
            "require": "./dist/style.css"
        }
    },

اطلاعات بیشتر از اینجا: https://github.com/vitejs/vite/discussions/2657