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"
  }
}

[Edvin-Karalius]

Ohh thanx a lot for that info! It's like impossible to find anything about this.
Yeah... the UI Framework is quite janky. I've been told at least they are working on a replacement.
So the SN Cli will actually be replaced entirely with something new.

[Edvin-Karalius]

Nice... now i get these errors in the console and the application crashes.

As soon as i disable the imports of @Servicenow... components then it works.
Else it only works on the first load, then if i refresh the page. the api that fetches the components seems to just crash.

Did you ever have this issue?

[paki]

you can only remove the dependencies starting with (just to make sue, but i guess you did this)

@Servicenow/now-

those will be fetched.

dependencies like

@servicenow/ui-effect-amb

you still need to build locally. 

Are you using the newest CLI, Ui Components and at least node16? 

[Edvin-Karalius]

Yeah did that, didn't help. seems to be a chrome specific issue. Works with Edge

[paki]

I finally have a solution

you have to use the fetch-assets-from-instance command as documented here:

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

What I'd suggest is to use the latest cli and ui-component extension and node 16 or node 22 (if you're on Yokohoma at least)

scaffold a new project and you see what is needed in package.json and the other metadata files like now-cli.json

excerpt from our package.json

you have to remove all the packages from dependencies and remove package-lock.json and do npm install again

"dependencies": {

"@servicenow/ui-renderer-snabbdom": "^24.1.1",

"@servicenow/ui-effect-amb": "^24.1.1",

"@servicenow/ui-effect-http": "^24.1.1",

"@servicenow/ui-effect-graphql": "^24.1.1",

"@servicenow/sass-kit": "latest"

},

"devDependencies": {

"ajv": "^6.12.6",

"sass": "1.53.0"

},

to develop you need to run it like this (servicenow is basically the artefactory then and not public npm as servicenow is not updating there packages anymore on public artefactory)

develop --fetch-assets-from-instance --entry=./test.js

to deploy:

snc ui-component deploy --fetch-assets-from-instance --strict-validate-now-ui-json false --force

please mark my answer as solution if it works for you as well.

Unfortunately there's still a problem with servicenow/library-translate package. I've a pending HI case open for this.