Open vritant24 opened 10 months ago
Thanks for the quick reply!
Apologies I accidentally made private repo. Fixed that. I hope the repo elaborates my issue better
WARNING in ./src/desktop/main.ts
Module Warning (from ./node_modules/esbuild-loader/dist/index.cjs):
[esbuild-loader] The specified tsconfig at "C:\repos\webpack-esbuild-loader-4-repro\tsconfig.json" was applied to the file "C:\repos\webpack-esbuild-loader-4-repro\src\desktop\main.ts" but does not match its "include" patterns
Error: [esbuild-loader] The specified tsconfig at "C:\repos\webpack-esbuild-loader-4-repro\tsconfig.json" was applied to the file "C:\repos\webpack-esbuild-loader-4-repro\src\desktop\main.ts" but does not match its "include" patterns
at Object.ESBuildLoader (C:\repos\webpack-esbuild-loader-4-repro\node_modules\esbuild-loader\dist\index.cjs:60:11)
I was migrating a Typescript+Webpack+Babel loader monorepo with the references
section in a tsconfig
of the application host file and faced exactly same issue. The sub-packages I have under the references
section are compiled with the same error.
The warning reads like esbuild knows what to do (don't apply the tsconfig to the file) but is just letting you know it is going to do it anyway.
I thought I needed to figure out how to configure things so that the tsconfig isn't applied to the file (mine is in node_modules
), but @privatenumber seems to be suggesting that the opposite is what is required.
Feel free to open a PR
Feel free to open a PR
Maybe once I figure out what the warning is trying to tell me.
If you need help, you'll have to provide a minimal reproduction at the least. Otherwise, there's nothing for anyone to debug.
So after much testing, I think I understand a little bit more of how this is happening.
If esbuild-loader
is involved in transpilation of a file that happens to import something that your tsconfig.json
did not include in its options, it will throw this warning.
E.g. If you have a .tsx
file that imports an svg
that you are later processing with another loader (@svgr/webpack
for example), it will read and process that svg
import and will try to apply the tsconfig.json
in your project to that particular file as well.
This may be a good warning for the sake of clarity, but it's also a little bit unexpected in my opinion. This was added in V4. https://github.com/privatenumber/esbuild-loader/releases/tag/v4.0.0
To immediately fix this, you can add the tsConfigRaw: {}
to the loader options
though be careful if you need specific TS options added. Here's an example following my situation
// Checks for SVG imports inside js(x) files
{
test: /\.svg$/,
exclude: /node_modules/,
issuer: {
test: /\.tsx?$/,
},
use: [
{
loader: 'esbuild-loader',
options: {
loader: 'tsx',
tsconfigRaw: {},
},
},
{
loader: '@svgr/webpack',
options: { ... },
},
{
loader: 'url-loader',
options: { ... },
},
],
},
Also here are two suggestions I'd propose. If @privatenumber agrees, I wouldn't mind contributing a PR to modify some things too.
@dons20
I appreciate you contributing constructively!
Here are the problems I see:
The warning should not block the build. But since esbuild-loader is simply using Webpacks this.emitWarning
method, this should be handled on Webpacks side. Maybe these will help:
The warning is actually inaccurate (TypeScript incompatibility)
So until recently, I was under the misconception that tsconfig.json
only applies to files specified in files
& includes
. This is actually incorrect. Even if only one file is specified, it also implicitly applies to everything that file imports: https://stackblitz.com/edit/stackblitz-starters-vvvjft?file=tsconfig.json
That said, there is also a TypeScript compatibility bug here. It should only check for tsconfigs in the entry files and apply that config to the rest of the files in the dependency tree.
I'm open to the following PRs:
@privatenumber thanks for creating this plugin !
we ran into the same issue.
The warning is actually inaccurate (TypeScript incompatibility)
I'm wondering how does this relate to typescript incompatibility ? AFAIK the only source of truth for loading module tree within webpack is entry
field, thus anything specified within tsconfig#includes etc should be ignored ( unless esbuild provides type-checking features which will probably never happen ).
From my POV to resolve this processing issue of esbuild-loader any includes/files/exclude
patterns within provided tsconfigs should be avoided and only module transpilation configuration within compilerOptions
should be processed ( following esbuild ).
note:
Also as you realised regarding program creation within TS, anything that is being part of Program is included in both type-checking and transpiling even if it's not specified within include/files pattern , even if it's within exclude patterns and it is part of your program it will be consumed. This behaviour is in TS since day 1 AFAIR.
Yeah, I think I agree with you.
It doesn't matter too much now... but originally, I was trying to handle cases with multiple tsconfigs. For example, a tsconfig for the src
directory, and another for the tests
directory. So initially, I wanted to be careful the detected or specified tsconfig isn't applied to files outside of it's target scope.
But I see now I was misunderstanding TS behavior: TypeScript simply applies the tsconfig to all imported files even if only the entry-file is in includes/files/excludes
. I think the only validation check we needs to enforce is verifying that the entry-file matches the detected/passed-in tsconfig file.
Another interesting case is a monorepo where one packages bundles another with a different tsconfig. This is a problem we have in https://github.com/privatenumber/tsx too.
Anyway, would you be willing to work on this?
Problem
I've created the following repo for reproducing the issue: https://github.com/vritant24/webpack-esbuild-loader-4-repro
Steps:
npm install
npm run build
The build should succeed.
If you upgrade the
esbuild-loader
version in package.json to4.0.2
, you will see errors similar to:Expected behavior
Build should succeed
Minimal reproduction URL
https://github.com/vritant24/webpack-esbuild-loader-4-repro
Version
4.0.2
Node.js version
v16
Package manager
npm
Operating system
Windows
Contributions