Skip to main content
New Participant
November 29, 2024

Assistance Required with Spectrum Web Components Styles in Node.js 20 Environment

  • November 29, 2024
  • 2 replies
  • 318 views

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

2 replies

Kerri Shotts
Adobe Employee
Adobe Employee
December 9, 2024

May not be the actual problem, but spectrum web components prefer to all be on the same version, and I see mismatched versions in your package.json. 

ErinF
Adobe Employee
Adobe Employee
December 9, 2024

I'll pass this along to the team, however, you might try asking in our Add-on Developer Discord channel: http://discord.gg/nc3QDyFeb4 (if you haven't already).