Typescript Can't resolve custom paths imports

Question

I'm working on a PHP project using Typescript and I'm trying to follow the same pattern for monorepo, similar to what NX does. I'm having issues when trying to compile typescript for each apps.

This is my current structure:

.
├── apps/
│   ├── project-a/
│   ├── project-b/
│   └── project-c/
│       └── src/
│           ├── sass
│           └── ts/
│               ├── components/
│               └── index.ts
├── libs/
│   └── typescript/
│       ├── interface/
│       ├── abstract/
│       │   └── base.ts
│       └── components/
│           ├── header.ts
│           └── footer.ts
├── webpack/
│   └── dev.js
└── tsconfig.json

This is my tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "esModuleInterop": true,
    "module": "AMD",
    "moduleResolution": "node",
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "ESNext",
    "outDir": "dist",
    "paths": {
      "@libs/abstract": ["libs/typescript/abstract"],
      "@libs/interface": ["libs/typescript/interface"],
      "@libs/components": ["libs/typescript/components"],
    }
  }
}

And the error I'm getting is this:

Module not found: Error: Can't resolve '@libs/components' in '**\apps\project-c\src\ts';

Field 'browser' doesn't contain a valid alias configuration resolve as module.

**\apps\project-c\src\ts\node_modules doesn't exist or is not a directory

Basically I need to have basic functionality that is going to be used by all apps from the libs folder, but when I try to compile the project, I'm getting that error.

My webpack script is running with arguments to define and locate the app that needs to be compiled, for example:

yarn dev --theme=project-c

Which is going to build the path structure to the proper project. If I remove any imports from the libs, it's compiling as expected, but as soon as I try to import, for example, the Header component, it fails.

I imagine it must be something with my tsconfig.json settings, but none of the fixes I tried worked. Even tried to "copy" from an official NX monorepo settings, but still nothing.

@starball thanks. This question helped me find a way to fix the issue. — celsomtrindade, Aug 21 '23 at 13:06

score 0 · Answer 1 · answered Aug 21 '23 at 13:06

For anyone with a similar problem, I was able to find a fix, thanks to @starball comment and a little bit more research with the info found on that question.

Basically I had to add a couple more configs to webpack in order to make it work. Check the following adjustments necessary.

module.exports = () => ({
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.ts$/,
        use: 'ts-loader',
        include: [path.resolve(__dirname, '../libs/typescript')]
      },
      // ...
    ]
  },
  resolve: {
    extensions: ['.ts', '.js'],
    alias: {
      '@libs/abstract': path.resolve(__dirname, '../libs/typescript/abstract'),
      '@libs/interface': path.resolve(__dirname, '../libs/typescript/interface'),
      '@libs/components': path.resolve(__dirname, '../libs/typescript/components'),
    }
  },
});

On webpack I had to add a resolve property, with the same alias as defined in tsconfig.json (this one only make the IDE works, not the compiler). And also a new rules, to include the generic path for all libs typescript files.

Typescript Can't resolve custom paths imports

1 Answers1