I develop a library of packages with a complex TypeScript + Webpack setup. When I build some packages, they are correctly built into a dist folder. For example this one:
You see index.js alongside index.d.ts as expected.
But for some other packages, despite using the same configuration, I end up with a totally different result. The dist folder is structured into packages, one with the name of a package I depend on (@vulcanjs/graphql), one with the name of the current package (@vulcanjs/mongo)
I don't have a minimal reproduction, but the code is open source: https://github.com/VulcanJS/vulcan-npm.
The issue is that then, when importing from this @vulcanjs/mongo, I can't get the typings because index.d.ts is living in a nested folder while it should be at the root. Also I am not sure the graphql folder should be there either, since those typings are coming from a different package (@vulcanjs/graphql).
Each package configuration is extending the root configurations, both for Webpack and TypeScript.
I suspect my Webpack config to be wrong, I use the externals configuration, but I don't fully master it:
module.exports = {
devtool: "inline-source-map",
mode: "production",
output: {
libraryTarget: "commonjs2",
filename: "index.js",
},
// This prevent bundling node_modules into the app
// additionalModuleDirs allow handling root and nested node_modules
// @see https://stackoverflow.com/questions/46010926/how-to-use-webpack-with-a-monorepo-yarnpkg-workspaces
externals: [
nodeExternals({
additionalModuleDirs: [path.resolve(__dirname, "../node_modules")],
}),
],
// ...rest of the code, that simply configure babel and ts-loader
Where should I start to debug this issue?