NextJS Bazel 7 Module not found tsconfig.json

Question

I'm trying to bazelify a NextJS project from the app router example project. I'm using this ts_project macro to follow this rule. Everything works fine except the related import from the tsconfig.json path configuration:

Module not found: Can't resolve '@/app/_lib/utils'
  13 | import { Slot } from '@radix-ui/react-slot';
  14 | import { cva } from 'class-variance-authority';
> 15 | import { cn } from '@/app/_lib/utils';
     | ^
  16 | var buttonVariants = cva('inline-flex items-center justify-center rounded-md text-sm font-medium shadow ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', {
  17 |     variants: {
  18 |         variant: {

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./app/_ui/components/empty-screen.jsx
./app/chat/page.jsx

I also tried to put the Bazel out directory in the path, per this discussion, but I had no luck. Do you have any pointers?

"paths": {
  "@/app/*": [
    "./app/*",
    "./dist/tauri-on-bazel/app/*"
  ]
},

This is my BUILD file:

"Root BUILD file for all frontend examples"

load("@npm//:defs.bzl", "npm_link_all_packages")
load("@aspect_rules_ts//ts:defs.bzl", "ts_config")
load("@npm//:next/package_json.bzl", next_bin = "bin")
load("defs.bzl", "next")

# package(default_visibility = ["//:__subpackages__"])

# Create the root of the "virtual store" of npm dependencies under bazel-out.
# This must be done in the package where the pnpm workspace is rooted.
npm_link_all_packages(name = "node_modules")

next_bin.next_binary(
    name = "next_js_binary",
    visibility = ["//visibility:public"],
)

ts_config(
    name = "tsconfig",
    src = "tsconfig.json",
    visibility = ["//visibility:public"],
)

next(
    name = "next",
    srcs = [
        "//app",
        "//public",
    ],
    data = [
        "next.config.js",
        "postcss.config.js",
        "tailwind.config.ts",
        "package.json",
        ":node_modules",
    ],
    next_bin = "./node_modules/next/dist/bin/next",
    next_js_binary = ":next_js_binary",
)

Answer 1

I got an answer from the Bazel Slack channel. I need to create a jsconfig.json and put it in the data section. I duplicate the tsconfig.json, rename it jsconfig.json, and add it to the data parameter.

BUILD.bazel

...
...

next(
    name = "next",
    srcs = [
        "//app",
        "//public",
    ],
    data = [
        "next.config.js",
        "postcss.config.js",
        "tailwind.config.ts",
        "package.json",
        "jsconfig.json",
        ":node_modules",
    ],
    next_bin = "./node_modules/next/dist/bin/next",
    next_js_binary = ":next_js_binary",
)