I create Typescript react UI kit (like bootstrap) for team. We decide that we publish private package.
the problem is that the .d.ts files after build have absolute path, so type information is not found after build
//tsconfigs.json
{
"compilerOptions": {
// ...
"declaration": true,
"declarationMap": true,
"sourceMap": true,
"outDir": "./lib",
"downlevelIteration": true,
"isolatedModules": true,
"strict": true,
"moduleResolution": "node",
"baseUrl": "./",
"paths": {
"@/*": ["packages/*"]
},
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["./packages", "./stories"]
}
//webpack.config.js
//...
module.exports = (env) => {
return {
devtool: 'inline-source-map',
entry: './packages/index.tsx',
resolve: {
extensions: ['.ts', '.tsx', '.js', '.svg', '.scss', '.ttf'],
alias: {
'@': path.resolve(__dirname, 'packages')
}
},
output: {
path: path.join(__dirname, 'lib'),
filename: 'index.js',
library: '@example/example',
libraryTarget: 'umd'
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /lib/,
options: {
onlyCompileBundledFiles: true
}
}
// ...
]
},
externals: {
react: 'react',
reactDOM: 'react-dom'
}
// ...
};
};
How can I use relative paths after webpack build?