Adding javascript works in HTML block but battling with 'Cannot use import statement outside a module'

Need help
1

Hi all

I’m trying to add nimiq’s QR code scanner (qr-scanner CDN by jsDelivr - A CDN for npm and GitHub)

I can add the example code into a HTML block and it gives me a camera or file uploader. But I can’t access the variables/outputs from this to use for a workflow.

I think I need to add it more natively, i.e load the javascript on a page and call the camera or upload functions with actions, bubble parameters, workflows etc.

But each time I’ve tried to take it out of a HTML block and into a ‘run javascript’ action I get this warning:

Bug in custom code SyntaxError: Cannot use import statement outside a module

Here’s the HTML block (that works fine) and if I can use the QR result and/or the camera image result, I’d be happy. I’m just struggling to achieve this (with Toolbox).

	<h1>Scan from File:</h1>
	<input type="file" id="file-selector-x">
	<b>Detected QR code: </b>
	<span id="file-qr-result">None</span>
	
	<script type="module">
	    import QrScanner from "https://cdn.jsdelivr.net/npm/qr-scanner/qr-scanner.min.js";
	
	    const fileSelector2 = document.getElementById('file-selector');
	    const fileQrResult = document.getElementById('file-qr-result');

 const fileSelector = document.getElementById('cameraImage');

	    function setResult(label, result) {
	        console.log(result.data);
	        label.textContent = result.data;
	        label.style.color = 'teal';
	        clearTimeout(label.highlightTimeout);
	        label.highlightTimeout = setTimeout(() => label.style.color = 'inherit', 100);
	    }
	
	    // ####### File Scanning #######

	    cameraIma.addEventListener('change', event => {
	        const file = fileSelector.files[0];
	        if (!file) {
	            return;
	        }
	        QrScanner.scanImage(file, { returnDetailedScanResult: true })
	            .then(result => setResult(fileQrResult, result))
	            .catch(e => setResult(fileQrResult, { data: e || 'No QR code found.' }));
	    });
	</script>

Any help / pointers would be appreciated.

2

I think that making a plugin is the right way for anything need a code

3

thanks @salemmo409 for the reply. I have started to make it in the plugin builder but I did face the same challenge of it being a module. I’ll keep working at it with that approach - I’m just surprised how well it works in the HTML block and not with the js Toolbox plugin. I feel like I’m missing something about the way Bubble works / loads js (such as EMS or the version of node.js?)

4

This topic was automatically closed after 70 days. New replies are no longer allowed.