search

salesforce / sfdx-lwc-jest

Run Jest against LWC components in SFDX workspace environment
MIT License
162 stars 81 forks source link

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

Closed erocheleau closed 6 months ago

erocheleau commented 6 months ago

Description

VSCode is just showing a cryptic error image 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

image

Version

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.

image

nolanlawson commented 6 months ago

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 commented 6 months ago

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.

  1. 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?

  1. 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 commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

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

nolanlawson commented 6 months ago

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: https://github.com/forcedotcom/lightning-language-server/issues/588