Unable to use multiple ts config files

[SebastianStehle]

Expected Behaviour

I would like to have two different ts config files.

Actual Behaviour

I have a project with two somehow separate folders:

• The APP using React
• The SDK using Preact

I should probably create distinct repositories, but I thought that it makes my life easier for now, because the APP will be my first POC for the SDK. The SDK shows only little bit of HTML and uses Preact because of the small size, but I cannot get them to work in one webpack config.

I have two different entry points and tried to use two rules. But my understanding from the Readme is that it should not be needed:

config.entry = {
            'app': './src/app/index.tsx',
            'sdk': './src/sdk/index.tsx',
        };
    config.module.rules.push({
        test: /\.ts[x]?$/,
        use: [{
            loader: 'ts-loader',
            options: {
                context: root('src', 'app'),
                configFile: root('src', 'app', 'tsconfig.json')
            }
        }],
        include: root('src', 'app')
    });

    config.module.rules.push({
        test: /\.ts[x]?$/,
        use: [{
            loader: 'ts-loader',
            options: {
                context: root('src', 'sdk'),
                configFile: root('src', 'sdk', 'tsconfig.json')
            }
        }],
        include: root('src', 'sdk')
    });

Steps to Reproduce the Problem

I have created a minimum repository to reproduce the problem. It contains a little bit of extra packages which I have no removed.

https://github.com/SebastianStehle/tsloader-test

[appzuka]

I believe this is related to the issue solved in pull request #1104. Essentially, the loader only uses the options on the first instance. Options on the second instance are ignored. You can override this by specifying a name with the instance option:

    config.module.rules.push({
        test: /\.ts[x]?$/,
        use: [{
            loader: 'ts-loader',
            options: {
                instance: 'app',
                context: root('src', 'app'),
                configFile: root('src', 'app', 'tsconfig.json')
            }
        }],
        include: root('src', 'app')
    });

    config.module.rules.push({
        test: /\.ts[x]?$/,
        use: [{
            loader: 'ts-loader',
            options: {
                instance: 'sdk',
                context: root('src', 'sdk'),
                configFile: root('src', 'sdk', 'tsconfig.json')
            }
        }],
        include: root('src', 'sdk')
    });

With this change your minimal repo builds. It should be fixed without specifying this option explicitly when #1104 is merged.

[SebastianStehle]

For my particular use case I found an easier solution

/** @jsx h */
import { h } from 'preact';

https://www.typescriptlang.org/docs/handbook/jsx.html#factory-functions

[stale]

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]

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