Awesome 👍

First question: pnp-webpack-plugin vs ts-pnp

The PnP docs point you here: https://github.com/arcanis/pnp-webpack-plugin#ts-loader-integration

Which suggests you should use the pnp-webpack-plugin to marry ts-loader and PnP:

const PnpWebpackPlugin = require(`pnp-webpack-plugin`);

module.exports = {
  module: {
    rules: [{
      test: /\.ts$/,
      loader: require.resolve('ts-loader'),
      options: PnpWebpackPlugin.tsLoaderOptions(),
    }],
  },
};

In fact ts-pnp itself suggests:

Note that ts-pnp is a low-level package - you shouldn't have to use it unless you're writing a TS compiler host. If you just want to write TypeScript and have it Just Work™, take a look at pnp-webpack-plugin instead.

So it looks like we should be using pnp-webpack-plugin and not ts-pnp.

That being the case, It looks like a tweak may be required here:

https://github.com/arcanis/pnp-webpack-plugin/blob/b09fbdc2a9f16dc3837454b8d367963b1a30655f/index.js#L140

module.exports.tsLoaderOptions = (options = {}) => pnp ? Object.assign({}, options, {
  resolveModuleName: require('ts-pnp').resolveModuleName,
}) : options;

To add in resolveTypeReferenceDirective to this. (Once it exists in ts-loader)

Does that sound right?

Also, I'm guessing using tsLoaderOptions is mandatory if you want to use ts-loader with PnP as it's this that supplies resolveModuleName to ts-loader.

Otherwise you would have to manually supply this option to ts-loader like so:

  resolveModuleName: require('ts-pnp').resolveModuleName,

Do I have this about right?

Does that sound right?

Yep - although my warning in ts-pnp is maybe a bit too strong in that as you can see there isn't much boilerplate needed to integrate ts-pnp with ts-loader without going through pnp-webpack-plugin (ts-pnp isn't a "private api" and will respect semver, so it's safe to use it directly).

The wording is mostly intended for average users, which don't really care much about the setup of TS and PnP and just want something that work out of the box. In their case they can just use pnp-webpack-plugin which will take care of this through a simplified API.

Hey @arcanis,

I've implemented what I think makes sense based on our conversation. Do you want to take a quick glance and let me know if I'm headed roughly in the right direction? There's a bit of noise in the servicesHost.ts module but hopefully otherwise it makes sense...