So i been trying to build a youtube  "watch together" kind of hobby project , basically started with new project and using Web Strom IDE, they setup project with ParcelJs by default.

As part of the development, i wrote some call back functions in vanilajs though started getting function undefined error. After some googling came across to following answer. (https://stackoverflow.com/a/57603027/2595780)

Apparently, parcel js bundle isn't available in the global namespace by default.

Solution 1:

window.validationFunction = function validationFunction(event) {
  event.preventDefault();
  var div;
  div = document.getElementById("appendedText");
  div.innerHTML += "hello world";
}

Solution 2:

// package.json
"scripts": {
    "dev": "parcel index.html --global myCustomModule"
  },

// index.js
module.exports.validationFunction= function validationFunction(event) {
  event.preventDefault();
  var div;
  div = document.getElementById("appendedText");
  div.innerHTML += "hello world";
}

// or alternatively index.ts
export function validationFunction(event) {
  event.preventDefault();
  var div;
  div = document.getElementById("appendedText");
  div.innerHTML += "hello world";
}

// index.html
<input onChange="myCustomModule.validationFunction(event)" type="text" name="firstname" /><br />

hope it will help someone :)

Share this article: Link copied to clipboard!