Visualforce not defined

Question

i was doing a page/script/controller functionality just see how it works, and for some reason i get the error "Visualforce is not defined".

From what i got searching, this error shows when you dont add the controller to your page, but in my case it is there, heres the code:

Page:

<apex:page controller="ControllerTest" sidebar="false">
<apex:pageBlock>
<apex:pageBlockSection>
<p id="test">
Click
</p>
</apex:pageBlockSection>
</apex:pageBlock>
<apex:includeScript value="{!$Resource.testScript}" loadOnReady="true" />
</apex:page>

Script:

const button = document.getElementById("test");
console.log("Script OK");
Visualforce.remoting.timeout = 120000;
function testFunction(){
    Visualforce.remoting.Manager.invokeAction('ControllerTest.test', (result, event){
                                                  console.log("invokeAction Okay!");
                                              });
}

button.onclick = () => {
    testFunction();
}

Controller:

    public class ControllerTest{
    public ControllerTest(){}


    public static void test(){
        System.debug('Gotcha');
    }
}

Answer 1

You can't directly reference remoting functions within an external script. Either define them on your page or pass them around in a globally visible object. The latter would look something like:

<apex:page controller="MyController">
    (function (w) {
        "use strict";
        w.MyRemoter = w.MyRemoter || {};
        w.MyRemoter.invoke = Visualforce.remoting.Manager.invokeAction;
        Object.freeze(w.MyRemoter);
    }(window));
</apex:page>

Then in your script you can reference this object and invoke it:

(function (w) {
    "use strict";
    w.MyRemoter = w.MyRemoter || {};
    var myFunction = function () {
        w.MyRemoter.invoke('MyController.doStuff', function (result, event) {
            console.debug(result);
        });
    }
}(window));