Load ACF JS to initialize acf per ajax calls

sage
1

hello guys,

having some issue to initalize “act” variable to manage acf_form AJAX submission…

loaded the JS in the file using it:

single.js

import acf from '../../../../../../plugins/advanced-custom-fields-pro/assets/js/acf-input.min';

no errors, on compile but on page load

acf-pro-input.min.js:1 Uncaught ReferenceError: acf is not defined
    at acf-pro-input.min.js:1
    at Object.<anonymous> (acf-pro-input.min.js:1)
    at Object.<anonymous> (acf-pro-input.min.js:1)
    at __webpack_require__ (bootstrap f832f27f0a7614de2f52:678)
    at fn (bootstrap f832f27f0a7614de2f52:88)
    at Object.<anonymous> (single.js:1)
    at Object.<anonymous> (single.js:837)
    at __webpack_require__ (bootstrap f832f27f0a7614de2f52:678)
    at fn (bootstrap f832f27f0a7614de2f52:88)
    at Object.<anonymous> (main.js:1)
(anonymous) @ acf-pro-input.min.js:1
(anonymous) @ acf-pro-input.min.js:1
(anonymous) @ acf-pro-input.min.js:1
__webpack_require__ @ bootstrap f832f27f0a7614de2f52:678
fn @ bootstrap f832f27f0a7614de2f52:88
(anonymous) @ single.js:1
(anonymous) @ single.js:837
__webpack_require__ @ bootstrap f832f27f0a7614de2f52:678
fn @ bootstrap f832f27f0a7614de2f52:88
(anonymous) @ main.js:1
(anonymous) @ main.js:29
__webpack_require__ @ bootstrap f832f27f0a7614de2f52:678
fn @ bootstrap f832f27f0a7614de2f52:88
(anonymous) @ addStyles.js:398
__webpack_require__ @ bootstrap f832f27f0a7614de2f52:678
(anonymous) @ bootstrap f832f27f0a7614de2f52:724
(anonymous) @ bootstrap f832f27f0a7614de2f52:724

any hint?

ty!

2

acf-pro-input.min.js uses an acf global from probably a more general acf.min.js, which then also has to be imported or enqueued (but then declared as a global in eslint/wepback configuration).

3

ty @strarsis but no good news :frowning:

I have updated webpack.config.js according to some older post found here:

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

updated the act import, to a more general one:
import acf from '../../../../../../plugins/advanced-custom-fields-pro/pro/assets/js/acf-pro-input';
note this is not imported in main.js but on single.js

but error persists :frowning:

Uncaught ReferenceError: acf is not defined
    at acf-pro-input.js:3
    at Object.<anonymous> (acf-pro-input.js:531)
    at Object.<anonymous> (acf-pro-input.js:1853)
    at __webpack_require__ (bootstrap e2544497300e4d128db3:678)
    at fn (bootstrap e2544497300e4d128db3:88)
    at Object.<anonymous> (single.js:1)
    at Object.<anonymous> (single.js:834)
    at __webpack_require__ (bootstrap e2544497300e4d128db3:678)
    at fn (bootstrap e2544497300e4d128db3:88)
    at Object.<anonymous> (main.js:1)
4

assets/js/acf-pro-input- hm, this looks like the JS file for a ACF PRO input field.

5

ok, tried something different, less… picky :smiley:

import acf from '../../../../../../plugins/advanced-custom-fields-pro/assets/js/acf';

this went a bit ahead but, compiled, part of js is loading, but still have some error:

WARINING

jquery.js?ver=3.5.1:4046 jQuery.Deferred exception: __WEBPACK_IMPORTED_MODULE_2__plugins_advanced_custom_fields_pro_assets_js_acf___default.a.addAction is not a function TypeError: __WEBPACK_IMPORTED_MODULE_2__plugins_advanced_custom_fields_pro_assets_js_acf___default.a.addAction is not a function
    at HTMLDocument.<anonymous> (https://localhost:3000/app/themes/sage/dist/scripts/main.js:25625:103)
    at mightThrow (https://localhost:3000/wp/wp-includes/js/jquery/jquery.js?ver=3.5.1:3762:29)
    at process (https://localhost:3000/wp/wp-includes/js/jquery/jquery.js?ver=3.5.1:3830:12) undefined

ERROR:

jquery.js?ver=3.5.1:4055 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_2__plugins_advanced_custom_fields_pro_assets_js_acf___default.a.addAction is not a function
    at HTMLDocument.<anonymous> (single.js:773)
    at mightThrow (jquery.js?ver=3.5.1:3762)
    at process (jquery.js?ver=3.5.1:3830)
6

Alright, I checked out the source myself (I am also an owner of ACF PRO) and found out that these script files don’t export JavaScript modules, but rather attach to a global (window) variable.
Hence webpack will not be able to use it as a module - and it doesn’t do these checks during build but rather during runtime.

Therefore you have to import it not as symbol:

require('../../../../../../plugins/advanced-custom-fields-pro/assets/js/acf');

(or import syntax)
You have to configure webpack/ESLINT to expect acf being a global (window) variable (apparently you already did).

Or you just enqueue that script from within your theme/plugin.

7

ty @strarsis I think I finally managed by enqueing in setup.php.

do you think I may face issues when building and deploying, since I am including from a weird path…
wp_enqueue_script('sage/acf-input.min.js', asset_path('../../../plugins/advanced-custom-fields-pro/assets/js/acf.js'), ['jquery'], null, true);

8

Technically this is a not an asset path (that is resolved by Sage runtime into an URL) but a plugin url.
Therefore you should use the plugins_url method to enqueue that URL directly:

wp_enqueue_script('sage/acf-input.min.js', plugins_url('advanced-custom-fields-pro/assets/js/acf.js'), ['jquery'], null, true);