And the components.json :  { "files": { "css": ["styles/web/css/main.css"], "js": ["mxclientsystem/mxui/mxui.js","test/test.js"] }, "cachebust": "{{cachebust}}" }   I then put the Javascript action in a nanoflow and simply put a nanoflow call button on the Homepage to test my Javascript action. The result is the following after two clicks on the button :  It looks like the Javascript action manages to find the module and the module is exported on the first click, however it cannot then find the function in the module. I am probably doing something wrong but I don’t know where, if someone can explain to me how and why it works on Noty, or help me on resolving this issue, it would be awesome ! Thank you very much !  ">
  And the components.json :  { "files": { "css": ["styles/web/css/main.css"], "js": ["mxclientsystem/mxui/mxui.js","test/test.js"] }, "cachebust": "{{cachebust}}" }   I then put the Javascript action in a nanoflow and simply put a nanoflow call button on the Homepage to test my Javascript action. The result is the following after two clicks on the button :  It looks like the Javascript action manages to find the module and the module is exported on the first click, however it cannot then find the function in the module. I am probably doing something wrong but I don’t know where, if someone can explain to me how and why it works on Noty, or help me on resolving this issue, it would be awesome ! Thank you very much !  ">
  And the components.json :  { "files": { "css": ["styles/web/css/main.css"], "js": ["mxclientsystem/mxui/mxui.js","test/test.js"] }, "cachebust": "{{cachebust}}" }   I then put the Javascript action in a nanoflow and simply put a nanoflow call button on the Homepage to test my Javascript action. The result is the following after two clicks on the button :  It looks like the Javascript action manages to find the module and the module is exported on the first click, however it cannot then find the function in the module. I am probably doing something wrong but I don’t know where, if someone can explain to me how and why it works on Noty, or help me on resolving this issue, it would be awesome ! Thank you very much !  ">
Trying to use an external module using Javascript action - Mendix Forum

Trying to use an external module using Javascript action

0

Hello,

I am trying to use a simple external Javascript module (test/test.js) I made in a Javascript action I created.

I tried to follow the steps from this link (Section 2.2.6 Using External Dependencies in the Browser).

Here is my module (test.js in a ‘test’ folder in the ‘theme’ folder of the project) : 

module.exports = {
    hello: function() {
       return "Hello";
    }
}

 

Here is the Javascript action : 

// BEGIN USER CODE
	const myModule = require(["test/test.js"]);
	let val = myModule.hello(); // val is "Hello"   
	return myModule;
// END USER CODE

 

Here is the index.html : 

<body dir="ltr">
        <div id="content"></div>
        <script>
            dojoConfig = {
                baseUrl: "mxclientsystem/dojo/",
                cacheBust: "{{cachebust}}",
                rtlRedirect: "index-rtl.html"
            };
        </script>
        <script>
            if (!document.cookie || !document.cookie.match(/(^|;)originURI=/gi))
                document.cookie = "originURI=/login.html";
        </script>
        <script src="mxclientsystem/mxui/mxui.js?{{cachebust}}"></script>
        <script src="test/test.js?{{cachebust}}"></script> 
</body>

 

And the components.json : 

{
    "files": {
        "css": ["styles/web/css/main.css"],
        "js": ["mxclientsystem/mxui/mxui.js","test/test.js"]
    },
    "cachebust": "{{cachebust}}"
}

 

I then put the Javascript action in a nanoflow and simply put a nanoflow call button on the Homepage to test my Javascript action.

The result is the following after two clicks on the button : 

It looks like the Javascript action manages to find the module and the module is exported on the first click, however it cannot then find the function in the module.

I am probably doing something wrong but I don’t know where, if someone can explain to me how and why it works on Noty, or help me on resolving this issue, it would be awesome !

Thank you very much !

 

asked
2 answers
2

We described it the documentation 

https://docs.mendix.com/howto/extensibility/best-practices-javascript-actions#2-2-6-using-external-dependencies-in-the-browser

Is missing how to write a module, You could use the `define` function

Did you try to export as AMD module?

https://requirejs.org/docs/whyamd.html

Did give it a try, seems to work with the following sample

Create module from within the  JS Action

function TestExternal(message) {
    // BEGIN USER CODE
    addLib();

    require(["test"], function (test) {
        test.test(message);
    });

    function addLib() {
        try {
            require("test");
            return;
        }
        catch (e) {
            // Does not exist continue adding lib
        }
        define("test", [], function () {
            return {
                test: function(m) { console.log(m)}
            }
        });
    }
    return true;
    // END USER CODE
}

 

From external

function TestExternal(message) {
	// BEGIN USER CODE
    require(["test"], function (test) {
        test.test(message);
    });
    return true;
    // END USER CODE
}

 

Include extern from index.html

<script src="externalModule.js?{{cachebust}}"></script>

Add the externalModule.js in the theme folder of your projec

define("test", [], function () {
    return {
        test: function(m) { console.log(m)}
    }
});

 

 

 

answered
0

Apparently, the module.exports does not result in the availability of function hello. The three dots under the ‘module.exports’ indicate an error. Don’t know what error because test.js does look fine to me. No other code in test.js before module.exports? Do make your IDE (Visual Studio Code?) outline your code correctly, maybe something funny shows up.

Can you replace the images by code blocks so we can copy-paste when trying to reproduce your problem?

answered