1

I'm currently trying to get started using webpack and ran into "Uncaught ReferenceError: printMe is not defined" error when trying to call my "init" method from HTML using the onload tag despite exporting the methods. My files are as follows:

print.js (located in /resources/static):

export function printMe() {
    console.log("Hi");
}

index.js (located in /resources/static):

import {printMe} from "./print";


export function component() {
    const element = document.createElement('div');
    const btn = document.createElement('button');
    btn.innerHTML = 'Click me and check the console!';
    btn.onclick = printMe;
    element.appendChild(btn);

    return element;
}

export function init() {
    console.log("init ran");
}
document.body.appendChild(component());

webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: {
        index: './resources/static/index.js',
    },
    devtool: 'inline-source-map',
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Output Management',
        }),
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        clean:true,
    },

};

index.html (located in /dist):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Output Management</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="index.bundle.js"></script></head>
  <body onload="init()">
  </body>
</html>

index.bundle.js (located in /dist) I'm not going to include this file as I don't believe it to be necessary to the solution, although is important to note that it is actually there. Any help is appreciated

Jack Gitter
  • 43
  • 1
  • 7
  • Even though you say `export`, I think that webpack isn't including it in your bundle since you never use the function in the JavaScript code. You'll either need a plugin to monitor your HTML, or use `addEventListener` on the body to add an "onLoad" event handler – Samathingamajig Mar 23 '22 at 14:57

1 Answers1

0

Even though you say export, I think that webpack isn't including it in your bundle since you never use the function in the JavaScript code. You'll either need a plugin to monitor your HTML, or use addEventListener on the body to add an "onLoad" event handler.

The simplest way to do this is with the event listener (don't include parentheses after init; see Why is the method executed immediately when I use setTimeout?):

document.body.addEventListener('load', init);
Samathingamajig
  • 11,839
  • 3
  • 12
  • 34
  • After removing the parenthesis, it actually no longer works and is still resulting in the same Uncaught Reference error. Any other tips? I added that line in the multi.js file and actually removed the init() call from the multi.html file, rebuild the project in hopes that the init() call would be generated by the javascript, but no luck. I also tried to keep the init() call but that's where the uncaught reference error was still happening. – Jack Gitter Mar 23 '22 at 17:22
  • As a side note, I got this working by saying window.init = init, although I would like to not use the global scope since it kind of goes against what I'm trying to achieve with webpack. I Also tried to do document.body.addEventListener('load',init); and import the script at the bottom of the HTML body, although still no luck – Jack Gitter Mar 23 '22 at 18:49
  • Did you try putting the addEvLis inside the `index.js` file? – Samathingamajig Mar 23 '22 at 18:53
  • Yes, I tried adding document.body.addEventListener('load',init); inside of my index.js but still no luck – Jack Gitter Mar 23 '22 at 19:39