4

I want to import a typescript module from one part of my repo at another part without having a bunch of "../.." in my imports to get back to the root folder of my bazel workspace. How can I setup absolute imports (relative to my workspace) for webpack? Do I need to set something in webpack.config.js? If so, what?

Minimal setup to illustrate the issue below:

Folder structure

folder1/
    moduleA.ts
    BUILD
folder2/
    moduleB.ts
    BUILD
WORKSPACE

WORKSPACE

workspace(
    name = "myworkspace",
)

...

* **moduleA.ts ***

// TS COMPILER CAN FIND THIS BUT WEBPACK CAN'T FIND THIS
import { thing } from "myworkspace/folder2/moduleB";  

...

folder1/BUILD

load("@npm_bazel_typescript//:index.bzl", "ts_library")
load("@npm//webpack-cli:index.bzl", webpack = "webpack_cli")

ts_library(
    name = "moduleA",
    srcs = ["moduleA.ts"],
    deps = [
        "//folder2:moduleB",
    ],
)

filegroup(
    name = "moduleA.js",
    srcs = [
        "moduleA",
    ],
    output_group = "es6_sources",
    visibility = ["//visibility:public"],
)

webpack(
    name = "bundle",
    outs = ["app.bundle.js"],
    args = [
        "$(locations :moduleA.js)",
        "--config",
        "$(execpath //:webpack.config.js)",
        "-o",
        "$@",
    ],
    data = [
        ":moduleA.js",
        "//:webpack.config.js",
        "@npm//:node_modules",
    ],
    visibility = ["//visibility:public"],
)
Wesley
  • 1,412
  • 1
  • 15
  • 23

1 Answers1

1

Solved here.

It turns out the issue is that filegroup does not infer from moduleA that //folder2:moduleB needs to be included transitively. Adding //folder2:moduleB to the filegroup srcs fixed my issue.

Wesley
  • 1,412
  • 1
  • 15
  • 23