I am publishing a react library which is written in typescript. And it is transpiled into
Javascript in the build. Inside typescript I am using baseUrl in tsconfig.json and referring absolute path as follows
import CollabsibleMenu from 'components/collapsibleMenu';
It works well inside typescript but after I build it and try to use the package in another project it throws error
error - ./node_modules/aaarc-react/dist/components/verticalMenu/index.js:7:0
Module not found: Can't resolve 'components/collapsibleMenu'
This is my tsconfig.json
{
"compilerOptions": {
"baseUrl": "./src",
"esModuleInterop": true,
"declaration": true,
"importHelpers": true,
"module": "commonjs",
"outDir": "dist",
"lib": ["ES5", "ES2015", "ES2016", "DOM", "ESNext"],
"rootDirs": [
"./src"
],
"allowSyntheticDefaultImports": true,
"jsx": "react-jsx",
"skipLibCheck": true,
"types": ["node"],
"moduleResolution": "node",
"noImplicitAny": true,
"noUnusedLocals": true,
"sourceMap": true,
"strict": true,
"target": "es6",
"noEmit": false
},
"include": ["src/**/*.ts", "src/**/*.tsx"]
}
And this is my package.json
{
"name": "aaarc-react",
"version": "0.1.0",
"private": true,
"module": "dist/index.js",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"files": [
"dist"
],
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.11.39",
"@types/react": "^18.0.12",
"@types/react-dom": "^18.0.5",
"date-fns": "^2.28.0",
"grommet": "^2.24.0",
"grommet-icons": "^4.7.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-scripts": "5.0.1",
"styled-components": "^5.3.5",
"typescript": "^4.7.3",
"web-vitals": "^2.1.4"
},
"peerDependencies": {
"react": "^18.1.0",
"react-dom": "^18.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "rm -rf dist/ && tsc && cp tsconfig.json dist/jsconfig.json",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/styled-components": "^5.1.25"
}
}
Thank you!!!
