Comments (11)
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.
- Adding a separate config flag to hide these warnings. This warning can break builds / pipelines that don't allow warnings.
- If the v4 functionality was added to handle cases of multiple tsconfigs, perhaps the newer logic could apply when there are multiple tsConfigs? Perhaps this is something that can be changed via a flag as well?
from esbuild-loader.
- It's a warning (not an error), so I believe the build should succeed
- Have you tried including the file in the tsconfig as the warning suggests?
- https://github.com/vritant24/webpack-esbuild-loader-4-repro 404s for me so I can't see it
from esbuild-loader.
Thanks for the quick reply!
Apologies I accidentally made private repo. Fixed that. I hope the repo elaborates my issue better
- the tsconfig is included, and the files are included as part of referenced tsconfigs
- There is a Warning, but it also comes as an error underneath, which fails our build:
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)
from esbuild-loader.
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.
from esbuild-loader.
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.
from esbuild-loader.
Feel free to open a PR
from esbuild-loader.
Feel free to open a PR
Maybe once I figure out what the warning is trying to tell me.
from esbuild-loader.
If you need help, you'll have to provide a minimal reproduction at the least. Otherwise, there's nothing for anyone to debug.
from esbuild-loader.
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:- https://webpack.js.org/configuration/stats/#statswarnings
- https://webpack.js.org/configuration/other-options/#ignorewarnings (I believe this is Webpack's preferred method)
-
The warning is actually inaccurate (TypeScript incompatibility)
So until recently, I was under the misconception that
tsconfig.json
only applies to files specified infiles
&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.jsonThat 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:
- Test that emits this warning and shows that it fails. And another test that confirms Webpack configuration can suppress this warning.
- Fix for the tsconfig.json matching bug and test
from esbuild-loader.
Related Issues (20)
- Esbuild throws errors on generic arrow functions in certain cases HOT 2
- The current version is not supported module federation build production HOT 1
- Doesn't work well with esbuild 0.18.x and inherited `tsconfig.json` and `experimentalDecorators` HOT 5
- esbuild 0.18 HOT 2
- sourceMappingURL getting removed by minifier HOT 1
- Define property causes bundle to minify HOT 7
- enable esbuild-loader with relay plugin HOT 1
- After upgrading from esbuild 3 version to version 4, the following error message occurs when yarn start is executed. HOT 3
- Define property prevents bundle from minifying HOT 1
- ngDevMode is not defined, when building Angular 15.2 or higher HOT 2
- Optional Chaining not working HOT 1
- Module resolution problems HOT 6
- Only 1 plugin working at a time HOT 2
- Float's optimization HOT 1
- reference errors on build instead of hoisting HOT 1
- "Module not found" error causes esbuild-loader to crash with "Cannot read properties of undefined (reading 'useSourceMap')" HOT 3
- Support for Debugging styled-components with esbuild-loader HOT 1
- Enable "dynamic-import" by default HOT 2
- File '@ljharb/tsconfig' not found. HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from esbuild-loader.