ts-loader seems not to load modules from node_modules, but awesome-typescript-loader does

[laland]

Hello! I eventullay discovered that ts loader won't load modules from node_modules for some reason. For example, i have some entry file, like this, and tere is @somespace/foo/index.ts file:

// index.ts
import {Foo} from "@somespace/foo"

I enableTypeScriptLoader and all my in-project ts is ok. But when trying to import some ts stuff from node_modules it says:

Error loading ./node_modules/@somespace/foo/index.ts

FIX  To process TypeScript files:
        1. Add Encore.enableTypeScriptLoader() to your webpack.config.js file.

When i replaced built-in ts-loader with awesome-typescript-loader, the problem has gone, and everthing has compiled well.

So, why webpack-encore uses ts-loader, and not awesome-typescript-loader?

[Lyrkan]

Hi @laland,

I would guess that the issue isn't actually related to ts-loader, but to the exclusion of node_modules when the loader is added:

https://github.com/symfony/webpack-encore/blob/799720602aab2069f827704e4a6d672d03d38d76/lib/config-generator.js#L196-L200

I'm not sure that we should remove that line... in almost all cases libraries are published on npm as compiled JS files (with the related .d.ts files) and the loader isn't needed for them.

[laland]

May be some configuration option can be introduced? `cause we have lots of internal packages in our organization, written in pure typescript, that are consumed and compiled by some end-projects, and there is no need to pre-build those packages.

[wombat86]

@laland I wonder if you have resolved this issue. I'm facing pretty much the same issue too.

[laland]

@wombat86 FYI, my current workaround is pretty straightforward:

let config = Encore.getWebpackConfig();

let tsLoader = config.module.rules.filter(rule => {
  return Array.isArray(rule.use) && rule.use.some(use => use.loader === 'ts-loader')
})[0];
delete tsLoader.exclude;

module.exports = config;

This one is for encore with weback 4

[GwendolenLynch]

FWIW, I've hit this too and @laland's workaround does resolve it.

I'm happy to PR something (if @laland doesn't want to), but what would the maintainers prefer wrt approach?

[Lyrkan]

Maybe we could add a second parameter to Encore.enableTypeScriptLoader() to change the exclude rule or include some node_modules the same way Encore.configureBabel() works?

Encore.enableTypeScriptLoader(options => {
  // Loader-specific options
  // (...)
}, {
  // Directly change the exclude rule
  exclude: /foo/,

  // Or include *some* modules
  includeNodeModules: ['foo', 'bar'],
});

Note that in the meantime you can use Encore.configureLoaderRule() as a cleaner workaround:

Encore.configureLoaderRule('typescript', rule => {
  delete rule.exclude;
});

[laland]

@Lyrkan

Maybe we could add a second parameter to Encore.enableTypeScriptLoader()

Oh, would be great! )

Note that in the meantime you can use Encore.configureLoaderRule() as a cleaner workaround

Awesome, looks like i overlooked that in docs, thank you! I`ll stick to it for a while.

[GwendolenLynch]

Note that in the meantime you can use Encore.configureLoaderRule() as a cleaner workaround:

Oh wow … I really should think/read more! Thank you! :+1:

[Pochwar]

I used @Lyrkan solution with Encore.configureLoaderRule() but instead of removing the exclude rule, I override it with a regex that exclude all the node_modules except some folder inside it.

For example, if I need some TS files in a module located in node_modules/@myCompany/:

Encore.configureLoaderRule('typescript', rule => {
  rule.exclude = /node_modules\/(?!@myCompany)/;
});