I have a web application made purely in jquery. I have properly configured webpack and everything is working as expected, like minification, code splitting, etc.
The problem is, when the app runs on browser, a custom js file is loaded from database and executed when the DOM is rendered. This js file has dependency on the already bundled code modules/functions.
Example:
// user.js | From static codebase
import { GetFullName } from './common'; // From static codebase
const user = {};
user.Login = () => {}
export default user;
Now the custom code will have a content like this:
$('#login').click(user.Login) // References "user" module from the main code.
// This will throw a reference error saying user is not defined.
Note: We have recently introduced import/export in the codebase due to webpack’s lazy loading and stuffs. Otherwise the references were by default global.
“user” was globally accessible for the case of the example above.
Webpack is supposed to generate the dependency graph from the static files that were provided while compiling and thus function and variable names will be different everytime.
The custom js file will throw errors due to missing dependencies.
Is there a way to resolve this problem?
I tried to create global references of the modules in the main bundle and make them accessible. However this doesn’t seem the right way and would greatly impact lazy loading of modules.