onsubmit function fails to find function bundled by webpack

Question

I must be be missing something really basic with Webpack or JS. I just want to call a bundled function in a form's submit function. I get a function not found message and I can't figure out why.

Error index.html:13 Uncaught ReferenceError: double is not defined

index.html (closing tags removed for brevity)

<head>
    <script type="text/javascript" src="bundle.js"></script>
<body>
    <form name='myform' onsubmit="doStuff(event); return false;">
        <button type="submit">Press Me!</button>
    <script type="text/javascript">
        function doStuff(e) {
            e.preventDefault();
            console.log(double(32));
        }

abc.js (webpack entry point)

var a = require('./double');

double.js

function double(number) {
    return number * 2;
}
module.exports.double = double;

Bundle...

$ webpack abc.js bundle.js 
Hash: 0e65404017702c54dac5
Version: webpack 1.13.2
Time: 59ms
    Asset      Size  Chunks             Chunk Names
    bundle.js  1.58 kB       0  [emitted]  main
    [0] ./abc.js 28 bytes {0} [built]
    [1] ./double.js 80 bytes {0} [built]

Any help appreciated

Answer 1

The problem is trying to mix page and bundled JS. They're in different scope, hence the bundled method not being visible.

I moved the onsubmit function from the page to the entry file, running after window.load. The window object is of course global so the bundled code can add event handlers to any DOM element.

onsubmit function fails to find function bundled by webpack

Question

1 answers

solution1
2 2016-10-03 22:38:58

onsubmit function fails to find function bundled by webpack

Question

1 answers

solution1 2 2016-10-03 22:38:58

solution1
2 2016-10-03 22:38:58