wordpress webpack javascript function not found from Theme

Question

my alertHi.js will be loaded but i cant use it from the Theme.

JS-Source alertHi.js:

this ( inc/Components/Darkmode/src/alertHi.js ) will be executed when i load the page:

function alertHi(){ alert('hi') }
alertHi();
console.log('is loaded');

But

html-Source

<a onclick="alertHi()">☀️</a>

creates this error:

Error: alertHi is not defined

but if i call the function alertHi() from the page i get Error:

Uncaught ReferenceError: alertHi is not defined
    onclick http://localhost/wordpress/:1

Any idea?

JS-Min-Source dist/alertHi.min.js:

webback has generated dist/alertHi.min.js

/******/ (() => { // webpackBootstrap
/******/    // The require scope
/******/    var __webpack_require__ = {};
/******/    
/************************************************************************/
/******/    /* webpack/runtime/make namespace object */
/******/    (() => {
/******/        // define __esModule on exports
/******/        __webpack_require__.r = (exports) => {
/******/            if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/                Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/            }
/******/            Object.defineProperty(exports, '__esModule', { value: true });
/******/        };
/******/    })();
/******/    
/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be isolated against other entry modules.
(() => {
/*!*************************************************!*\
  !*** ./inc/Components/Darkmode/src/alertHi.js ***!
  \*************************************************/
function alertHi() {
  alert('alertHi says hello :)');
}
alertHi();
console.log('script loaded');
})();

// This entry need to be wrapped in an IIFE because it need to be in strict mode.
(() => {
"use strict";
/*!***************************************************!*\
  !*** ./inc/Components/Darkmode/src/alertHi.scss ***!
  \***************************************************/
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin

})();

/******/ })()
;
//# sourceMappingURL=alertHi.min.js.map

was reading before:

and tried a tip read here Cannot call javascript function in wordpress

but get the error jQuery is not defined

will also not be found if i using

(function($) {
    function alertHi(){
       alert('hi')
    }
})(jQuery);

"webback has generated dist/darkmode.min.js" - and where does that actually get embedded now - in the head, or the footer? — C3roe
– C3roe, Commented Sep 22, 2022 at 10:30
<a onclick="alertHi()">☀️</a> - why would something this "ugly" be in your theme file to begin with; why is the click handler not added via JavaScript / jQuery? — C3roe
– C3roe, Commented Sep 22, 2022 at 10:32
@CBroe its not embedded in the head and not in the footer. is it not embedded then? maybe this is the reason. wondering that i get the alert message when i load the page but this error (not defined) if i press the link. — SL5net
– SL5net, Commented Sep 22, 2022 at 10:38
Well if it wasn't included at all, you could hardly get the alert. Maybe it gets combined into one single JS resource, together with the code from other files ...? — C3roe
– C3roe, Commented Sep 22, 2022 at 10:39
@CBroe i don't know why the click i added like so. is it wrong? it works if i put the js-Souce into the page single.php — SL5net
– SL5net, Commented Sep 22, 2022 at 10:41

bugkiller · Accepted Answer · 2022-09-22 11:04:06Z

2

webpack by default wraps all of the bundle internally, you can't access it externally unless explicitly setting it in the webpack config as a library. you can also hack it out and add window.alertHi = alertHi in your js code but this is not recommended.

please refer to webpack's configuration API and set your bundle output to be a library. (preferably - UMD/commonjs library)

answered Sep 22, 2022 at 11:04

bugkiller

1841 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SL5net Over a year ago

but it runs when page loaded. It just can't be executed later from the page. Does it make sense?

SL5net · Accepted Answer · 2022-09-22 16:38:21Z

0

inspired by answers below this question ( Define global variable with webpack ) and this answer here https://stackoverflow.com/a/35825562/2891692 i found a solution:

Use the global window object

window.alertHi = function (){ alert('hi') }

edited Sep 22, 2022 at 16:38

answered Sep 22, 2022 at 12:58

SL5net

2,6305 gold badges32 silver badges51 bronze badges

1 Comment

bugkiller Over a year ago

this is more of a hack rather than the right solution. the right solution would be to configure webpack to output your bundle as a library and then it will already define it on your window object to use as you wish. please take a look - webpack.js.org/configuration/output/#outputlibrary

Collectives™ on Stack Overflow

wordpress webpack javascript function not found from Theme

JS-Source alertHi.js:

html-Source

Error: alertHi is not defined

JS-Min-Source dist/alertHi.min.js:

was reading before:

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

JS-Source alertHi.js:

html-Source

Error: alertHi is not defined

JS-Min-Source dist/alertHi.min.js:

was reading before:

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related