为什么这个 JS 函数不能正确导入到我的blade.php？

Question

I have a JavaScript file, 'submittedForms.js' that I reference in my blade.php with

<script type="module" src="/js/bundle/charts/submittedForms.js"></script>

In submittedForms.js , I've defined a simple function called ' functionTest ' and a variable that represents a chart called ' submittedForms '. I want to import both in my blade.php. The chart variable imports and is rendered fine! However, when I add the function and alter the export to be;

module.exports = {
    functionTest() {
        console.log('this works');
    },
    submittedForms
};

the following error thrown from the blade pops up;

"Uncaught ReferenceError: functionTest is not defined"

In the blade.php I'm calling functionTest like this;

functionTest()

Answer 1

The issue here is because you're using module.export which is used for importing/requiring files between js file (this can be expanded on greatly but for the sake of the question I will keep it simple).

---

I would imagine that you're currently getting a warning in your console along the lines of:

Uncaught ReferenceError: module is not defined (Unless you have an )

---

To have you functionTest be available in your browser you can either define it as:

function functionTest() {
    console.log('this works');
}

which will attach it to the parent scope which in this case will be the window . Or you can explicitly attach it to the window object by:

or

window.functionTest = function () {
    console.log('this works');
}

---

If you're wanting to use the newer ES modules for importing/exporting this would be possible, however, support won't be that great at the time of writing. To achieve this you should change module.exports to export default :

export default {
    functionTest() {
        console.log('this works');
    },
    submittedForms
};

Then in your blade file you could import it inside a script tag with the attribute type="module" :

<script type="module"> //notice the 

    import submittedForms from "/js/bundle/charts/submittedForms.js";

    submittedForms.functionTest();

</script>

Answer 2

Right way to import JS file should look like this. Hopefully this will work.

<script src="{{ asset('js/bundle/charts/submittedForms.js')}}"></script>