Can't use ACF javascript API on sage9?

sage
1

Hi Guys,

Anyone has tried to use the ACF javascript API on sage9?

I’m trying to do it on main.js but I got the error:

“Uncaught ReferenceError: acf is not defined”

I think might be the way that Sage enqueue ACF?

2

I do not have ACF with Sage9 on hand but I assume you expect acf to be a global variable.

So assuming that the file with acf variable is properly enqueued on the page you want to use it then you need to provide that variable name in the same way as Sage adds jQuery:

Obviously afterwards try to use it in a way similar to:

if (typeof acf != "undefined") {
    //your code here
}
3

Nice catch, I’ve added acf to externals like that:

externals: {
jquery: 'jQuery',
acf: 'acf'
},

Then I’ve did yarn build and yarn start but still doesn’t work. My ACF plugin it’s on the latest version and I’ve added a simple acf test on main.js on the jquery ready:

  if (typeof acf != "undefined") {
  var acfVersion = acf.get('acf_version');
  alert(acfVersion);
  }
4

Yes because as mentioned above - you need to make sure that on the page you are trying to use it -> the ACF (the plugin) is enqueuing the JS file with acf object inside - in case of ACF 5.7 its a acf-input.min.js file.
By default ACF loads it in the admin->custom fields (and probably on frontend forms).

5

If it is a global, you’ll need to add it to your .eslintrc.js file to get eslint to stop complaining:

globals: {
  wp: true,
  acf: true,
},

That will stop eslint from throwing an error during the build process, but, as @owi said, that won’t fix the problem if it’s not actually being loaded or defined anywhere, so you’ll need to check into when/how ACF loads its scripts. Like @owi I would assume that they are only available in the admin area by default.

6

Open the browser developer tools and test some ACF JS code in the console to check if it’s being loaded