Thanks to visit codestin.com
Credit goes to github.com

Skip to content

[Bug]: usedExports: true breaks the dynamic module import #13865

@n0th1ng-else

Description

@n0th1ng-else

System Info

System:
OS: macOS 26.3.1
CPU: (12) arm64 Apple M2 Pro
Memory: 422.80 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 24.12.0 - /Users/sen/.nvm/versions/node/v24.12.0/bin/node
Yarn: 4.10.1 - /opt/homebrew/bin/yarn
npm: 11.6.2 - /Users/sen/.nvm/versions/node/v24.12.0/bin/npm
bun: 1.3.5 - /Users/sen/.bun/bin/bun
Deno: 2.5.6 - /Users/sen/.deno/bin/deno
Browsers:
Chrome: 147.0.7727.102
Safari: 26.3.1
npmPackages:
@rspack/cli: 2.0.1 => 2.0.1
@rspack/core: 2.0.1 => 2.0.1
@rspack/dev-server: 2.0.1 => 2.0.1
@rspack/plugin-react-refresh: 2.0.0 => 2.0.0

Details

Hello team. First of all - congrats on the huge milestone and with Rspack v2!

I have tried to bump the version for our main Miro application. Almost everything worked as it is, but one thing was detected by the e2e tests.

Seems that usedExports: true breaks the dynamic module import for one of the pages. I do not have a good reproduction, but will give some info on the setup.

We technically have plenty of similar pages in the pretty much same setup (lazy dynamic loading with default export) and it mostly work.

I wonder why rspack decided to optimize this specific module.

Reproduce link

n/a

Reproduce Steps

This is part of the rspack config we use; in development, it works just fine. The issue is happening only with the PRODUCTION bundle.

This works fine on Rspack 1.x
But I observe the same behavior of 2.0.0 and 2.0.1

optimization: {
			chunkIds: isProduction ? 'deterministic' : 'named',
			moduleIds: isProduction ? 'deterministic' : 'named',
			providedExports: isProduction,
			sideEffects: isProduction,
			usedExports: isProduction, // Breaks the page when isProduction = true
			nodeEnv: false, // we set this by hand

			concatenateModules: isProduction,
			runtimeChunk: true
		
			removeEmptyChunks: true,
	
			splitChunks: { ....chunks },
			realContentHash: isProduction,
	        minimize: isProduction,
			minimizer: [getMinifier(), getCSSMinifier()],

			innerGraph: isProduction,
			mangleExports: isProduction,
		},

And the page implementation looks roughly like this:

// some imports

const PageAdminHomeContainer: React.FC = () => {
	const SettingsPageWrapper = getDependency('SettingsPageWrapper')

	return (
		<SettingsPageWrapper>
			{({organization}) => organization && <PageAdminHome organization={organization} />}
		</SettingsPageWrapper>
	)
}

export default PageAdminHomeContainer

We import it dynamically on demand

export const PageAdminHomeLazy = React.lazy(() => {
	return retryImport(
		() =>
			import(
				/* webpackChunkName: "page-company-admin-home" */
				'./PageAdminHomeContainer'
			)
	)
})

retryImport(fn) is effectively a promise retry implementation, nothing much.

Metadata

Metadata

Assignees

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions