• 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

27

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
no replies

Have something to add?

Join the conversation