nrwl / nx

Smart Monorepos · Fast CI
https://nx.dev
MIT License
23.67k stars 2.36k forks source link

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

Open pawicao opened 2 months ago

pawicao commented 2 months ago

Current Behavior

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

The dependencies are as follows:

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:

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

Additional Information

No response

efriandika commented 2 days ago

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

nx: v20.0.12

efriandika commented 2 days ago

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 https://github.com/qmhc/vite-plugin-dts/issues/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.