The "paths" parameter in Typescript's tsconfig.json cannot be located, even if the baseUrl is specified

Question

The "paths" parameter in Typescript's tsconfig.json cannot be located, even if the baseUrl is specified

I'm currently working on an Ionic 7 Vue project in Typescript. One of the challenges I'm facing is creating an alias for shared interfaces using paths in the tsconfig.json file, but the added path doesn't seem to resolve. Below is a snippet of my tsconfig.json setup:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "types": ["webpack-env", "jest", "google.maps", "cypress"],
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],//  <-------------------------------- This alias resolves fine.
      "@shared/*": ["../server/src/*/shared/index.ts"] // <- This one doesn't.
      // "@shared/*": ["../server/src/*/shared"] // <------- This also doesn't work (same error).
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
    // mp035 added
    "strictPropertyInitialization": false
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx",
    "../server/src/**/shared/*.ts" // <----------------- these files are found fine.
  ],
  "exclude": ["node_modules"]
}

During the build process, I encounter the following error:

Module not found: Error: Can't resolve '@shared/bookings' in '/XXXXXX/XXXXX/app/src/views/customer'

I would appreciate any insights or suggestions on what might be causing this issue.

typescript ionic-framework vuejs3

Answer 1

Answer №1

After extensive research and investigation, it became apparent that in addition to configuring webpack as suggested by @Yu-Miao, I needed to ensure that the paths were respected. I opted to utilize the tsconfig-paths-webpack-plugin, following the guidance provided at

To implement this solution, I first installed the plugin using the command:

npm install --save-dev tsconfig-paths-webpack-plugin

Subsequently, I created a vue.config.js file at the root of my project with the following configuration:

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
    configureWebpack: {
        resolve: {
            plugins: [new TsconfigPathsPlugin({extensions:['.ts', '.tsx', '.vue']})]
        }
    }
}

For those who prefer not to use a plugin, an alternative approach could involve restructuring the source files to simplify the tsconfig path, e.g.,

"@shared/*" : "../server/src/shared/*"

. This would allow for a manual entry in vue.config.js like so:

const path = require('path');

module.exports = {
    configureWebpack: {
        resolve: {
            alias:{
                "@": path.resolve(__dirname, "src"),
                "@shared": path.resolve(__dirname, "../server/src/shared"),
            },
        }
    }
}

In my case, I find the DRY (Don't Repeat Yourself) option provided by the plugin to be more preferable.

Answer 2

After extensive research and investigation, it became apparent that in addition to configuring webpack as suggested by @Yu-Miao, I needed to ensure that the paths were respected. I opted to utilize the tsconfig-paths-webpack-plugin, following the guidance provided at

To implement this solution, I first installed the plugin using the command:

npm install --save-dev tsconfig-paths-webpack-plugin

Subsequently, I created a vue.config.js file at the root of my project with the following configuration:

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
    configureWebpack: {
        resolve: {
            plugins: [new TsconfigPathsPlugin({extensions:['.ts', '.tsx', '.vue']})]
        }
    }
}

For those who prefer not to use a plugin, an alternative approach could involve restructuring the source files to simplify the tsconfig path, e.g.,

"@shared/*" : "../server/src/shared/*"

. This would allow for a manual entry in vue.config.js like so:

const path = require('path');

module.exports = {
    configureWebpack: {
        resolve: {
            alias:{
                "@": path.resolve(__dirname, "src"),
                "@shared": path.resolve(__dirname, "../server/src/shared"),
            },
        }
    }
}

In my case, I find the DRY (Don't Repeat Yourself) option provided by the plugin to be more preferable.

The "paths" parameter in Typescript's tsconfig.json cannot be located, even if the baseUrl is specified

Answer №1

Similar questions

Encountered a problem during the installation of the Ionic framework

The date in a nodejs application appears to be shifted by one day

Passing an array from a parent component to a child component in Angular

What advantages do interfaces as data types offer in Angular compared to using classes?

Using Typescript to read data from a file and returning an object that is undefined

Receiving data from a service in Angular 2 with rxjs subscribe throws an error: it is not a

Troubleshooting problems with loading data while implementing an iOS infinite scroll feature in Ionic 3

The name "Identifier" has already been declared before

Encountering an issue with the UNION operator in Typescript causes an error

"Two distinct routes in Angular, but keeping the same menu item highlighted as

Passing references through multiple tiers [Typescript / React]

Is this Firebase regulation accurate and suitable for PUT and GET requests in an Angular and Firebase environment?

What is the best way to adjust and filter an array based on a single value?

Ionic: Automatically empty input field upon page rendering

What is the functionality of "classnames" in cases where there are multiple classes sharing the same name?

Can someone guide me on leveraging TypeScript typing details provided by a Node.js package?

Retrieve the initial item from every sub-array within a master array

Having difficulty transmitting data through SocketIO in NodeJS

Assign a class to an Angular component's host element without any conditions

Using Angular to dynamically access component properties