[Bug]: Rsbuild: HarmonyLinkingError: export 'Layout' (imported as 'Layout') was not found in '@rive-app/react-canvas' (possible exports: __esModule, default, useRive, useStateMachineInput)

[GiancarlosIO]

System Info

System:
OS: macOS 12.5.1
CPU: (8) arm64 Apple M1
Memory: 343.16 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 20.13.1 - ~/.nvm/versions/node/v20.13.1/bin/node
npm: 10.5.2 - ~/.nvm/versions/node/v20.13.1/bin/npm
pnpm: 9.4.0 - ~/.nvm/versions/node/v20.13.1/bin/pnpm
Browsers:
Brave Browser: 119.1.60.118
Chrome: 126.0.6478.127
Safari: 15.6.1

Rsbuild:
"@rsbuild/core": "0.7.10",
"@rsbuild/plugin-react": "0.7.10",

Details

I'm getting an error when trying to use @rive-app/react-canvas. It looks like the exports from a common-js dependency (@rive-app/canvas) are not being resolved correctly 🤔 .

[rsbuild] File: /Users/user/Documents/project/project-frontend-apps/packages/compass.playroom/dist/AnimatedCoinRive/AnimatedCoinRive.js:1:1
[rsbuild]   × HarmonyLinkingError: export 'Fit' (imported as 'Fit') was not found in '@rive-app/react-canvas' (possible exports: __esModule, default, useRive, useStateMachineInput)
[rsbuild]     ╭─[17:1]
[rsbuild]  17 │       autoplay: false,
[rsbuild]  18 │       layout: new Layout({
[rsbuild]  19 │         fit: Fit.Contain,
[rsbuild]     ·              ───────────
[rsbuild]  20 │         alignment: Alignment.TopLeft
[rsbuild]  21 │       }),
[rsbuild]     ╰────
[rsbuild]
[rsbuild] File: /Users/user/Documents/project/project-frontend-apps/packages/compass.playroom/dist/AnimatedCoinRive/AnimatedCoinRive.js:1:1
[rsbuild]   × HarmonyLinkingError: export 'Alignment' (imported as 'Alignment') was not found in '@rive-app/react-canvas' (possible exports: __esModule, default, useRive, useStateMachineInput)
[rsbuild]     ╭─[18:1]
[rsbuild]  18 │       layout: new Layout({
[rsbuild]  19 │         fit: Fit.Contain,
[rsbuild]  20 │         alignment: Alignment.TopLeft
[rsbuild]     ·                    ─────────────────
[rsbuild]  21 │       }),
[rsbuild]  22 │       useOffscreenRenderer: true,
[rsbuild]     ╰────
[rsbuild]
[rsbuild] File: /Users/user/Documents/project/project-frontend-apps/packages/compass.playroom/dist/AnimatedStaticCoinRive/AnimatedStaticCoinRive.js:1:1
[rsbuild]   × HarmonyLinkingError: export 'Layout' (imported as 'Layout') was not found in '@rive-app/react-canvas' (possible exports: __esModule, default, useRive, useStateMachineInput)
[rsbuild]     ╭─[24:1]
[rsbuild]  24 │       src: RIVE_ANIMATION_STATIC_COIN_URL,
[rsbuild]  25 │       artboard: ANIMATED_STATIC_COIN_ARTBOARD,
[rsbuild]  26 │       layout: new Layout({
[rsbuild]     ·                   ──────
[rsbuild]  27 │         fit: Fit.Cover,
[rsbuild]  28 │         alignment: Alignment.Center
[rsbuild]     ╰────
[rsbuild]
[rsbuild] File: /Users/user/Documents/project/project-frontend-apps/packages/compass.playroom/dist/AnimatedStaticCoinRive/AnimatedStaticCoinRive.js:1:1
[rsbuild]   × HarmonyLinkingError: export 'Fit' (imported as 'Fit') was not found in '@rive-app/react-canvas' (possible exports: __esModule, default, useRive, useStateMachineInput)
[rsbuild]     ╭─[25:1]
[rsbuild]  25 │       artboard: ANIMATED_STATIC_COIN_ARTBOARD,
[rsbuild]  26 │       layout: new Layout({
[rsbuild]  27 │         fit: Fit.Cover,
[rsbuild]     ·              ─────────
[rsbuild]  28 │         alignment: Alignment.Center
[rsbuild]  29 │       }),

The error says that @rive-app/react-canvas doesn't have the exports of Layout and other modules but it isn't true. These modules, like Layout, are re-exported from @rive-app/canvas's rive.js file.

...
export { useRive, useStateMachineInput, useResizeCanvas, useRiveFile , RiveProps };
export { RiveState, UseRiveParameters, UseRiveFileParameters, UseRiveOptions } from './types';
export * from '@rive-app/canvas';  // <= this is re-exporting Layout, Alignment, Fit and other modules not found by rspack.

Maybe rsbuild/rspack is deleting the export * from '@rive-app/canvas'? 🤔

Reproduce link

https://codesandbox.io/p/devbox/rsbuild-rive-app-bug-cyjfzp

Reproduce Steps

1. Go to the sanbox: https://codesandbox.io/p/devbox/rsbuild-rive-app-bug-cyjfzp
2. You will see the error

[f312213213]

Hi, thanks for quick responding, but I think the same error still exist, this time I'm using the @tanstack/react-query lib and the case is:

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

will have the following error message:

× HarmonyLinkingError: export 'QueryClient' (imported as 'QueryClient') was not found in '@tanstack/react-query' (possible exports: Hydrate, IsRestoringProvider, QueryClientProvider, QueryErrorResetBoundary, __esModule, defaultContext, useHydrate, useInfiniteQuery, useIsFetching, useIsMutating, useIsRestoring, useMutation, useQueries, useQuery, useQueryClient, useQueryErrorResetBoundary)

but QueryClient is re-export from @tanstack/query-core actually

import './setBatchUpdatesFn';
export * from '@tanstack/query-core'; // re-export from this line
export * from './types';

I'm using "@rsbuild/core": "1.0.0-alpha.4" which depends on the latest rspack, version: "1.0.0-alpha.1".

[GiancarlosIO]

in my case, it was fixed so THANKS @ahabhgk !

But yes @f312213213 , looks like rspack somehow is failing when a library re-exports all modules from an internal dependency 🤔

@ahabhgk do you know if it's a bug in rspack itself? or maybe the libraries (like react query) are not following the standard? 🤔

[f312213213]

Additional information: When I use "@rsbuild/core": "0.5.9", everything works fine.

[ahabhgk]

@f312213213 I can't reproduce in my local, could you provide a minimal reproduce?

[f312213213]

Hi @ahabhgk ,The following link is my minimal reproduce.

https://codesandbox.io/p/devbox/rsbuild-rive-app-bug-forked-mnlp5y