Js file not read in .vm file

Jira Development Jira Server
, ,
1

Hello everyone,

I did this configuration in my atlassian-plugins

<web-resource key="mfj-qr-code-generator-resource" name="QR Code Resource">
        <dependency>com.atlassian.auiplugin:ajs</dependency>
        <dependency>com.atlassian.auiplugin:dialog2</dependency>
        <dependency> com.atlassian.auiplugin:aui-inline-dialog2</dependency>

        <resource type="download" name="qrCodeGenerator.js" location="/js/qrCodeGenerator.js"/>
    </web-resource>

 <web-item name="QR Code Generator" i18n-name-key="qr-code-generator.name" key="qr-code-generator-web-item" section="operations-top-level" weight="3">
        <description key="schedule-web-item.description">QR Code Generator</description>
        <label key="QR Code Generator"/>
        <link linkId="schedule-web-item-link">/secure/QRCodeGenerator.jspa?id=${issue.id}</link>
        <styleClass>trigger-dialog</styleClass>
    </web-item>
    <webwork1 key="mobile-for-jira-qr-code-generator-webwork">
        <actions>
            <action name="com.infosysta.jira.mobile.license.webAction.QRCodeGenerator" alias="QRCodeGenerator" roles-required="use">
                <view name="success">/templates/qrCodeGenerator.vm</view>
                <view name="error">/templates/license.vm</view>
                <view name="authentication-required">/templates/authentication-required.vm</view>
            </action>
        </actions>
    </webwork1>

and in my .vm file

<html>
<head>
    <title>Mobile for Jira</title>
    <meta name="decorator" content="atl.admin">
    <meta name="decorator" content="dialog">
    <meta name="admin.active.tab" content="jira-mobile-qr-generator-code-link">
    $webResourceManager.requireResource("com.infosysta.jira.mobile:mfj-qr-code-generator-resource")

    <title>QR Code Generator</title>
</head>
<body>
<div id="qr-code-generator-id">
</div>
</body>
</html>

and this is my react component

import React, {useEffect, useState} from "react";
import * as ReactDOM from "react-dom";
import {QRCode } from 'react-qrcode-logo';
import QR from "../../images/mfj-logo.png"

const QRCodeModal = () => {
        const [url, setUrl] = useState("")
    useEffect(() => {
        var urlsss = new URL(window.location.href);
        var param1 = urlsss.searchParams.get("issueKey");
        console.log("sssssssssss",param1)
        setUrl(url);
    }, []);

    return (
        <div >
                       <QRCode value={url}
                               style={{
                                   width:200,
                                   height:200
                               }}
                               logoImage={QR}
                               removeQrCodeBehindLogo={true}
                               logoPadding="5"
                               logoPaddingStyle="square"
                               qrStyle="squares"
                               eyeColor="#42526e"
                               fgColor="#42526e"
                               size="256"/>
                 </div>
    )
}

export default QRCodeModal;
// eslint-disable-next-line no-undef
AJS.toInit(function () {
        init_Analytics();
    function init_Analytics() {
        ReactDOM.render(<QRCodeModal/>, document.getElementById('qr-code-generator-id'));
    }
});

and I have the react js file render with id “qr-code-generator-id”
the dialog is opened but the component were not loaded why ?
please help me on this