Help Please: ts-loader not working with two entry points in webpack.config.json

[quanzhuo]

Description

I have a vscode extension project. The project contains two complete separate apps, one for language client, the other for language server. The project structure is as follows:

├── client
│   ├── package.json
│   ├── package-lock.json
│   ├── src
│   │   ├── extension.ts
│   │   └── logging.ts
│   └── tsconfig.json
├── package.json
├── package-lock.json
├── server
│   ├── package.json
│   ├── package-lock.json
│   ├── src
│   │   ├── server.ts
│   │   └── utils.ts
│   └── tsconfig.json
├── tsconfig.base.json
├── tsconfig.json
└── webpack.config.js

The project is structured using tsc project reference. I want webpack to bundle my project into two separate js file: client.js and server.js so I add two entries in webpack config file. but ts-loader output an error:

ERROR in /home/quan/repos/cmake-intellisence/client/tsconfig.json
/home/quan/repos/cmake-intellisence/client/tsconfig.json
[tsl] ERROR
      TS6059: File '/home/quan/repos/cmake-intellisence/server/src/server.ts' is not under 'rootDir' '/home/quan/repos/cmake-intellisence/client/src'. 'rootDir' is expected to contain all source files.
  The file is in the program because:
    Root file specified for compilation

NOTE: If I put only one entry in entry field, (either client or server), everything is fine

my webpack.config.js file content:

'use strict';

const path = require('path');
const webpack = require('webpack');

/**@type {import('webpack').Configuration}*/
const config = {
    target: 'node', // vscode extensions run in webworker context for VS Code web 📖 -> https://webpack.js.org/configuration/target/#target

    entry: {
        client: './client/src/extension.ts',
        server: './server/src/server.ts'
    }, // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
    // entry: "./server/src/server.ts",
    // entry: "./client/src/extension.ts",
    output: {
        // the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        libraryTarget: 'commonjs2',
        devtoolModuleFilenameTemplate: '../[resource-path]'
    },
    devtool: 'source-map',
    externals: {
        vscode: 'commonjs vscode' // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, 📖 -> https://webpack.js.org/configuration/externals/
    },
    resolve: {
        // support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader
        mainFields: ['browser', 'module', 'main'], // look for `browser` entry point in imported node modules
        extensions: ['.ts', '.js'],
        alias: {
            // provides alternate implementation for node module and source files
        },
        fallback: {
            // Webpack 5 no longer polyfills Node.js core modules automatically.
            // see https://webpack.js.org/configuration/resolve/#resolvefallback
            // for the list of Node.js core module polyfills.
        }
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'ts-loader',
                        options: {
                            "projectReferences": true
                        }
                    }
                ]
            }
        ]
    }
};
module.exports = config;

the root tsconfig.json file:

{
    "include": [],
    "references": [
        { "path": "./client" },
        { "path": "./server" }
    ]
}

tsconfig.base.json:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es2020",
        "lib": [
            "es2020"
        ],
        "sourceMap": true,
        "composite": true
    }
}

client/tsconfig.json

{
    "extends": "../tsconfig.base.json",
    "compilerOptions": {
        "outDir": "out",
        "rootDir": "src",
    },
    "include": [
        "src"
    ]
}

server/tsconfig.json

{
    "extends": "../tsconfig.base.json",
    "compilerOptions": {
        "outDir": "out",
        "rootDir": "src",
        "resolveJsonModule": true
    },
    "include": [
        "src"
    ]
}

Any suggestion appreciated.

[AsafMah]

@quanzhuo I have the same issue, any luck?

[quanzhuo]

@quanzhuo I have the same issue, any luck?

My workaround: use two webpack config files: webpack.config.client.js and webpack.config.server.js
Install concurrently npm package as a dev-dependency, and add following scripts in package.json

"develop": "concurrently  \"npm run dev-client\" \"npm run dev-server\"",
"dev-client": "webpack --mode development --watch --config webpack.config.client.js",
"dev-server": "webpack --mode development --watch --config webpack.config.server.js",