Error: Exit 2 on wc-dev start

[LukasMetzger]

Bug Description

After creating a new web component project via the command npm init @ui5/webcomponents-package and installing the corresponding node modules, the live server only starts a few times (package version = "@ui5/webcomponents-tools": "2.19.2"). After installing package @ui5/webcomponents version 2.19.2, both the start and build scripts throw the following error:

`Error executing commands: Error: Exit 2
at ChildProcess. (/home/user/projects/example-project/node_modules/@ui5/webcomponents-tools/bin/ui5nps.js:231:38)
at ChildProcess.emit (node:events:536:35)
at maybeClose (node:internal/child_process:1101:16)
at ChildProcess._handle.onexit (node:internal/child_process:304:5)
node:child_process:957
throw err;
^

Error: Command failed: ui5nps "start"
at genericNodeError (node:internal/errors:983:15)
at wrappedFn (node:internal/errors:537:14)
at checkExecSyncError (node:child_process:882:11)
at Object.execSync (node:child_process:954:15)
at Object. (/home/user/projects/example-project/node_modules/@ui5/webcomponents-tools/bin/dev.js:22:15)
at Module._compile (node:internal/modules/cjs/loader:1562:14)
at Object..js (node:internal/modules/cjs/loader:1699:10)
at Module.load (node:internal/modules/cjs/loader:1313:32)
at Function._load (node:internal/modules/cjs/loader:1123:12)
at TracingChannel.traceSync (node:diagnostics_channel:322:14) {
status: 1,
signal: null,
output: [ null, null, null ],
pid: 25208,
stdout: null,
stderr: null
}`

Affected Component

@ui5/webcomponents-tools

Expected Behaviour

The command wc-dev start should start the live server as usual

Isolated Example

No response

Steps to Reproduce

1. Create a new component by using npm init @ui5/webcomponents-package
2. Install package @ui5/webcomponents using npm install @ui5/webcomponents
3. Try to start the webserver using npm runs start

Log Output, Stack Trace or Screenshots

@example-project start
wc-dev start

Error executing commands: Error: Exit 2
at ChildProcess. (/home/user/projects/example-project/node_modules/@ui5/webcomponents-tools/bin/ui5nps.js:231:38)
at ChildProcess.emit (node:events:536:35)
at maybeClose (node:internal/child_process:1101:16)
at ChildProcess._handle.onexit (node:internal/child_process:304:5)
node:child_process:957
throw err;
^

Error: Command failed: ui5nps "start"
at genericNodeError (node:internal/errors:983:15)
at wrappedFn (node:internal/errors:537:14)
at checkExecSyncError (node:child_process:882:11)
at Object.execSync (node:child_process:954:15)
at Object. (/home/user/projects/example-project/node_modules/@ui5/webcomponents-tools/bin/dev.js:22:15)
at Module._compile (node:internal/modules/cjs/loader:1562:14)
at Object..js (node:internal/modules/cjs/loader:1699:10)
at Module.load (node:internal/modules/cjs/loader:1313:32)
at Function._load (node:internal/modules/cjs/loader:1123:12)
at TracingChannel.traceSync (node:diagnostics_channel:322:14) {
status: 1,
signal: null,
output: [ null, null, null ],
pid: 25208,
stdout: null,
stderr: null
}

Priority

High

UI5 Web Components Version

2.19.2

Browser

Chrome, Edge

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[nnaydenow]

Hi @LukasMetzger,

Could you please share the package.json of your project and the OS that you are running the project?

I'm testing on MacOS and it is working correctly with the steps that you've provided. I've tried to do some changes into the demo component and to restart few times the server.

Regards,
Nayden

[LukasMetzger]

Hi @nnaydenow,

I am testing on Windows in the SAP Business Application Studio using Edge as a Browser.

Attached you can find the package.json

package.json

Regards,
Lukas

[nnaydenow]

Hi Lukas,

As far as I tested I'm not able to reproduce the problem. Could you try to reinstall your npm dependencies?

[LukasMetzger]

Hi @nnaydenow,

I tried that multiple times, created multiple new projects and even a new dev space in the BAS. The error still persists. That makes it impossible to develop components, because the build script fails as well.

[LukasMetzger]

Hi @nnaydenow,

I just checked again and was able to narrow down the issue. For that I created a new project via:

npm init @ui5/webcomponents-package

After that I installed @ui5/webcomponents via:

npm install @ui5/webcomponents

After integration into the MyFirstComponentTemplate.tsx the error starts to appear in the following scenarios:

Version 1 - Works

MyFirstComponentTemplate.tsx

Version 2 - Does not work

MyFirstComponentTemplate2.tsx

Interesting here, if I start the first version via the start script, the live server starts and I am able integrate the following code in the component:

<ui5-bar> <ui5-file-uploader id="single-file-uploader"></ui5-file-uploader> </ui5-bar>

The component is rendering and the app works fine. As soon as I stop the script and try to restart it with code version 2, the error appears.

Maybe I am using the integration in the wrong way?

Thanks in advance!

Regards,
Lukas

[nnaydenow]

@LukasMetzger,

Thanks, that helps! I'll take a look now since I reproduced it.

[nnaydenow]

Hi again,

start command is failing due Typescript error:
src/MyFirstComponentTemplate.tsx(13,3): error TS2339: Property 'ui5-bar' does not exist on type 'JSX.IntrinsicElements'.

src/MyFirstComponentTemplate.tsx(14,4): error TS2339: Property 'ui5-file-uploader' does not exist on type 'JSX.IntrinsicElements'.
src/MyFirstComponentTemplate.tsx(14,49): error TS2339: Property 'ui5-file-uploader' does not exist on type 'JSX.IntrinsicElements'.
src/MyFirstComponentTemplate.tsx(15,3): error TS2339: Property 'ui5-bar' does not exist on type 'JSX.IntrinsicElements'.

You can switch to use classes which will be parsed by JSX later:

<ui5-bar>
	<ui5-file-uploader id="single-file-uploader"></ui5-file-uploader>
</ui5-bar>

to:

import FileUploader from "@ui5/webcomponents/dist/FileUploader.js";
import Bar from "@ui5/webcomponents/dist/Bar.js";

export default function MyFirstComponentTemplate(this: MyFirstComponent) {
	return (
<Bar>
	<FileUploader id="single-file-uploader"></FileUploader>
</Bar>
	);
}

[LukasMetzger]

Hi @nnaydenow,

thanks for looking into it. Your approach works for the Bar-Component, but for the FileUploader I still get:

'FileUploader' cannot be used as a JSX component. Its instance type 'FileUploader' is not a valid JSX element.

[nnaydenow]

Did you get that error from IDE or the console? Sometimes it need to restart typescript server by restarting the IDE.

[LukasMetzger]

I still get the error after a restart. The error message is the same, when using npm run start, as before implementing your changes. Same thing happens with the Table control.

[nnaydenow]

could you run: npm run start -- --verbose and to share the error?