Background
Our frontend team practices Trunk Based Development and Continuous Deployment, but we're the only team in our company doing so. Because of this approach, we make extensive use of feature flags in our application code.
We frequently need to modify our company's shared design system, which consists of two interdependent packages: "@common-ui": "4.45.0", "@design-system-react": "4.45.0",
Where common-ui depends on design-system-react.
Our approach
To avoid polluting the shared design system with feature flags specific to our team, we to implement a strategy using npm aliases. This allows us to:
- Import alpha versions of design system components
- Toggle between old and new versions using feature flags
- Develop multiple features in parallel using different alpha releases
In our package.json, I tried set up npm aliases like this:
"dependencies": { "@common-ui": "4.45.0", "@design-system-react": "4.45.0", "@common-ui-alpha-telephone-field": "npm:@[email protected]", "@design-system-react-alpha-telephone-field": "npm:@[email protected]" } And overrides like this:
"overrides": { "@common-ui-alpha-telephone-field": { "@design-system-react": "npm:@[email protected]" }, "@design-system-react-alpha-telephone-field": { "@design-system-react": "npm:@[email protected]" } } Then in our code, we can conditionally render components:
// Import standard component import { StandardComponent } from 'common-ui'; // Import alpha component import { AlphaComponent } from 'common-ui-alpha-feature-name'; // Use feature flag to conditionally render function MyComponent(props) { return featureFlagEnabled ? <AlphaComponent {...props} /> : <StandardComponent {...props} />; } The problem
We need a way to tell npm:
"For the alpha version of common-ui, specifically use the alpha version of design-system-react, but for the standard version of common-ui, use the standard version of design-system-react."
➜ admin-ui git:(refactor/telephone-field) ✗ npm i npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: [email protected] npm error Found: @[email protected] npm error node_modules/@design-system-react npm error @design-system-react@"4.45.0" from the root project npm error npm error Could not resolve dependency: npm error peer overridden @design-system-react@"4.46.0-alpha.9" (was "^4.46.0-alpha.9") from @[email protected] npm error node_modules/@common-ui-alpha-telephone-field npm error @common-ui-alpha-telephone-field@"npm:[email protected]" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution. npm error npm error npm error For a full report see: npm error /Users/c_amehme/.npm/_logs/2025-04-11T16_48_09_693Z-eresolve-report.txt npm error A complete log of this run can be found in: /Users/c_amehme/.npm/_logs/2025-04-11T16_48_09_693Z-debug-0.log ➜ admin-ui git:(refactor/telephone-field) ✗ Question
How can we properly configure npm to use the alpha version of design-system-react only for our alpha version of common-ui, while keeping the standard dependencies intact?
Any insights would be greatly appreciated!
