Parcel: Custom tsconfig.json name 🙋

[laurence-myers]

This a 🙋 feature request.

🎛 Configuration (.babelrc, package.json, cli command)

File structure:

+- tsconfig.json
+- tsconfig_webview.json
+- src/
+-- main.ts
+- webview/
+-- webview.html
+-- webview.ts

🤔 Expected Behavior

Parcel allows specifying the tsconfig.json file to use.

😯 Current Behavior

Parcel will only look for a file called "tsconfig.json" in the directory where Parcel is executed.

💁 Possible Solution

I've found a workaround, which is to add a file "tsconfig.json" to the "webview" directory, and run parcel from that directory instead of the project root.

Ideally, there should be a command line option to specify the name and path of the tsconfig.json file.

🔦 Context

• Compiling and bundling WebView code for use in a React Native project, both using TypeScript, but requiring different compilation targets (ES6 for React Native, ES5 for WebView).

🌍 Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.7.0
| Node | 8.9.4
| Yarn | 1.3.2
| Operating System | Windows 10

[DeMoorJasper]

This isn't standard in the tsconfig spec right?
Unless u are using extends?

[fathyb]

I'm not sure to understand what's the problem with putting tsconfig.json in the webview directory? It's the standard way and will work natively with VSCode config resolution. However, you should not need to run parcel in the webview directory. Take this structure :

project
+- tsconfig.json
+- src/
+-- main.ts
+- webview/
+-- tsconfig.json // you can use "extends" to inherit from ../tsconfig.json
+-- webview.html
+-- webview.ts

This should work:

• parcel webview/webview.html <== build using project/webview/tsconfig.json
• parcel src/main.ts <== build using project/tsconfig.json

[laurence-myers]

@DeMoorJasper The default is to look for a tsconfig.json in the project root, but using the TypeScript CLI you can specify a different file like tsc -p webview/tsconfig.webview.json. Yes, it'd be nice to support extended configurations, e.g. have three files called tsconfig.base.json, tsconfig.main.json, and tsconfig.webview.json.

@fathyb You're quite right, I thought I had an issue running it like that, but I can't reproduce any problems.

[laurence-myers]

I'm closing this because:

1. There's a workaround.
2. More sophisticated support can probably be provided by a third-party loader.
3. I ended up switching back to webpack due to #1252, .ts file changes not getting picked up in "watch" mode, and other unrelated bundling requirements.

[antongolub]

@fathyb, @DeMoorJasper, we faced with a similar issue, but in a slightly different context.

In our case, we use different build strategies for a single src/main to support several runtimes (nodejs 6, 8, 10, 12, rhino, nashorn, graaljs). Additional directories break maven dir layout, so we need a custom script to create them dynamically as part of build task — that's really annoying)

So we'd like to run parcel with --tsconfig flag as @laurence-myers suggested above. How is this acceptable?

[alzalabany]

so any updates on this ?

[mischnic]

Please open a new issue with an explanation why https://github.com/parcel-bundler/parcel/issues/1251#issuecomment-384582400 isn't working in your situation.

[jjenzz]

I have a monorepo setup where I use paths in the tsconfig to point our @module/package imports to the relevant src directories for each package. This is so types all work locally without having to build our packages every time we make a change.

Our problem is that Parcel uses these paths for type definition imports when building our type definitions. We end up with stuff like this:

declare const Something: import("react/utils/src").SomeInterface & {
    foo: string;
}

But we need:

declare const Something: import("@module/react-utils").SomeInterface & {
    foo: string;
}

I was hoping we could have a tsconfig.production.json that we could tell parcel to use. Is this possible or is there another solution to this?