I am in the process of creating a personalized component library using my own components. However, I am encountering difficulties in the final stage of constructing the library using rollup.
The current structure of my folders is as follows:
├── src
│ ├── components
| │ ├── Text
| | │ ├── Text.tsx
| | │ ├── styles.css
| | │ └── index.ts
| │ └── index.ts
│ ├── molecules
| │ ├── Button
| | │ ├── Button.tsx
| | │ ├── styles.css
| | │ └── index.ts
| │ └── index.ts
│ └── index.ts
├── styles
│ └── general.ts
│ └── index.ts
├── package.json
└── package-lock.json
Inside the <Button /> component, I am utilizing the <Text /> component with
import Text from '/atoms/Text/Text.tsx'
This setup is working fine. Nevertheless, when I attempt to build the component library with rollup, I am confronted with the following error message:
(!) Unresolved dependencies atmos/base-text/Text.tsx (imported by "dist/esm/types/molecules/Button.d.ts")
Here is my tsconfig.js:
{
"compilerOptions":{
"target":"es2016",
"jsx":"react",
"module":"ESNext",
"moduleResolution":"node",
"declaration":true,
"emitDeclarationOnly":true,
"sourceMap":true,
"outDir":"dist",
"declarationDir":"types",
"allowSyntheticDefaultImports":true,
"esModuleInterop":true,
"forceConsistentCasingInFileNames":true,
"strict":true,
"skipDefaultLibCheck":true,
"skipLibCheck":true,
"allowImportingTsExtensions": true,
"baseUrl":"src",
"rootDir": "src",
"paths":{
"atoms/*":[
"atoms/*"
],
"molecules/*":[
"molecules/*"
],
"styles/*":[
"styles/*"
],
}
}
}
And this is my rollup.config.mjs:
import resolve, {nodeResolve} from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import {terser} from 'rollup-plugin-terser';
import external from 'rollup-plugin-peer-deps-external'
import postcss from 'rollup-plugin-postcss'
import dts from "rollup-plugin-dts";
export default [
{
input: "src/index.ts",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true,
name: 'ui-components'
},
{
file: packageJson.module,
format: "esm",
sourcemap: true,
},
],
plugins: [
resolve(),
commonjs(),
external(),
postcss(),
terser(),
nodeResolve(),
typescript({tsconfig: "./tsconfig.json"}),
],
},
{
input: "dist/esm/types/index.d.ts",
output: [{ file: "dist/index.d.ts", format: "esm" }],
external: [/\.css$/],
plugins: [dts.default()],
},
];
Could you please assist me in understanding why I am unable to import my own components?