CODEWITHSUNDEEP
javascripthtmlnode.jswebpackuncaught-reference-error
JackG
JackG

Reputation: 73

"Uncaught ReferenceError: printMe is not defined" at onload method in HTML

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

Upvotes: 1

Views: 1332

Answers (1)

Samathingamajig
Samathingamajig

Reputation: 13283

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

Upvotes: 0

Related Questions