• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

New Here ,
Nov 29, 2024 Nov 29, 2024

Copy link to clipboard

Copied

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

Bug Unresolved
TOPICS
Add-ons , Exporting and Sharing , Integrations

Views

48

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
2 Comments
Adobe Employee ,
Dec 09, 2024 Dec 09, 2024

Copy link to clipboard

Copied

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).

Votes

Translate

Translate

Report

Report
Adobe Employee ,
Dec 09, 2024 Dec 09, 2024

Copy link to clipboard

Copied

LATEST

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. 

Votes

Translate

Translate

Report

Report