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