Absolute imports corrupt declaration files (.d.ts) in npm package

76 Views Asked by At

I have an npm package of react components .

I am using Typescript + webpack + babel.

I am using Absolute paths for imports in my components.

    "baseUrl": "./",
    "paths": {
      "src/*": ["./src/*"]
    }

  • in Webpack config, I am using ts-loader before babel-loader to emit declaration files when building.

The problem is: when emitting declaration files, imports remain as it is in the form of absolute paths which cannot be resolved when using the package.

Is there any way to transform absolute paths back to relative paths before emitting declaration files (.d.ts) ?

part of my package.json to elaborate versions:

 "devDependencies": {
    "@babel/cli": "^7.20.7",
    "@babel/core": "^7.20.12",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.18.6",
    "babel-loader": "^9.1.2",
    "babel-plugin-module-resolver": "^5.0.0",
    "ts-loader": "^9.4.2",
    "tsconfig-paths-webpack-plugin": "^4.0.0",
    "typescript": "^4.9.5",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
},
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
  },

I tried babel-module-resolver-plugin.

But didn't work for me.

I also tried TsconfigPathsPlugin but not sure If it is related or not.

0

There are 0 best solutions below