Access to Button click handler not executing in a webpack project

Question

I have a very simple setup to understand the webpack basics. Below is my project structure

While running the project and upon clicking on the buttons in the index.html page, the handlers are not getting executed instead log errors in the console.

Please find the project here

This may be a very silly question, but I could not understand this behavior. Hope someone can help me with this. Thanks!

Jello · Accepted Answer · 2022-01-09 05:44:41Z

2

You can't use the functions unless you export them when you use webpack.

index.js

export function click_blue() { ... }
export function click_red() { ... }

webpack.config.js

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    library: 'lib',   // add this!
  },
  mode: 'development'
};

index.html

...
<button onclick="lib.click_red()">Red</button>
...

Check webpack output.library for more information.

answered Jan 9, 2022 at 5:44

Jello

4243 silver badges10 bronze badges

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

2 Comments

Hrusikesh Bunu Over a year ago

Thanks for your suggestion. I tried to add the library as you suggested and also looked into the webpack documentation, However, I still can not achieve the output. not sure if I am missing anything. I am sharing the link here while trying to access the lib it returns undefined

Jello Over a year ago

Remove type="module" attribute in script, and rebuild and refresh it. Try removing a cache too.

Collectives™ on Stack Overflow

Access to Button click handler not executing in a webpack project

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related