Hi,
We have an add-on in Adobe Express called "Print Your Own Labels" currently live, and I recently switched the environment from Node.js 19 to Node.js 20. After the upgrade, I noticed that some components are not loading as expected.
To troubleshoot, I upgraded the versions of Spectrum CSS and Web Components in my `package.json`. The current dependencies are:
"dependencies": {
"@spectrum-css/button": "^11.0.18",
"@spectrum-css/inlinealert": "^7.0.56",
"@spectrum-css/page": "^6.0.10",
"@spectrum-css/picker": "^8.3.0",
"@spectrum-css/typography": "^5.0.50",
"@spectrum-css/ui-icons": "^1.1.0",
"@spectrum-css/vars": "^9.0.8",
"@spectrum-web-components/alert-dialog": "^1.0.1",
"@spectrum-web-components/button": "^0.40.5",
"@spectrum-web-components/field-label": "^0.40.2",
"@spectrum-web-components/grid": "^0.40.2",
"@spectrum-web-components/menu": "^1.0.1",
"@spectrum-web-components/picker": "^1.0.1",
"@spectrum-web-components/progress-circle": "^1.0.1",
"@spectrum-web-components/radio": "^1.0.1",
"@spectrum-web-components/radio-group": "^0.1.18",
"@spectrum-web-components/reactive-controllers": "^1.0.1",
"@spectrum-web-components/textfield": "^0.40.2",
"@spectrum-web-components/theme": "^0.40.2",
"copy-webpack-plugin": "^6.4.1",
"css-loader": "^6.8.1",
"html-webpack-plugin": "^5.6.0",
"style-loader": "^3.3.3",
"svg-inline-loader": "^0.8.2",
"webpack": "^5.89.0",
"webpack-cli": "^4.10.0"
}
The imports in my code include:
import addOnUISdk from "https://new.express.adobe.com/static/add-on-sdk/sdk.js";
import '@spectrum-css/typography';
import '@spectrum-css/inlinealert';
import '@spectrum-web-components/button/sp-button.js';
import '@spectrum-web-components/theme/sp-theme.js';
import '@spectrum-web-components/theme/express/theme-darkest.js';
import '@spectrum-web-components/theme/express/theme-dark.js';
import '@spectrum-web-components/theme/express/theme-light.js';
import '@spectrum-web-components/theme/express/theme-lightest.js';
import '@spectrum-web-components/theme/express/scale-medium.js';
import '@spectrum-web-components/theme/express/scale-large.js';
import '@spectrum-web-components/progress-circle/sp-progress-circle.js';
import '@spectrum-web-components/field-label/sp-field-label.js';
import '@spectrum-web-components/grid/sp-grid.js';
import '@spectrum-web-components/radio-group';
import '@spectrum-web-components/radio/sp-radio.js';
import '@spectrum-web-components/picker/sp-picker.js';
import '@spectrum-web-components/menu/sp-menu-item.js';
import '@spectrum-web-components/alert-dialog/sp-alert-dialog.js';
import '@spectrum-css/icon';
While the `<sp-button>` component works correctly, the styles for `<sp-picker>` and `<sp-radio-group>` do not seem to apply. Below is a snippet of the code where this issue occurs:
<sp-field-label id="radioButtonTitle" style="margin-top: 24px"></sp-field-label>
<sp-radio-group id="rangeSelect" name="example" horizontal>
<sp-radio style="margin-right: 25px;" id="radio1" emphasized value="entireDocument"></sp-radio>
<sp-radio id="radio2" emphasized value="currentPage" checked></sp-radio>
</sp-radio-group>
<sp-field-label id="dropdownTitle" style="margin-top: 16px;"></sp-field-label>
<sp-picker label="File format" value="png" id="formatSelect" style="width: 100%;">
<sp-menu-item id="dropdown1" value="png" selected></sp-menu-item>
<sp-menu-item id="dropdown2" value="jpg"></sp-menu-item>
</sp-picker>
Do you have any suggestions on why the styles for `<sp-picker>` and `<sp-radio-group>` might not be applying?
Here’s the private link to our app for further context:
https://adobesparkpost.app.link/TR9Mb7TXFLb?mode=private&claimCode=wn33hlgjk:YP54P1PO
Thanks in advance!
Best regards,
Ada
AdChoices