lit / lit/lit

TypeScript error 2417 when LitElement has styles with css imported from lit-element

Open
#4,931 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
21.8k
Forks
1.1k
Avg merge
18h 25m
Merged PRs (30d)
2

Description

### Which package(s) are affected?

Lit Core (lit / lit-html / lit-element / reactive-element)

### Description

I'm coming from VSC and currently trying out Cursor.
My issue started in VSC where I got "Module '"lit"' has no exported member 'css'.ts(2305)" error which didn't show up on Cursor, which I thereafter fixed by changing the import from "lit" to "lit-element", though I have no idea if this is the right fix as the only issue that talked about it was #1164 in lit-element (the legacy repo) and provided no solutions.
The error got fixed on VSC but now Cursor throws error "ts(2417) Class static side 'typeof AppAbout' incorrectly extends base class static side 'typeof LitElement'".
I presume only one of these options(import from lit or lit-element) is the correct one but I have no idea which, which also means I don't know which error is the real one. Both tsc version, tsc config and dependancy versions match in both IDEs.

### Reproduction

For the closed source nature of my app I cannot share the repo. Having said that, here's the most important bits:
VSC
```js
import { css } from "lit"
```
underlines css with the error "Module '"lit"' has no exported member 'css'.ts(2305)"

Cursor
```js
import { css } from "lit-element"
@customElement("app-about")
export class AppAbout extends LitElement
```
underlines AppAbout with the error "ts(2417) Class static side 'typeof AppAbout' incorrectly extends base class static side 'typeof LitElement'"

### Workaround

I have not found a workaround

### Is this a regression?

Yes. This used to work, but now it doesn't.

### Affected versions

Failed in 3.2.1 and worked in 3.2.1 also

### Browser/OS/Node environment

tsc version: 5.7.3
node version: v22.11.0
npm version: 10.9.0

Contributor guide

Open the contributing guide

Research direction

No repository files or tests are identified, and the reproduction is limited to the `css` imports and TypeScript diagnostics. Start by reproducing the errors with the stated TypeScript, Node, npm, and Lit versions, then inspect the `lit` and `lit-element` exports and declarations. Done means identifying a reproducible cause and confirming the correct import without either reported diagnostic.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.