CODEWITHSUNDEEP
javascripthtmlwebpackbabeljs
Mee-so Kim
Mee-so Kim

Reputation: 55

Webpack4 bundled function not defined

I made a bundle using webpack4. Making bundle file is perfect, but my simple website is not working.

I want to execute getApple() function after load html page. But what I get is error message function is not defined.

Below is my source code.

// index.js

function getApple () {
    console.log('getApple');
}

// ./dist/main.js
! function(t) {
    var a = {};

    function o(e) {
        if (a[e]) return a[e].exports;
        var n = a[e] = {
            i: e,
            l: !1,
            exports: {}
        };
        return t[e].call(n.exports, n, n.exports, o), n.l = !0, n.exports
    }
    o.m = t, o.c = a, o.d = function(e, n, t) {
        o.o(e, n) || Object.defineProperty(e, n, {
            enumerable: !0,
            get: t
        })
    }, o.r = function(e) {
        "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
            value: "Module"
        }), Object.defineProperty(e, "__esModule", {
            value: !0
        })
    }, o.t = function(n, e) {
        if (1 & e && (n = o(n)), 8 & e) return n;
        if (4 & e && "object" == typeof n && n && n.__esModule) return n;
        var t = Object.create(null);
        if (o.r(t), Object.defineProperty(t, "default", {
                enumerable: !0,
                value: n
            }), 2 & e && "string" != typeof n)
            for (var a in n) o.d(t, a, function(e) {
                return n[e]
            }.bind(null, a));
        return t
    }, o.n = function(e) {
        var n = e && e.__esModule ? function() {
            return e.default
        } : function() {
            return e
        };
        return o.d(n, "a", n), n
    }, o.o = function(e, n) {
        return Object.prototype.hasOwnProperty.call(e, n)
    }, o.p = "", o(o.s = 0)
}({
    "./index.js": function(module, __webpack_exports__, __webpack_require__) {
            "use strict";
            eval('__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _babel_polyfill__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/polyfill */ "./node_modules/@babel/polyfill/lib/index.js");\n/* harmony import */ var _babel_polyfill__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_polyfill__WEBPACK_IMPORTED_MODULE_0__);\n\n\nfunction getApple () {console.log('getApple');}
...

// index.php
<head>
    <script type="text/javascript" src="./dist/main.js<?php echo '?version=' . $_versionCode ?>"></script>
</head>
<body>
    <script>getApple(); // not working: Uncaught ReferenceError: getApple is not defined</script>
</body>

Would somebody help me please....

Upvotes: 0

Views: 300

Answers (1)

tmhao2005
tmhao2005

Reputation: 17524

It seems your function is in a module itself which means you can't get it via window object unless you publish it. So in order to invoke this, you might have to call your function inside the module or wait until your site loaded:

function getApple () {
  console.log('getApple');
}

getApple()

// OR

window.onload = () => getApple()

Or if you want to register your function with window then invoke later as you did:

function getApple () {
  console.log('getApple');
}

window.getApple = getApple;

Upvotes: 1

Related Questions