Link to external Javascript - NOTE - not import external Javascript

I need to link to an external Javascript file so that my Laravel Nova component can work. In plain HTML or even plain Laravel this would be easy as there is an app layout file:

<script type='text/javascript' src='https://cdn.yodlee.com/fastlink/v3/initialize.js'></script>

But doing this in Nova is beyond my current skill set as there is no tangeble app layout that I can see. So I want to try to include the Javascript when my VueJS component loads. I'm happy to do it some other way as well but I can't figure it out.

Googling this appears to be hard because almost all results I get are people asking how to import (e.g. make part of). I can't do that. I need to directly link to my vendor's Javascript otherwise things don't work. The external Javascript does security stuff and loads an iFrame. Trying to load that in card.js freezes Nova completely just past liftoff.

My attempts have been exploring nova.mix.js and card.js and now webpack.mix.js .

But I simply don't know what to do next.

jlrdw

3 years ago

Level 75

A right click on page and view page source should show if it's loaded, and clicking link should show the js.

If that is not the case, check that the link is correct.

eugenefvdm

3 years ago

Level 31

@jlrdw thanks so much for replying. Why I struggled with this is when I just add the script tag to my Vue compenent, I get this error:

VueCompilerError: Single file component can contain only one <script> element

When I add it to card.js VSCode squacks with missing semi-colon error but type and src and </script> is underlined to I get the idea you can't just include an external URL in card.js.

As for adding it to nova.mix.js or webpack.mix.js, I have no idea where to start. Most examples on the internet assume you want to import the library. I just want to link to it.

In the end what worked was loading it asyncronously using a Promise. Seems like a very convoluted way of doing it but at least it works:

const loadScript = (FILE_URL, async = true, type = "text/javascript") => {
            return new Promise((resolve, reject) => {
                try {
                    const scriptEle = document.createElement("script");
                    scriptEle.type = type;
                    scriptEle.async = async;
                    scriptEle.src = FILE_URL;

                    scriptEle.addEventListener("load", (ev) => {
                        resolve({ status: true });
                    });

                    scriptEle.addEventListener("error", (ev) => {
                        reject({
                            status: false,
                            message: `Failed to load the script ＄{FILE_URL}`
                        });
                    });

                    document.body.appendChild(scriptEle);
                } catch (error) {
                    reject(error);
                }
            });
        };

        loadScript("https://cdn.yodlee.com/fastlink/v3/initialize.js")
            .then(data => {
                console.log("Fastlink loaded successfully", data);
            })
            .catch(err => {
                console.error(err);
            });

For now I've added the script to mount() in the Vue component but I see it also works in card.js

Would have been easier, if possible, to just "include" it somewhere.

Please or to participate in this conversation.