lwc => import {createElement} from '@lwc/engine-dom'; seems not to work as it should.

[eschweitzer78]

I am reopening an issue for the continuation of #350 -- I added a note for Nowlan Lawson on that but it looks like he moved on...

The suggested workaround to the problem stated in #350 is to replace the import and put "@lwc/engine-dom" instead of "lwc". This does clear the errors in VS Code Studio.

However, once I do that in my setup (which has TypeScript activated), every jest test fails with an error indicating that my LWCs do no inherit from LightningElement... it's along the lines of

X is not a valid component, or does not extends LightningElement from "lwc". You probably forgot to add the extend clause on the class declaration.

After a bit of tinkering, I found out that LightningElement is resolved differently between sfdx-jest-lwc and the transpiled TS LWC even though it's the same underlying code. One LightningElement comes from the @lwc/engine-dom module within sdfx-lwc-jest, whereas the other one comes from the sfdx project's @lwc/engine-dom module. Inspecting that LWC's prototype to check for LightningElement hence fails as === on the class object returns false.

I think it's linked to the following bit of code in resolver.js:

module.exports = function (modulePath, options) {
    if (modulePath === 'lwc') {
        return require.resolve('@lwc/engine-dom');
    }
    return getModule(modulePath, options) || lwcResolver.apply(null, arguments);
};

I have patched it as follows and it solves the issue on my end:

module.exports = function (modulePath, options) {
    if (modulePath === 'lwc' || modulePath === '@lwc/engine-dom') {
        return require.resolve('@lwc/engine-dom');
    }
    return getModule(modulePath, options) || lwcResolver.apply(null, arguments);
};

I suppose that npm dedupe could work as an alternative but I don't know if many Salesforce devs will know about that.

Please kindly advise!

[eschweitzer78]

FYI it turns out my issue was triggered by having an import with a specific version of @lwc/engine-dom at the project level; in that cas npm dedupe does not help.