Incorrect import paths in the bundled code of a React library in a multi-package monorepo

[pawicao]

Current Behavior

I have three packages in my monorepo - all of them are publishable:

• @my-org/types residing in packages/types
  • tsc used as a bundler
• @my-org/sdk residing in packages/sdk/core
  • tsc used as a bundler
• @my-org/sdk-react residing in packages/sdk/react
  • tried using both rollup and vite as bundlers but both giving me incorrect import paths in the built files

The dependencies are as follows:

• sdk is dependent on types
• sdk-react is dependent on types and sdk

Within the source code, all the imports look alright. I am importing types and other elements from other packages using their respective import paths.

The problem is when I build them. In the dist folder of the React package the imports seem off, instead of still referencing the import path, depending on the bundler, I am either getting relative or absolute imports referencing the codebase. This is problematic as it results in incorrect types imports in the projects which use all those packages.

Example:

• using rollup - one of the d.ts files from the bundled React project:

  import type { ParamsType, Something } from '@my-org/types';
  import { type UseQueryOptions } from './queries';
  export declare function useGetSomethingQuery(params: ParamsType, queryOptions?: UseQueryOptions<Something>):
    import("@tanstack/react-query").UseQueryResult<Something, import("dist/packages/sdk/core/src").MyError>;

  Here an interesting thing is that things from the types package are imported correctly. In some other bundled files even the sdk files seem to have correct imports, though even then when browsing through the dist folder inside the NX repo, there's a TS error of Cannot find module or its corresponding type declarations. - there's no such error with the imports from the types package.

• using vite - one of the d.ts files from the bundled React project:

  import { ParamsType, Something } from '../../../../../types/src/index.ts';
  import { type UseQueryOptions } from './queries';
  export declare function useGetSomething(params: ParamsType, queryOptions?: UseQueryOptions<Something>): 
    import("@tanstack/react-query").UseQueryResult<Something, import('../../../../core/src/index.ts').MyError>;

An observation I have made is that this problem appears in files which do not have a DIRECT import from that library to which the path is not correct.

If I import anything whatsoever from @my-org/sdk in the source file (the file which resulting d.ts file is problematic), even if i don't use that import for anything, the result is correct. Otherwise the import paths are incorrect and refer to the local placement of the files, not to the import path. This is for sure not intuitive though and I don't think it should work that way?

Expected Behavior

I would expect the bundled file to have correct import paths, something like, no matter the direct or indirect import of those classes/types:

import type { ParamsType, Something } from '@my-org/types';
import { type UseQueryOptions } from './queries';
export declare function useGetSomething(params: ParamsType, queryOptions?: UseQueryOptions<Something>):
   import("@tanstack/react-query").UseQueryResult<Something, import("@my-org/sdk-core").MyError>;

GitHub Repo

https://github.com/pawicao/nx-imports-playground

Steps to Reproduce

Reproducing:

1. npm install
2. nx run-many -t build
3. Look at the bundled/compiled files, more specifically check dist/packages/sdk/react/sdk-react.d.ts for an example

"Fixing":

1. In packages/sdk/react/src/lib/sdk-react.tsx change the import from:

   import { getSomething } from './indirect'; // this file there could serve as some bridge that eventually calls getSomething() from @my-org/sdk

   to

   import { getSomething } from '@my-org/sdk';

2. The resulting d.ts file will be correct

Nx Report

Node           : 20.11.0
OS             : darwin-arm64
Native Target  : aarch64-macos
npm            : 10.8.1

nx (global)        : 19.6.5
nx                 : 19.6.5
@nx/js             : 19.6.5
@nx/linter         : 19.6.5
@nx/eslint         : 19.6.5
@nx/workspace      : 19.6.5
@nx/devkit         : 19.6.5
@nx/eslint-plugin  : 19.6.5
@nx/react          : 19.6.5
@nx/rollup         : 19.6.5
@nrwl/tao          : 19.6.5
@nx/web            : 19.6.5
typescript         : 5.5.4
---------------------------------------
Registered Plugins:
@nx/eslint/plugin
@nx/rollup/plugin

Failure Logs

No response

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response

[efriandika]

Is there any solution on this issue?
I am also experiencing the same behaviour.

nx: v20.0.12

[efriandika]

Hi @pawicao & @jaysoo

In my case (I am using nx vite), the issue seems to be impacted by 'vite-plugin-dts' after version 3.7.0
qmhc/vite-plugin-dts#330

Just FYI, until now (latest version 4.3.0), the issue is still there.

For temporary solution, I downgraded the version to vite-plugin-dts@3.6.4.