Usage of OOTB component not working in custom component

[Bjoern_Pfoster]

My goal is, to use an OOTB component (e.g. now-content-tree) in my custom component.

To achieve this, I followed the tutorial on docs.service-now.com. 

My src/my-component/index.js file looks like this

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

import '@servicenow/now-content-tree';

const view = (state, { updateState }) => {
	return (
		<div>
			My custom content tree:
			<now-content-tree items={[/* items here */]} select="single" show-presence-pattern={true} search-term=""></now-content-tree>
		</div>
	);
};

createCustomElement('simple-tree', {
	renderer: {
		type: snabbdom
	},
	view,
	styles,
});

However, if I run the "develop" command of the snc cli, I receive an error, that the ServiceNow components could not been parsed by the source-map-loader.

$ snc ui-component develop
Running component locally...
(node:4308) Warning: Accessing non-existent property 'MODULE_ROOT' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
Proxy server connecting to https://myinstance.service-now.com
(node:4469) Warning: Accessing non-existent property 'MODULE_ROOT' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
clean-webpack-plugin: /Users/me/Code/servicenow/my-component/dist is outside of the project root. Skipping...
10% building 1/1 modules 0 active(node:4475) Warning: Accessing non-existent property 'MODULE_ROOT' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
ℹ ｢wds｣: Project is running at http://localhost:8081/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/me/Code/servicenow/my-component/dist, /Users/me/Code/servicenow/my-component/node_modules/sn-polyfills/dist
ℹ ｢wds｣: 404s will fallback to /index.html
✖ ｢wdm｣: 
ERROR in ../node_modules/@servicenow/now-button/src/now-button-bare.js 11:3
Module parse failed: Unexpected token (11:3)
File was processed with these loaders:
 * ../node_modules/source-map-loader/index.js
You may need an additional loader to handle the result of these loaders.
|       if (icon) {
|               return (
>                       <now-icon
|                               className={
|                                       size === 'lg'
 @ ../node_modules/@servicenow/now-button/src/index.js 2:0-27
 @ ../node_modules/@servicenow/now-content-tree/src/now-content-tree.js
 @ ../node_modules/babel-loader/lib??ref--8-0!../node_modules/source-map-loader!../node_modules/@servicenow/now-content-tree/src/index.js
 @ ../node_modules/@servicenow/now-content-tree/src/index.js-exposed
 @ ../src/simple-tree/index.js
 @ ./element.js
 @ multi ../node_modules/error-overlay-webpack-plugin/lib/entry-basic.js ../node_modules/error-overlay-webpack-plugin/lib/entry-devserver.js? ../node_modules/@servicenow/cli-component-archetype-dev/node_modules/webpack-dev-server/client?http://localhost:8081 ../node_modules/webpack/hot/dev-server.js ./element.js

[ this error repeats for multiple ServiceNow components, truncated from here on ... ]

At this point, I am pretty clueless what to do. I already had a look at multiple other community posts, but none helped.
Adjusting the import of the now-content tree to "@servicenow/now-content-tree/index" removes the error, but it fails to apply the component to the DOM (like it would not have been loaded).

#ui-builder #component #custom-app

[Bjoern_Pfoster · Accepted solution]

The problem could be located. I setup the component using the snc CLI. During the setup, I used the "--offline" flag for the initialization of the component.

I re-initialized the project without this flag and it worked.

Also it is crucial to note that Node must be version 14 (14.21.1 on my machine) and NPM must be version 6 (6.14.18 on my machine). 

[Laci1488]

Hi, maybe I figured out what really caused this proplem. You have to install the OOTB komponent and import into the code before you run the "snc ui-component develop" command. If you see this error message, just type ctrl + c in the terminal (it will stop the local development process) and run the "snc ui-component develop" command again.

I hope I've helped you dear readers.