I am facing an issue with importing CSS from a public library built with Vite. When I try to import the CSS using:
import 'rd-component/dist/style.css';
I encounter an error during the project build process:
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.
I have tried to address this by modifying the plugins configuration as follows:
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}`);
}
}
},
},
],
However, I receive an error stating that the chunk does not contain a code attribute. How can I successfully export and import the CSS from the public library into my current project? Here is the node_modules structure of the public library: