Webpack.js.org: The order of `resolve.extensions` matters, but should not

[justinpombrio]

Bug report

What is the current behavior?

The order of resolve.extensions matters. Specifically, this line of configuration:

resolve : {extensions: ['.js', '.jsx', '.ts', '.tsx'] }

leads to .ts files not being compiled, even if there is a rule for Typescript. On the other hand, this line:

resolve : {extensions: ['.ts', '.tsx', '.js', '.jsx'] }

works, and leads to .ts files being compiled.

If the current behavior is a bug, please provide the steps to reproduce.

Take a project that is currently setup to use webpack, and change the order of resolve.extensions to put the .ts extension(s) after the .js extension(s). Then notice that the .ts files are no longer compiled.

EDIT: Sorry, apparently the order only _sometimes_ matters. I haven't been able to reproduce this with a small example.

What is the expected behavior?

Either these two lines should behave identically to each other:

resolve : {extensions: ['.ts', '.tsx', '.js', '.jsx'] }
resolve : {extensions: ['.js', '.jsx', '.ts', '.tsx'] }

Or the documentation should be _very clear_ about how and why the order of resolve.extensions matters.

Other relevant information:
webpack version: 4.29.6
Node.js version: NA
Operating System: Linux
Additional tools: typescript

[alexander-akait]

What do you mean "Then notice that the .ts files are no longer compiled."? Looks you have invalid configuration, please provide your configuration

[justinpombrio]

Here's our config file, which works:

https://github.com/bootstrapworld/codemirror-blocks/blob/master/webpack/base.config.js

However, if you change this line:

resolve : {extensions: ['.ts', '.tsx', '.js', '.jsx'] }, // Order matters!

by re-ordering the extensions to this:

resolve : {extensions: ['.js', '.jsx', '.ts', '.tsx'] }, // Order matters!

then webpack stops compiling the Typescript files. Meaning that, e.g., if I purposefully insert a syntax error into a typescript file, it doesn't show up. Because the typescript loader is never run.

Sorry that this example is so big. I tried making a smaller fresh example to demonstrate the issue, but it didn't reproduce.

[alexander-akait]

@justinpombrio

Sorry that this example is so big. I tried making a smaller fresh example to demonstrate the issue, but it didn't reproduce.

Yep, because you have invalid configuration somewhere as i said above. Also you provide part of configuration, we can't help you without full example or minimum reproducible test repo

[sokra]

Yes the order matters. Extensions are tried in order. The order defined the behavior if you have a .js and a .ts file.

[justinpombrio]

Oh, I see! I was expecting the order to be determined by the order of rules, and guessed that rules.extensions was just a filter, or at least still let both rules fire.

Might I suggest expanding the docs around resolve.extension slightly? Perhaps like this, assuming that it's accurate?

Attempt to resolve these extensions in order. If a directory contains multiple files with the same name and different extensions, use the one with the extension listed first and skip the rest.

That would have clarified things for me, at least.

[sokra]

yep good idea. send a PR to the documentation.

[EugeneHlushko]

@justinpombrio wanna send PR or should i?

[justinpombrio]

I finally did. https://github.com/webpack/webpack.js.org/pull/2913