snc ui-component develop command getting SassError with now-select component

[TerrenceY]

Hi, any help would be much appreciated. I've added a now-select component to my custom component and now when I run the `snc ui-component develop` command I get the following error:

ERROR in ./node_modules/@servicenow/now-select/src/_now-select.scss (../../../../.snc/.extensions/ui-component/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!../../../../.snc/.extensions/ui-component/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!../../../../.snc/.extensions/ui-component/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[2].use[3]!../../../../.snc/.extensions/ui-component/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[4]!./node_modules/@servicenow/now-select/src/_now-select.scss)
Module build failed (from ../../../../.snc/.extensions/ui-component/node_modules/sass-loader/dist/cjs.js):
SassError: Undefined operation "2rem * var(--mv9-PvZT-PAtjp--8tAf8z-1Jrjt, 1)".
   ╷
26 │ $now-select_trigger--height: #{now-fn-px2rem(32px)} * #{$now-form-field--height-scale};
   │                              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@servicenow/now-select/src/_now-select.scss 26:30  root stylesheet
SassError: SassError: Undefined operation "2rem * var(--mv9-PvZT-PAtjp--8tAf8z-1Jrjt, 1)".
   ╷
26 │ $now-select_trigger--height: #{now-fn-px2rem(32px)} * #{$now-form-field--height-scale};
   │                              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@servicenow/now-select/src/_now-select.scss 26:30  root stylesheet
    at Object.loader (/Users/tyu/.snc/.extensions/ui-component/node_modules/sass-loader/dist/index.js:69:14)
 @ ./node_modules/@servicenow/now-select/src/_now-select.scss 2:21-534
 @ ./node_modules/@servicenow/now-select/src/now-select.js 4:0-40 702:2-8
 @ ./node_modules/@servicenow/now-select/src/index.js 1:0-22
 @ ./src/x-1448612-select-action-profile/index.js 4:0-32
 @ ./example/element.js 1:0-48

Here is my view:

import { createCustomElement } from "@servicenow/ui-core";
import snabbdom from "@servicenow/ui-renderer-snabbdom";
import "@servicenow/now-select";
import styles from "./styles.scss";

const view = ({ selectedActionProfile, properties }, { updateState }) => {
  return (
    <div>
      <div>
        <form name="xmActionList" novalidate="">
          <div className="form-group">
            <now-select
              className="form-control"
              items={properties.actionProfiles}
            />
          </div>
        </form>
      </div>
    </div>
  );
};

createCustomElement("x-1448612-select-action-profile", {
  renderer: { type: snabbdom },
  view,
  styles,
  initialState: {
    selectedActionProfile: {
      id: "1",
      label: "profile one",
    },
  },
  properties: {
    actionProfiles: {
      default: [
        {
          id: "1",
          label: "profile one",
        },
        {
          id: "2",
          label: "profile two",
        },
      ],
    },
  },
});

Here is my package.json:

{
  "name": "@xmatters/xmatters-action",
  "version": "0.0.1",
  "private": false,
  "description": "Select and render a custom form to submit to xMatters",
  "keywords": [
    "ServiceNow",
    "Next Experience UI Component",
    "@xmatters/xmatters-action"
  ],
  "readme": "./README.md",
  "engines": {
    "node": ">=14"
  },
  "module": "src/index.js",
  "dependencies": {
    "@servicenow/now-select": "quebec",
    "@servicenow/sass-kit": "quebec",
    "@servicenow/ui-core": "quebec",
    "@servicenow/ui-renderer-snabbdom": "quebec"
  },
  "devDependencies": {
    "@babel/runtime": "^7.18.9",
    "sass": "^1.53.0"
  }
}

[ArjunBasnet]

First of all make sure that you have upgraded to latest ui-component extension as outlined here: https://www.servicenow.com/community/next-experience-articles/upgrading-to-the-latest-version-of-now...

If you are using ui-component v26.x the part of reasons error occurs is due to change ins sass package. In my case I fixed the similar issue by patching the now-select component styles where the error was. The package itself hasn't been updates in long time.

I patched using patch-package, I could not find any other option. I hope these old packages do get updated.
 

[paki]

That is not a solution, though. Why does servicenow not update their package? Anyway, i'll create a HI Ticket.

We're even using ui-component v27 and we get the same error with the now-select component.

[Edvin-Karalius]

Did you ever get a response on that? I've got the same issue...
The now-select npm package hasn't been updated for 4 years...

[paki]

yes we did

https://developer.servicenow.com/dev.do#!/reference/next-experience/washingtondc/cli/cli

rather than loading the npm packages from public repository we should use the fa command when we develop:

fetch-assets-from-instance | fa:

[Experimental] - This is an experimental feature and is not expected to work for all scenarios at this time.

this will fetch the updated libraries directly from servicenow instance when you start your server locally. It also means you can basically delete all the servicenow npm dependencies for the components like now-select from package.json. I tried it and it works. The public libraries for cusotm components will not be updated anymore by servicenow.

The whole communication in regards to custom components is still confusing though. They told us to use node12 despite the documentation for Washington saying it supports node16.

Since Tokyo it even supports node22

https://developer.servicenow.com/dev.do#!/reference/next-experience/xanadu/cli/getting-started

Our ticket is still open. We do have other issues as well, not just the now-select component.