Additional modules loading causes undefined error in constructor

For loading additional modules with JS in Vue components I have this error currently

undefined is not a constructor 
(evaluating 'new(window[o.isExtendModule?"Module":""
.concat(o.type,"Module")])(o.type)')

This error shows in the application notification on loading of the project in the editor.

It is related to this piece of code

...
addGridModulesToCurrentPage(modules) {

    this.pageInstance.removeGridModules();

    for(var i = 0; i < modules.length; i++) {
        var moduleJSON = modules[i].json;
        var parsedModule = JSON.parse(moduleJSON);

        // Create new moduleinstance and add it to current page module list.
        let newModule = new window[parsedModule.isExtendModule ? `Module` : `${parsedModule.type}Module`](parsedModule.type);
        newModule.fillFromJSON(moduleJSON);
        // Update id to same in database
        newModule.id = modules[i].id
        newModule.isGridModule = true;
        newModule.isVisible = true
        ...

        this.$store.dispatch('editor/addModule', newModule)
    }
},
...

and especially line

let newModule = new window[parsedModule.isExtendModule ? `Module` : `${parsedModule.type}Module`](parsedModule.type);

Either that or

...
// module plugin specific settings if available
let settingHTML = `/modulesettings/${this.moduleInstance.type}Module.html?ver=${window.EDITOR_ASSETS_VERSION}`
if (this.moduleInstance.isExtendModule) {
  settingHTML = `/editor/extend-module/${this.moduleInstance.type}/settings?ver=${window.EDITOR_ASSETS_VERSION}`
}
...

The extended modules modules are added. Only thing they seem to miss is their icons.

This error is not caught in Bugsnag nor in console.. only loads briefly in notification bar it seems.

How can I debug this code?

Yorki

3 years ago

Level 11

I would start with

console.log(parsedModule);
console.log(window[`${parsedModule.type}Module`]);

before let newModule = new ...

1 like

rhand

3 years ago

Level 6

@Yorki Seems to be a parsing issue with left over cookies module on some projects.

...
console.log(parsedModule);
console.log(window[`${parsedModule.type}Module`]);
// Create new moduleinstance and add it to current page module list.
let newModule = new window[parsedModule.isExtendModule ? `Module` : `${parsedModule.type}Module`](parsedModule.type);
...

showed me an older now removed module was still trying to get loaded causing issues:

Object addGridModulesToCurrentPage
analyticCookies: true
analyticDescription: "<div><span class=\"ql-font-bodytekst11pgray\">We’d like know when our website helps you get something useful done. And then we want to mak…"
analyticTitle: "Functional cookies"
backgroundColor: "rgba(255,255,255,1)"
backgroundRepeat: "no-repeat"
backgroundSize: "100% 100%"
...

This led to an undefined for

console.log(window["".concat(parsedModule.type, "Module")]); 
// Create new moduleinstance and add it to current page module list.

So removal of that type of module from Vue Components with it still there for some projects causes this error. Not sure if I can update code somehow to catch this..

Will not occur for future projects , but got me spooked there for a minute.

Do need code update to adjust that and catch missing module if possible.. like if empty or something. Thinking about that.

Yorki

3 years ago

Best Answer

Level 11

@rhand you can log it and ignore if it's okay for you

let newModule = null;

if (parsedModule.isExtendModule) {
  newModule = new window['Module'](parsedModule.type);
} else if (typeof(window[ `${parsedModule.type}Module`]) === 'undefined') {
  continue;
} else {
  newModule = new window[`${parsedModule.type}Module`](parsedModule.type);
}

or throw some more explaining exception

let newModule = null;

if (parsedModule.isExtendModule) {
  newModule = new window['Module'](parsedModule.type);
} else if (typeof(window[ `${parsedModule.type}Module`]) === 'undefined') {
  throw new Error(`Unknown module "${parsedModule.type}Module"`);
} else {
  newModule = new window[`${parsedModule.type}Module`](parsedModule.type);
}

1 like

rhand

3 years ago

Level 6

Thanks @yorki . Awesome. The general check using if and option to load error in notification bar using

throw new Error(`Unknown module "${parsedModule.type}Module"`);

is really nice. Thought about suppressing it, but then you get no data at all. Thanks again for your help!

1 like

Please or to participate in this conversation.