VSCODE: Can't get even the most basic program to run in lit with javascript

Question

After much troubleshooting I decided to try to get the most basic of programs to run in lit, and have not have much luck. Here are my steps:

I installed lit into the same directory as my index.html and app.js using npm i lit. I generated my package.json using npm init and chose the default values.

Here is my index.html:

<!DOCTYPE html>
<head>
    <script type="module" src="./app.js"></script>
</head>
<body>
    <test-element></test-element>
</body>
</html>

Here is my app.js:

import {html, css, LitElement} from 'lit';

export class Test extends LitElement {    
    constructor() { 
        super(); 
    }
    render() {
        return html`<p>Test</p>`;
    }
}

customElements.define('test-element', Test);

Here is my package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "lit": "^2.2.3"
  }
}

What am I doing wrong here?

EDIT: Not sure why this was closed, but the issue was that I was using the built-in Live Server extension in VS Code. Running a web server directly with npm seemed to fix it. https://modern-web.dev/docs/dev-server/overview/

Even though you have a package.json file, you're not using node. How are you trying to run this code? — evolutionxbox, May 04 '22 at 19:22
You need to have a web bundler, such as rollup, bundle your HTML/js and then serve it over a webserver. — Mooshua, May 04 '22 at 19:22
@evolutionxbox I'm running it using the Live Server extension within VS Code. Shouldn't this automatically start a local server for me? — Cameron Crane, May 04 '22 at 19:31
@evolutionxbox I'm also not sure how that other thread answers this question specifically, though the content may be a bit over my head admittedly. — Cameron Crane, May 04 '22 at 20:04
You can't use node_modules directly in the browser without a bundle step. — evolutionxbox, May 05 '22 at 07:05

VSCODE: Can't get even the most basic program to run in lit with javascript

0 Answers0