Module not found when using #imports

Feedback
,
1

I have nextjs app and its build fails when I use import property of package.json file. Below is a snippet of my error:

@piszczj/web:build:    Creating an optimized production build ...
@piszczj/web:build: Failed to compile.
@piszczj/web:build: 
@piszczj/web:build: ./src/app/(app)/account/edit/profile/update-teacher-profile-form.tsx
@piszczj/web:build: Module not found: Can't resolve '@piszczj/files/uploader/triggers/video-trigger'

Inside video-trigger.tsx I use #src/… import and there is no error in vs code and no error when I build this package only, but when building web app it throws above error. I forked that repo turborepo/examples/with-tailwind at main · vercel/turborepo · GitHub and started to implement my changes which are:

  • in tsconfig.json of ui package I added "rootDir": "."

  • In package.json of ui package I added:

      "imports": {

    "#src/*": [

      "./src/*.ts",

      "./src/*.tsx"

    ]

  },

  • in packages/ui I added box.tsx and inner-box.tsx in src/box directory, where:

    import { InnerBox } from "#src/box/inner-box";



export const Box = () => {

  return (

    <div>

      <InnerBox />

    </div>

  );

};

  • I added box inside web/app/page.tsx importing it as import { Box } from "@repo/ui/box/box";

Now, during the build I have an error:

> Build error occurred
Error: Turbopack build failed with 1 errors:
./packages/ui/dist/box/box.js:5:21
Module not found: Can't resolve '#src/box/inner-box'
  3 | exports.Box = void 0;
  4 | const jsx_runtime_1 = require("react/jsx-runtime");
> 5 | const inner_box_1 = require("#src/box/inner-box");
    |                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  6 | const Box = () => {
  7 |     return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(inner_box_1.InnerBox, {}) }));
  8 | };

SO the errors are quite similar, maybe if you can fix that I will be ale to fix the error in my main repo. Any ideas?