Search code examples
javascripthtmlreactjswebpackslideshow

Html Doesnt read my js functions

Im using react to create a slideshow, the problem is that my html doesnt find the function to change the slide. It goes like this:

<!DOCTYPE html>
<html>
<body>
  <header Access-Control-Allow-Origin: *>
  </header>
  <main id="peli">
    <div id="root">
    </div>
    <script src="dist/app.bundle.js">plusSlides(2)</script>
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </main>
</body>
</html>

In my js file I have a ReactDOM.render to render my html and a function to change the slides, plusSlides, but for some reason the program cant find the function plusSlides. I use webpack to compile my file.

Solution

  • Webpack normally doesn't expose things to window. You are expected to initialise from javascript.
    But you can tell webpack to export a library which will work like you want.

    All you have to do is add this to the output config.

    output: {
    filename: 'app.js',
    library: 'webpackLib',
    libraryTarget: 'window',
},

    You have different options for the target, look in to documentation for more info.