Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 of 4 tasks
pawicao opened this issue Sep 6, 2024 · 2 comments
Open
1 of 4 tasks
Assignees
Labels
scope: bundlers Issues related to webpack, rollup type: bug

Comments

@pawicao
Copy link

pawicao commented Sep 6, 2024

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

@jaysoo jaysoo self-assigned this Sep 25, 2024
@jaysoo jaysoo added the scope: bundlers Issues related to webpack, rollup label Sep 25, 2024
@efriandika
Copy link

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

nx: v20.0.12

@efriandika
Copy link

efriandika commented Nov 12, 2024

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 [email protected].

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
scope: bundlers Issues related to webpack, rollup type: bug
Projects
None yet
Development

No branches or pull requests

3 participants