Ts-loader: webpack with project references: ERROR TS6059: xxx is not under 'rootDir'

[gytisgreitai]

Trying to migrate our multiple typescript projects to monorepo by using project references. Everything seems to be fine, but in one project when running through ts-loader (5.3.3) I get this strange error:

ERROR in /Users/gytis/work/front/portal/tsconfig.json
[tsl] ERROR
      TS6059: File '/Users/gytis/work/front/icons/src/FaIcon.tsx' is not under 'rootDir' '/Users/gytis/work/front/portal/app'. 'rootDir' is expected to contain all source files.

If I simply do run tsc -b tsconfig.json on the same project - all ok, no errors. I've tried looking at output with traceDependencies, but it does seem ok to me:

======== Resolving module './FaIcon' from '/Users/gytis/work/front/icons/dist/index.d.ts'. ========
Module resolution kind is not specified, using 'NodeJs'.
Loading module as file / folder, candidate module location '/Users/gytis/work/front/icons/dist/FaIcon', target file type 'TypeScript'.
File '/Users/gytis/work/front/icons/dist/FaIcon.ts' does not exist.
File '/Users/gytis/work/front/icons/dist/FaIcon.tsx' does not exist.
File '/Users/gytis/work/front/icons/dist/FaIcon.d.ts' exist - use it as a name resolution result.
======== Module name './FaIcon' was successfully resolved to '/Users/gytis/work/front/icons/dist/FaIcon.d.ts'. ========

tsconfig.json is pretty simple:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "declaration": false,
    "allowSyntheticDefaultImports": true,
    "jsx": "react",
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "strictNullChecks": false,
    "alwaysStrict": false,
    "rootDir": "app",
    "outDir": "dist"
  },
  "exclude": [
      "server", "dist"
  ],
  "references": [
    { "path": "../itinerary-view/" },
    { "path": "../grid/" },
    { "path": "../header/" },
    { "path": "../form/" },
    { "path": "../icons/" },
    { "path": "../item-card/" },
    { "path": "../commons/" },
  ]
}

Webpack ts-loader entry also is ordinary:

 { test: /\.tsx?$/, loader: 'ts-loader', options: {
        configFile:  path.resolve(__dirname, "tsconfig.json")
        }
      } 

Any hints how I could troubleshoot this?

[johnnyreilly]

I haven't been using project references myself I'm afraid - possibly @andrewbranch may be able to advise?

[andrewbranch]

Hmm, it looks like ts-loader isn't recognizing that front/icons is a project reference. Is there anything different about that composite project's structure or configuration? Honestly the only way I could troubleshoot something like this is by debugging, setting breakpoints in ts-loader itself. If you can share your repo, or a repo that reproduces the same problem, I can help with that. If you want to try it yourself, you can do so like this:

1. instead of running webpack {arguments}, run node --inspect-brk node_modules/webpack/bin/webpack.js {arguments}
2. use your favorite debugger (e.g. VS Code, ndb) to connect to the paused node process you just started
3. set a breakpoint in node_modules/ts-loader/dist/index.js on the equivalent of this line. The line numbers will be different since this is transpiled JS, but it should be quite readable. https://github.com/TypeStrong/ts-loader/blob/c1f3c4e69975497692e362cf8ef97e5be9840ff6/src/index.ts#L74

You can use a conditional breakpoint or continue until filePath refers to something in front/icons. Then step in and you should be able to narrow down why getAndCacheProjectReference seems to be returning undefined.

[tylerjwatson]

I get this as well. Is there anything I can help with or has OP done the debugging work already?

[gytisgreitai]

Ah, forgot about this. First i've just done a quick hack by moving tsconfig.json into rootDir (app in this case) and removing rootDir definition.

And after that if I remember correctly we ran into unrelated issue because of invalid imports paths, e.g. if we take project dependency tree like this:

| -- @front/icons
| -- @front/form
      | --- @front/icons

portal which uses ts-loader and has a depency on libraries @front/icons and @front/form was failing with error above about @front/icons. The actual problem was in another dependency @front/form (which also depends on @front/icons) - import in@front/form` done incorrectly:

Import { FaIcon } from '../../icons/src/FaIcon';

Changing that to

import { FaIcon } from '@front/icons';

seems to have solved the problem with original tsconfig.json placement

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

Closing as stale. Please reopen if you'd like to work on this further.

[johnnyreilly]

@andrewbranch should we keep this open do you think?

[andrewbranch]

I'm not particularly invested in this one but if @tylerjwatson or anyone else is still experiencing it and can provide a repro, we can reopen

[johnnyreilly]

Closed is fine then - thanks!

[Acidic9]

My solution:

Delete rootDir config from tsconfig.json.

[tslater]

@andrewbranch. I am having this issue. I tried to follow your debugging steps, but I cannot find "getAndCacheProjectReference." Perhaps the codebase has changed? Any updates as to where to took if the references are loading or not? I'm dizzy in the source right now.

[0xdeafcafe]

I'm also running into this issue sadly. I don't want to remove rootDir, and as I'm using electron-webpack, I don't think I'm going to have much luck attaching a debugger.

[0xdeafcafe]

So after almost 2 hours of fucking around with this, I think I've solved it (at least for anyone using electron-webpack...). If you are using said package and you're using typescript they kindly have a package you can add called electron-webpack-ts which adds the ts-loader in for you, so kind! They also allow you to specify the key webpackConfig in the electron-webpack.json file to do manual overrides of the config, again so kind!

The issue is, the ts addon is loaded in _after_ that file is run, causing any overrides you make to be overriden, which is not so kind. The way I got round it was by ditching electron-webpack-ts entirely, and just importing it myself in the override file, like so;

/* eslint-disable no-param-reassign, @typescript-eslint/no-var-requires */

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

module.exports = {
    target: 'electron-main',
    resolve: {
        extensions: ['.ts'],
        plugins: [
            new TsconfigPathsPlugin(),
        ],
    },
    module: {
        rules: [{
            test: /\.ts$/,
            loader: 'ts-loader',
            options: {
                projectReferences: true,
            },
        }],
    },
};

They also supply 3 other items into the options for you, namely transpileOnly, appendTsSuffixTo, and configFile. I've elected to ignore all three here as I don't think they really make sense for my use case, but they may for you so add them back if you wish.

It's times like this I wish I'd never gotten into this god forsaken job.

[johnnyreilly]

Thanks for sharing your findings @0xdeafcafe

It's times like this I wish I'd never gotten into this god forsaken job.

I am sorry for your pain.

Also, hello fellow Londoner!