ts_project does not expose imported non typescript files; esbuild cannot locate them

[Thomas Neil James Shadwell]

🐞 bug report

Affected Rule

The issue is caused by the rule:

esbuild() (https://github.com/bazelbuild/rules_nodejs/blob/stable/packages/esbuild/esbuild.bzl)

Is this a regression?

Yes, the previous version in which this bug was not present was: ....

No

Description

A clear and concise description of the problem...

Within the frontend development ecosystem, it is not uncommon to import CSS files, CSS modules, sass files and other types of content as though they were ES modules. This is something esbuild supports.

Consider this short BUILD file:

load("@npm//@bazel/esbuild:index.bzl", "esbuild")
load("//ts:rules.bzl", "ts_project")

ts_project(
    name = "testing",
    srcs = [
        "index.ts",
        "test.css"
    ],
    composite = True,
    incremental = True,
    tsconfig = "//:tsconfig",
    deps = [
        "@npm//@types/react",
        "@npm//react",
        "//:base_defs",
    ],
)

esbuild(
    name = "esbuild",
    config = "//:esbuild_config",
    entry_points = ["index.ts"],
    link_workspace_root = True,
    metafile = False,
    minify = True,
    output_dir = "es_out",
    deps = ["testing"],
    srcs = [ "test.css" ]
)

A single CSS file and a single .ts file is present. The ts file imports the css file. However, because ts_project does not expose the file fed into it, esbuild is unable to find the css file and the build fails.

Adding the css file as a source, as in the example shows here doesn't work either, because (it seems like) the css file can get put in a different rootpath file tree. The paths workaround addresses this for ts_project:

{
	"$schema": "https://json.schemastore.org/tsconfig",
		"paths": {
			"*": [
				"./*",
				"./bazel-out/k8-fastbuild/bin/*",
				"./bazel-out/x64_windows-fastbuild/bin/*",
				"./bazel-out/x64_windows-dbg/bin/*",
				"./bazel-out/k8-dbg/bin/*",
				"./bazel-out/host/bin/*",
				"./bazel-out/darwin-fastbuild/bin/*",
				"./bazel-out/darwin-dbg/bin/*"
			]
		}
	},
}

But this does not solve this problem for esbuild, as esbuild overrides the "tsconfig" setting, and therefore though these rootpaths are supported by esbuild, esbuild cannot pick up the tsconfig containing the path mappings.

I have used an aspect to pick up the CSS files for my project and feed them into esbuild, but run into this problem.

I would argue that (1) ts_project should be able to create a js_library containing any extra files needed for the created javascript to run, and (2) esbuild should allow setting a tsconfig, or at least rootpaths to allow it to find these CSS files.

Workaround

I have managed to get this to work before by wrapping ts_project so that it exposes the TS source files and the css source files as a separate js_library, irrespective of the normal ts_project rule. This way, by creating a second dependency tree, esbuild can compile on the source typescript files directly.

[github-actions]

This issue has been automatically marked as stale because it has not had any activity for 6 months. It will be closed if no further activity occurs in 30 days. Collaborators can add a "cleanup" or "need: discussion" label to keep it open indefinitely. Thanks for your contributions to rules_nodejs!

[Alex Eagle]

I just fixed this yesterday in rules_ts: aspect-build/rules_ts@ad9d8bb