I am currently working with a tsconfig.json configuration for a package that is utilized by other packages, which we will refer to as packageA:
{
"compilerOptions": {
"baseUrl": ".",
"checkJs": false,
"declaration": true,
"downlevelIteration": true,
"esModuleInterop": true,
"outDir": "./dist",
"rootDir": "./src",
"module": "commonjs",
"moduleResolution": "node",
"target": "es5"
},
"include": [
"src/**/*.ts",
"src/**/*.tsx"
],
"exclude": [
"./tests",
"./dist",
"src/**/*.test.ts",
"src/**/*.test.tsx"
]
}
packageA contains non-relative paths, such as:
import { T } from 'src/components/Translations';During transpilation using tsc, this path is converted to:
var Translations_1 = require("src/components/Translations")An issue arises when compiling another package (packageB) using webpack that depends on packageA
In packageA's package.json, I have specified the main file like this:
"main": "dist/index.js",
"types": "dist/index.d.ts"
The index.ts of packageA contains exports like this:
export * from 'src/selectors/ui';which transpiles to:
__exportStar(require('src/selectors/ui'), exports);When compiling packageB, that has packageA as a dependency.
import { selector } from 'packageAThis results in loading
node_modules/packageA/dist/index.jsThe error emitted by ts-loader is:
`Cannot find module: 'src/selectors/ui'.
The issue lies in the fact that the transpiled code from packageA looks like this:
__exportStar(require('src/selectors/ui'), exports);However, the structure of the dist folder is different:
|
ui
|
translations
The src directory does not exist within the dist directory defined by the outDir in tsconfig.json
I attempted adding an alias in webpack as follows:
alias: {
'webpack/hot/poll': require.resolve('webpack/hot/poll'),
src: 'dist',
},
While this resolves the issue for packageA, it breaks the resolution for packageB which also has non-relative imports like:
import { App } from 'src/containers'The problem here is that src is mapped to dist for every import, causing conflicts as seen in the webpack output:
aliased with mapping 'src': 'dist' to 'dist/containers/App'Consequently, the error received is:
Cannot find module: 'src/containers/App'
Is there a way to map src to dist only for specific modules and not all imports?
All functionalities work seamlessly if packageA utilizes relative paths.