Popular wisdom and guidance advise avoiding barrel files, but I am struggling to do so without using wild cards in tsconfig paths and package.json exports.
I have a monorepo that has a tsconfig-base.json
in the root, and I want my imports to look like
import { Link } from '@my/component-library/atoms/Link
I need to add an entry into the paths
array in the tsconfig-base.json
for EVERY directory that I want to resolve without a barrel file:
"paths": {
"@my/component-library/atoms/Link": [
"./packages/component-library/src/atoms/Link"
],
"@my/component-library/atoms/LinkButton": [
"./packages/component-library/src/atoms/LinkButton"
],
I tried the code below, but it did not work. I got could not find module
errors without adding an entry for EVERY directory that I want to import.
"paths": {
"@my/component-library/atoms/*": [
"./packages/component-library/src/atoms/*"
],
The same goes for package.json exports. I need to add an entry for every directory I want to import in @my/component-library/package.json
"exports": {
".": {
"types": "./dist/esm/index.d.ts",
"import": "./dist/esm/index.js"
},
"./atoms/Link": {
"import": "./dist/esm/atoms/Link/Link.js",
"types": "./dist/esm/atoms/Link/Link.d.ts"
},
"./atoms/LinkButton": {
"import": "./dist/esm/atoms/LinkButton/index.js",
"types": "./dist/esm/atoms/LinkButton/index.d.ts"
},
I tried the code below, but it did not work:
"exports": {
".": {
"types": "./dist/esm/index.d.ts",
"import": "./dist/esm/index.js"
},
"./atoms/*": {
"import": "./dist/esm/atoms/**/*.js",
"types": "./dist/esm/atoms/**/*.d.ts"
},
This is not sustainable if I have 80+ components or directories.
Is there a better way of doing this? Can this be done with wildcards?