How to use web components in WebIQ

[IAN_]

Hello everyone, I apologize in advance since I am not a web developer and I am struggling with this.

I want to use the Open Bridge web components, I tried the ones already provided by SmartHMI but I want to use the new ones from Open Bridge 5.0 . I followed the instructions on the Open Bridge github but when applying that to WebIQ it gives me errors with the Import

Uncaught SyntaxError: Cannot use import statement outside a module

How am I supposed to use this kind of web components in WebIQ? Is it just not possible or do I have to manually adapt the components as it is shown in the "lib-openbridge" and other examples given by SmartHMI?

Thank you for your help.

[webiq-sk]

This explains the error and possible solution: https://stackoverflow.com/a/78176180

If I were you I'd check if there is a non-module version of OpenBridge and use that - the one we used is not a module: https://demo.smart-hmi.com/openbridge/js/custom-libs/openbridge.js

[IAN_]

How can I add the type="module" to a local script?

[webiq-sk]

If I were you I'd check if there is a non-module version of OpenBridge and use that - the one we used is not a module: https://demo.smart-hmi.com/openbridge/js/custom-libs/openbridge.js

Did you check that such a version does *not* exist? If it is, it's very easy.

Otherwise it's currently more complicated.

[AndreasL]

You can transform the original module based javascript to plain javascript using a bundler.

For instance using rollup and rollup.config.js

export default {
	input: 'src/main.js',
	output: {
		file: 'dist/bundle.js',
		format: 'iife'
	}
};

The resulting bundle.js will be a vanilla javascript file without any external dependencies.