# Load ACF JS to initialize acf per ajax calls

**URL:** https://discourse.roots.io/t/load-acf-js-to-initialize-acf-per-ajax-calls/20700
**Category:** sage
**Tags:** sage9
**Created:** 2021-04-28T19:38:41Z
**Posts:** 9

## Post 1 by @matteo_maria_ambrogi — 2021-04-28T19:38:41Z

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!

---

## Post 2 by @strarsis — 2021-04-29T16:14:06Z

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).

---

## Post 3 by @matteo_maria_ambrogi — 2021-04-29T16:52:14Z

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)
```

---

## Post 4 by @strarsis — 2021-04-29T17:01:03Z

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

---

## Post 5 by @matteo_maria_ambrogi — 2021-04-29T17:20:30Z

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)
```

---

## Post 6 by @strarsis — 2021-04-30T14:34:39Z

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.

---

## Post 7 by @matteo_maria_ambrogi — 2021-05-02T09:12:47Z

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);`

---

## Post 8 by @strarsis — 2021-05-02T16:35:50Z

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:

> **[plugins_url() | Function | WordPress Developer Resources](https://developer.wordpress.org/reference/functions/plugins_url/)**
>
> Retrieves a URL within the plugins or mu-plugins directory.

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

---

## Post 9 by @system — 2021-06-09T19:38:41Z

This topic was automatically closed after 42 days. New replies are no longer allowed.