Unable to find modules in from proto generated ts files

[marcusbgit]

While using the react-app-example as boilerplate for my own app, the following issue arises.

I'm trying to use generated ts code in my react app, generated by the following rule:

load("//tools/typescript_grpc_service:defs.bzl", "typescript_grpc_service")

typescript_grpc_service(
    name = "grpc_ts",
    protos = [":proto"],
    visibility = ["//visibility:public"],
)

This rule is based on the discussion in: rules-proto-grpc/rules_proto_grpc#47

Then I try to use this as follows

copy_to_bin(
    name = "copy_static_files",
    srcs = glob([
        "public/*",
        "public/static/**/*",
        "src/**/*",
    ]) + [
        "package.json",
        "tsconfig.json",
    ],
)

write_file(
    name = "write_chdir_script",
    out = "chdir.js",
    content = ["process.chdir(__dirname)"],
)

_RUNTIME_DEPS = [
    "chdir.js",
    "copy_static_files",
    "@npm//react",
    "@npm//react-dom",
    "@npm//react-router-dom",
    "@npm//@protobuf-ts/runtime-rpc",
    "@npm//@protobuf-ts",
    "@npm//@protobuf-ts/runtime",
    "//******/main/proto:grpc_ts",
]

react_scripts(
    name = "build",
    args = [
        "--node_options=--require=./$(execpath chdir.js)",
        "build",
    ],
    data = _RUNTIME_DEPS + [
        "@npm//@types",
    ],
    env = {
        "BUILD_PATH": "./build",
    },
    output_dir = True,
)

But then I encounter the following error:

Cannot find module '@protobuf-ts/runtime-rpc' or its corresponding type declarations.  TS2307

    2 | // @generated from protobuf file "modules/******/grpc.proto" (package "checkout", syntax proto3)
    3 | // tslint:disable
  > 4 | import { ServiceType } from "@protobuf-ts/runtime-rpc";

Am I using the correct approach to incorporate generated ts form proto files?
I can use the @protobuf-ts/runtime-rpc package in my own written .tsx files without issue, so something gets imported.

[Alex Eagle]

Generally a "cannot find module" error is a result of the idiomatic bazel pattern of having some files in the source tree and others in the output (bazel-bin) tree. That problem is inherent in rules_nodejs, which runs programs from the source tree and requires resolver tricks like rootDirs in tsconfig.json to workaround some resolved files being in the output tree.

This repo is no longer maintained, and that inherent problem is fixed in rules_js. We have example for react here: https://github.com/aspect-build/bazel-examples/tree/main/react-cra
you could probably get the protobuf package you're using to integrate more easily there, or pay a bug bounty to get someone else to build that.

[marcusbgit]

Yes we migrated to rules_js and that fixed this problem. The only extra step I needed to take was due to some problems with the generated files being symlinked. I hard copied them with a genrule, maybe not the most elegant fix. Then @gregmagolan helped solve our final issue. Now it is working. Thanks for the time and the rules, they rule!