CODEWITHSUNDEEP
typescriptwebpack
dion
dion

Reputation: 1

Webpack and Typescript bundle.js not running

When I click the button I get the following error:

index.html:12 Uncaught ReferenceError: greet is not defined at HTMLButtonElement.onclick (index.html:12)

It seems as if the javascript code generated by webpack or ts-loader is not correct. Any ideas?

this is my index.ts

function greet(){
    let p:HTMLElement=document.getElementById("p1")
    p.innerHTML="hello"
}

this is my bundle.js

/******/ (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
/******/ 			});
/******/ 		}
/******/ 	};
/******/
/******/ 	// define __esModule on exports
/******/ 	__webpack_require__.r = function(exports) {
/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
/******/ 	};
/******/
/******/ 	// 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 = "./src/index.ts");
/******/ })
/************************************************************************/
/******/ ({

/***/ "./src/index.ts":
/*!**********************!*\
  !*** ./src/index.ts ***!
  \**********************/
/*! no static exports found */
/***/ (function(module, exports) {

eval("function greet() {\r\n    var p = document.getElementById(\"p1\");\r\n    p.innerHTML = \"hello\";\r\n}\r\n\n\n//# sourceURL=webpack:///./src/index.ts?");

/***/ })

/******/ });

this is my index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script src="./bundle.js"></script>
<body>
    <p id="p1"></p>
    <button onclick="greet()">Greet </button>
</body>

</html>

this is my tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true
  }
}

this is my webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode:"development"
};

Upvotes: 0

Views: 1281

Answers (2)

gawicks
gawicks

Reputation: 1964

You could do something along the lines of @A Loewer's answer . But the easiest is to do is,

function greet() {
    let p: HTMLElement | null = document.getElementById("p1")
    if(p)
    p.innerHTML = "hello"
}
(<any>window).greet = greet;

Now your function is in global scope.

Upvotes: 0

A Loewer
A Loewer

Reputation: 186

you have to expose the function as a library. Extend the output object in webpack.config.js: 

output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist')
  libraryTarget: 'var',
  library: 'MyLib'
}

Then put the function inside a static class named as in 'library' above and export it. 

export static class MyLib {
  public static greet() {
    let p: HTMLElement = document.getElementById("p1")
    p.innerHTML = "hello"
  }
}

last step is to change the event in html code: 

<button onclick="MyLib.greet()">Greet </button>

Upvotes: 1

Related Questions