Using modules in a regular PHP Web Application - function is undefined

jkirkerx

Well, my idea of using converting my JavaScript into modules, so I have just one copy of every function to manage hit a concrete wall today upon implementing my great idea. Perhaps I'm just overlooking something or it's just not feasible to do. This is a plain PHP 7.4 project with some Bootstrap 5, Feather Fonts, plain vanilla Javascript. No webpacks or Gulp yet. No compressed code or script. Just a folder called assets that containers all the CSS, Scripts, Images. This PHP project has many includes for Bootstrap Modals, headers, footers, navigation. I'm using PHP Storm from Jet Brains to create with. Let's start with "must declare type as module" with you use a external script element for a module that has exports. Then make that change from "text/javascript" to "module" and now that error clears, and the new error comes up, "function saveProjectWithProgress() is undefined". I made a core module, literally called core.module.js, which consolidates all my special functions. This is the whole file.

export { dismissProjectNoticesAsync as dismissProjectNotices } from './projectNoticesModal.module.js';
export { saveVersionNoteAsync as saveVersionNote } from './saveVersionNote.module.js';
export { saveManagerAsync as saveManager } from './saveManagerAsync.module.js';
export { saveSwanJobAsync as saveSwanJob } from './saveSwanJobAsync.module.js';
export { saveCommentAsync as saveComment } from './saveCommentsAsync.module.js';
export { removeCommentAsync as removeComment } from './removeComment.module.js';
export { addFeatureAsync as addFeature, removeFeatureAsync as removeFeature, validateFeatureAsync as validateFeature } from './features.module.js';
export { checkSupplierAsync as checkSupplier } from './checkSupplierAsync.module.js';
export { recalculateAsync as recalculate } from './recalculateProjectAsync.module.js';
export { saveProjectAsync as saveProject } from './saveProjectAsync.module.js';
export { saveProjectWithProgressAsync as saveProjectWithProgress } from './saveProjectWithProgress.module.js';

And my PHP HTML, just a snippet of it.

Save
<?php include dirname(__DIR__, 2) . '/includes/modals/core/confirmSave.modal.php'; ?>
<?php include dirname(__DIR__, 2) . '/includes/modals/core/projectNotices.modal.php'; ?>
<script type="module" src="/pcad/assets/scripts/core/module/core.module.js"></script>

And the error from the console .... Uncaught Referen

jkirkerx

Wow .... So all my modules were created, imported and stored on the module level above the DOM. I had to get these modules down to the DOM level to be defined and consumed. But if I write individual window statements, I will run into global pollution? So you put them all in a window namespace? It works now, so far so good, and is exactly what I wanted to achieve with having a unified core module to call throughout the core of my PHP project. This is quite promising so far, hope it works out. Started to lose version control of all the scripts in my project, and now I've eliminated duplicate script functions.

onclick="core.saveProjectWithProgress()"

// Target imports these specific functions only
import { dismissProjectNoticesAsync as dismissProjectNotices } from './projectNoticesModal.module.js';
import { saveVersionNoteAsync as saveVersionNote } from './saveVersionNote.module.js';
import { saveManagerAsync as saveManager } from './saveManagerAsync.module.js';
import { saveSwanJobAsync as saveSwanJob } from './saveSwanJobAsync.module.js';
import { saveCommentAsync as saveComment } from './saveCommentsAsync.module.js';
import { removeCommentAsync as removeComment } from './removeComment.module.js';
import { addFeatureAsync as addFeature, removeFeatureAsync as removeFeature, validateFeatureAsync as validateFeature } from './features.module.js';
import { checkSupplierAsync as checkSupplier } from './checkSupplierAsync.module.js';
import { recalculateAsync as recalculate } from './recalculateProjectAsync.module.js';
import { saveProjectAsync as saveProject } from './saveProjectAsync.module.js';
import { saveProjectWithProgressAsync as saveProjectWithProgress } from './saveProjectWithProgress.module.js';

// Export these function from the module to DOM level
window.core = {

dismissProjectNotices,
saveVersionNote,
saveManager,
saveSwanJob,
saveComment,
removeComment,
addFeature,
removeFeature,
validateFeature,
checkSupplier,
recalculate,
saveProject,
saveProjectWithProgress

}

If it ain't broke don't fix it Discover my world at jkirkerx.com

Richard Deeming

You'll probably need to use addEventListener[^] to wire up the event handlers, rather than using the on... attributes.

import { saveProjectWithProgress } from 'core';

document.addEventListener('DOMContentLoaded', () => {
document.getElementById('saveProjectWithProgress').addEventListener('click', saveProjectWithProgress);
});

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

jkirkerx

That's a good idea! Plus I have Bootstrap modal event listeners to wire up as well. I have 5 main web pages in my CORE, and the goal was to use the same core.module.js on all 5 pages. Yes, that will apply on all 5 pages; I just had to think that thought through. That saveProjectWithProgress is on a PHP include that is a Bootstrap Modal on all 5 web pages. Thanks Richard!

If it ain't broke don't fix it Discover my world at jkirkerx.com

jkirkerx

Wow, feels really good to finally get my haystack cleaned into a nice organized collection of scripts, with some added wiring as well. This is what I wanted in the thread below when I was looking for a way to create common external scripts that are used over and over. I'll have to do more research on this, perhaps some lazy loading and look into global pollution. This is looking very promising so far.

If it ain't broke don't fix it Discover my world at jkirkerx.com