Error: LWC1702: lwc => import {createElement} from 'lwc'; seems to be broken?

[erocheleau]

Description

VSCode is just showing a cryptic error

on the line import {createElement} from 'lwc'; where it wasn't before?

It looks like I can change it to import {createElement} from '@lwc/engine-dom'; but I'm afraid it might cause other issues?

Steps to Reproduce

Even in the lwc-recipe repository I am having this error.

import {createElement} from 'lwc';

Expected Results

No errors I guess?

Actual Results

Version

• @salesforce/sfdx-lwc-jest: 3.1.2
• Node: v18.19.0

The import in the jest files seems to resolve to this .d.ts from the .sfdx folder that gets created every time I run a sf command from inside the project for instance.

[nolanlawson]

Thanks for reporting!

import {createElement} from 'lwc' is disallowed on platform due to this ESLint rule. That said, people use it in their Jest tests all the time, and we don't have a problem with that.

Questions:

1. Are you using this in a Jest test or a component file?
2. Is this a new issue that popped up recently? What caused it?
3. What is this preventing you from doing? (E.g. publishing, running tests, etc.)

[erocheleau]

Thanks for reporting!

import {createElement} from 'lwc' is disallowed on platform due to this ESLint rule. That said, people use it in their Jest tests all the time, and we don't have a problem with that.

Questions:

1. Are you using this in a Jest test or a component file?

Yes that's what I meant, sorry if that wasn't clear. It's in all the Jest test files, following the example of tests given by Salesforce or other GitHub repos.

2. Is this a new issue that popped up recently? What caused it?

I don't have a specific cause for the issue unfortunately, I am part of multiple repositories, all running different versions of sfdx-lwc-jest. Could've been perhaps related to an update of the ESLint plugin?

3. What is this preventing you from doing? (E.g. publishing, running tests, etc.)

Enjoying my "error-less" files :) It's not blocking anything, but it's just annoying.

// @ts-ignore
doesn't even resolve it, but VSCode resolves the imports from 'lwc' to a typings file in .sfdx/typings IIRC, which doesn't have an exported createElement on it.
Wondering if perhaps there should just be a typings file specific to the 'lwc' imported while writing lwc-Jest tests?

[BatemanVO]

Adding that I also see this highlight in VSCode with sfdx-lwc-jest 4.0.1, even though running npx eslint on the directory won't actually throw any errors. If I had not seen this issue, I don't think I would've even noticed anything wrong.

I did try updating our .eslintrc.json file to include:

"@lwc/lwc/valid-api": ["error", { "allowList": ["createElement"] }]

but that didn't resolve the issue.

[nolanlawson]

Thanks for the confirmation. So it sounds like this might actually be an issue purely in the VS Code Extension? It sounds like you are just seeing a red squiggly in the VS Code UI, but you can't actually reproduce the ESLint error by running eslint on the command line.

If that's the case, then this may have been due to a change in lightning-language-server (which the VS Code extension uses).

[erocheleau]

@nolanlawson perhaps, do you have any idea to try to hide this?

[nolanlawson]

Based on the description above, I am closing this issue in favor of an issue on forcedotcom/lightning-language-server. Could you please provide your VS Code version, SFDX CLI version, and OS version in that thread? Thank you!

New issue: forcedotcom/lightning-language-server#588