Error with example using react, vite, swc, protobuf

[dezyh]

Issue

Builds failing when trying to use a tsconfig.ts's paths alias with a ts_proto_library.

Motivation

I don't want to use copy_files = True in the ts_proto_library as it litters the source tree with .d.ts files. I would rather point to the bazel-out directory instead for the .d.ts files to allow my IDE to resolve types.

I also don't want to use relative paths to protos in the workspace. I would prefer to either use paths aliases or a npm_package (which I couldn't get to work either for what I think is the same reason).

Steps

1. (286306e) I started by copying one of the existing examples with only a few changes (npm package versions updated, and a path alias @/* to the root of the project.

2. (18e6c69) I started with importing the proto_grpc's ts_proto_library using relative imports. The build works and IDE type resolution works because of copy_files = True by default.

3. (394487a) I set copy_files = False and deleted the .d.ts files from the example from my source tree. The build still works but IDE type resolution fails, as expected since we haven't pointed it to bazel-out yet.

4. (01cb6ed) I tried to fix resolving the types by using a path alias in tsconfig.ts. The build now fails, but IDE type resolution works again due to the paths alias to bazel-out.

   Note: I think the first alias ("../../*") should work for builds in the bazel sandbox while the second alias should and does work for IDE type resolution. When both aliases are added, the error message is just Failed to resolve import "~/examples/proto_grpc/logger_pb" from "src/App.js" as it couldn't resolve to either alias so it doesn't rewrite the path in the error message. When only one of the above is added the path changes to the aliased path as shown in the error message instead.

Final Build Errors

The path in the error is what stands out to me as weird.

Here's both preview and start build errors for production and dev build respectively.

$ bazel run //examples/react:preview
INFO: Analyzed target //examples/react:preview (1 packages loaded, 18 targets configured).
INFO: Found 1 target...
ERROR: /home/dezyh/code/rules_ts/examples/react/BUILD.bazel:69:14: ViteBuild examples/react/dist failed: (Exit 1): vite.sh failed: error executing command (from target //examples/react:build) bazel-out/k8-opt-exec-2B5CBBC6/bin/examples/react/vite.sh build

Use --sandbox_debug to see verbose messages from the sandbox and retain the sandbox build root for debugging
The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
Could not resolve "../../../../../.cache/bazel/_bazel_dezyh/ed41e8be42408266ba9425be6f3f6f17/sandbox/linux-sandbox/570/bazel-out/k8-fastbuild/bin/examples/proto_grpc/logger_pb" from "src/App.js"
file: /home/dezyh/.cache/bazel/_bazel_dezyh/ed41e8be42408266ba9425be6f3f6f17/sandbox/linux-sandbox/571/execroot/aspect_rules_ts/bazel-out/k8-fastbuild/bin/examples/react/src/App.js
error during build:
RollupError: Could not resolve "../../../../../.cache/bazel/_bazel_dezyh/ed41e8be42408266ba9425be6f3f6f17/sandbox/linux-sandbox/570/bazel-out/k8-fastbuild/bin/examples/proto_grpc/logger_pb" from "src/App.js"
    at error (file:///home/dezyh/.cache/bazel/_bazel_dezyh/ed41e8be42408266ba9425be6f3f6f17/execroot/aspect_rules_ts/bazel-out/k8-fastbuild/bin/examples/node_modules/.aspect_rules_js/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:337:30)
    at ModuleLoader.handleInvalidResolvedId (file:///home/dezyh/.cache/bazel/_bazel_dezyh/ed41e8be42408266ba9425be6f3f6f17/execroot/aspect_rules_ts/bazel-out/k8-fastbuild/bin/examples/node_modules/.aspect_rules_js/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:18022:24)
    at file:///home/dezyh/.cache/bazel/_bazel_dezyh/ed41e8be42408266ba9425be6f3f6f17/execroot/aspect_rules_ts/bazel-out/k8-fastbuild/bin/examples/node_modules/.aspect_rules_js/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:17982:26
vite v5.0.12 building for production...
transforming...
✓ 9 modules transformed.
Target //examples/react:preview failed to build
Use --verbose_failures to see the command lines of failed build steps.
INFO: Elapsed time: 0.561s, Critical Path: 0.42s
INFO: 9 processes: 2 internal, 6 linux-sandbox, 1 local.
FAILED: Build did NOT complete successfully
ERROR: Build failed. Not running target
Error: bazel exited with exit code: 1

or

$ bazelisk run //examples/react:start
  VITE v5.0.12  ready in 111 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
12:02:21 AM [vite] Pre-transform error: Failed to resolve import "../../../../../.cache/bazel/_bazel_dezyh/ed41e8be42408266ba9425be6f3f6f17/sandbox/linux-sandbox/570/bazel-out/k8-fastbuild/bin/examples/proto_grpc/logger_pb" from "src/App.js". Does the file exist?
12:02:21 AM [vite] Internal server error: Failed to resolve import "../../../../../.cache/bazel/_bazel_dezyh/ed41e8be42408266ba9425be6f3f6f17/sandbox/linux-sandbox/570/bazel-out/k8-fastbuild/bin/examples/proto_grpc/logger_pb" from "src/App.js". Does the file exist?
  Plugin: vite:import-analysis
  File: /run/user/1000/js_run_devserver-rgLOdP/aspect_rules_ts/examples/react/src/App.js:5:29
  3  |  import "./App.css";
  4  |  import count from "./other";
  5  |  import { LogMessage } from "../../../../../.cache/bazel/_bazel_dezyh/ed41e8be42408266ba9425be6f3f6f17/sandbox/linux-sandbox/570/bazel-out/k8-fastbuild/bin/examples/proto_grpc/logger_pb";
     |                              ^
  6  |  function App() {
  7  |      console.log("count", count());
      at formatError (file:///home/dezyh/.cache/bazel/_bazel_dezyh/ed41e8be42408266ba9425be6f3f6f17/execroot/aspect_rules_ts/bazel-out/k8-fastbuild/bin/examples/node_modules/.aspect_rules_js/[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:63768:46)
      at TransformContext.error (file:///home/dezyh/.cache/bazel/_bazel_dezyh/ed41e8be42408266ba9425be6f3f6f17/execroot/aspect_rules_ts/bazel-out/k8-fastbuild/bin/examples/node_modules/.aspect_rules_js/[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:63762:19)
      at normalizeUrl (file:///home/dezyh/.cache/bazel/_bazel_dezyh/ed41e8be42408266ba9425be6f3f6f17/execroot/aspect_rules_ts/bazel-out/k8-fastbuild/bin/examples/node_modules/.aspect_rules_js/[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:62037:33)
      at async file:///home/dezyh/.cache/bazel/_bazel_dezyh/ed41e8be42408266ba9425be6f3f6f17/execroot/aspect_rules_ts/bazel-out/k8-fastbuild/bin/examples/node_modules/.aspect_rules_js/[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:62191:47
      at async Promise.all (index 4)
      at async TransformContext.transform (file:///home/dezyh/.cache/bazel/_bazel_dezyh/ed41e8be42408266ba9425be6f3f6f17/execroot/aspect_rules_ts/bazel-out/k8-fastbuild/bin/examples/node_modules/.aspect_rules_js/[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:62112:13)
      at async Object.transform (file:///home/dezyh/.cache/bazel/_bazel_dezyh/ed41e8be42408266ba9425be6f3f6f17/execroot/aspect_rules_ts/bazel-out/k8-fastbuild/bin/examples/node_modules/.aspect_rules_js/[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:64063:30)
      at async loadAndTransform (file:///home/dezyh/.cache/bazel/_bazel_dezyh/ed41e8be42408266ba9425be6f3f6f17/execroot/aspect_rules_ts/bazel-out/k8-fastbuild/bin/examples/node_modules/.aspect_rules_js/[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:49741:29)
      at async viteTransformMiddleware (file:///home/dezyh/.cache/bazel/_bazel_dezyh/ed41e8be42408266ba9425be6f3f6f17/execroot/aspect_rules_ts/bazel-out/k8-fastbuild/bin/examples/node_modules/.aspect_rules_js/[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:59342:32)

Other

1. Adding build --modify_execution_info=SWCTranspile=+no-sandbox to .bazelrc as advised in the following does not seem to help.
   • Paths aspect-build/rules_swc#33
   • import statements improperly transformed when using symlinks swc-project/swc#4057
2. Tried out tips from Discussion: Setting up ts_project with custom path mapping in a monorepo bazel-contrib/rules_nodejs#2298

   "baseUrl": "../../",
   "rootDirs": [
     "../..", // bazel builds
     "../../bazel-out/k8-fastbuild/bin" // IDE type resolution
   ],
   "paths": {
     "@/*": [
         "./examples/react/*", // bazel builds
         "./examples/react/src/*" // IDE type resolution
     ],
   }

   and then commenting out any protobuf code and trying the project path alias @.

   import count from '@/other';
   
   // import { LogMessage } from '~/examples/proto_grpc/logger_pb';
   
   function App() {
     console.log('count', count());
     // console.log('log', new LogMessage({}));

   This leads to same issue as the ~ alias above which makes me suspect the issue is related to .. paths and probably symlinks.