Linked Questions

Popular Questions

I am just scratching the surface of building my development environment with webpack, webpack-dev-server, and hot module reloading. I want to eventually be able to add react components to a primarily static site (so that I get the SEO benefit of having crawlable html. I've decided that I will not use Gulp or Grunt, instead I'll solely use npm scripts to run shell commands for the development, testing, building, and publishing.

Returning to the title/topic of this question. I have not been able to get browsers to read my bundle.js file generated by webpack. I've boiled my library down to the simplest index.html and index.js that you can see below.

The error output to the console is:

Uncaught ReferenceError: handleClick is not defined
at HTMLButtonElement.onclick ((index):7)

The emitted bundle.js file must be where the error is:

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/
/******/        // Check if module is in cache
/******/        if(installedModules[moduleId]) {
/******/            return installedModules[moduleId].exports;
/******/        }
/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {}
/******/        };
/******/
/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/        // Flag the module as loaded
/******/        module.l = true;
/******/
/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }
/******/
/******/
/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;
/******/
/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;
/******/
/******/    // define getter function for harmony exports
/******/    __webpack_require__.d = function(exports, name, getter) {
/******/        if(!__webpack_require__.o(exports, name)) {
/******/            Object.defineProperty(exports, name, {
/******/                configurable: false,
/******/                enumerable: true,
/******/                get: getter
/******/            });
/******/        }
/******/    };
/******/
/******/    // getDefaultExport function for compatibility with non-harmony modules
/******/    __webpack_require__.n = function(module) {
/******/        var getter = module && module.__esModule ?
/******/            function getDefault() { return module['default']; } :
/******/            function getModuleExports() { return module; };
/******/        __webpack_require__.d(getter, 'a', getter);
/******/        return getter;
/******/    };
/******/
/******/    // Object.prototype.hasOwnProperty.call
/******/    __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";
/******/
/******/    // Load entry module and return exports
/******/    return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {

const handleClick = () => {
  document.getElementById("demo").innerHTML = "Hello World!";
};

/***/ })
/******/ ]);

My index.html file:

<html>
<body>

<p id="demo">Simple JS demo</p>

<script src="bundle.js"></script>
<button type="button" onclick='handleClick()'>Click Me!</button>

</body>
</html>

My index.js file:

const handleClick = () => {
  document.getElementById("demo").innerHTML = "Hello World!"
}

My webpack.config.js file:

const config = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: '/home/andrew/code/my-site/public',
  },
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
        }
      }
    ]
  }
};

module.exports = config;

My npm start script:

  "scripts": {
    "start": "webpack-dev-server --content-base public/"
  }

I have webpack installed globally so I can generate the bundle.js file in the public/ folder with the command webpack, though npm start emits the bundle.js file anyways.

There's got to be some simple error that I'm making.

solution via @Marek Takac: The error here is that the scope of the handleClick() function is not global. This can be remedied by exporting the module from within the index.js file

module.exports = {
  handleClick: handleClick
}

and using webpack's output.library and output.libraryTarget options to define a global variable.

See also webpack's exports-loader

Related Questions