Currently, I am in the process of building a component library using react js, vite tailwindcss, and antd. The components function flawlessly when running the project locally or within Storybook. However, upon importing them into another nextjs application, the components lose their styling. Below is the configuration from my package.json:
Package.json
"type": "module",
"main": "dist/index.umd.js",
"module": "dist/index.es.js",
"types": "dist/index.d.ts",
"exports": {
".": {
"import": "./dist/index.es.js",
"require": "./dist/index.umd.js",
"types": "./dist/index.d.ts"
},
"./dist/style.css": "./dist/style.css"
},
"files": [
"/dist",
"/src"
],
vite.config.js
import react from '@vitejs/plugin-react';
import path from 'node:path';
import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';
// https://vitejs.dev/config/
export default defineConfig({
build: {
lib: {
entry: path.resolve(__dirname, 'src/index.ts'),
name: 'lw-ds',
fileName: (format) => `index.${format}.js`,
},
rollupOptions: {
external: ['react', 'react-dom'],
output: {
globals: {
react: 'React',
'react-dom': 'ReactDOM',
},
},
},
sourcemap: true,
emptyOutDir: true,
},
plugins: [
react(),
dts({
insertTypesEntry: true,
}),
],
});
If you want to see the structure in node_modules after importing it into another application.
I have attempted multiple solutions to resolve this issue. One workaround that seemed to work was creating a components folder within the application and copying the library files there. Even if directly importing from the library, the styling now functions correctly.