0

I have installed lit package via npm, then i replaced my-element.ts file with my own .ts file and also updated the package.json file with the new .ts file

Error details

`import { LitElement,html,css } from "lit"; import { customElement, property } from "lit/decorators";

@customElement('sample_project') export class SampleProject extends LitElement { static styles = cssp {color:blue};

@property()
name = 'Intro';

render(){
    return html`<p>Hello, ${this.name}!</p>`;
}

}`

I tried running the component on local host with npm run dev, I get an error that says it's missing ./decorators specifier in 'lit' package but weird because I have installed web dev server npm to try to solve the problem.

expecting this to run and render Hello intro only, very basic

Jacopo Sciampi
  • 2,990
  • 1
  • 20
  • 44
Rambevha Dakalo
  • 11
  • 4

2 Answers2

0

It seems like the decorators directory cannot be found in the lit package you installed, therefore Vite complains that the path does not exist.

Double check manually if ./node_modules/lit/decorators exists. If it does, try to provide the import using the full directory path.

bojkel
  • 63
  • 2
  • 10
0

You need to specify the extension.

import { customElement, property } from "lit/decorators.js";

The package exports is defined with the .js extension in the package.json https://github.com/lit/lit/blob/b0c3f82ef0f97326a205e77e7e1043b75a5cc53f/packages/lit/package.json#L28 so it must match that for the module to be resolved.

You can read more about why the lit package does that here: https://lit.dev/docs/tools/publishing/#include-file-extensions-in-import-specifiers

Augustine Kim
  • 841
  • 1
  • 5