'SyntaxError: Invalid or unexpected token in Visual Studio Code while using Lit

Sadly I'm aware this question has been asked before, but I've tried the solutions here to no avail: Uncaught SyntaxError: Invalid or unexpected token in code

I've reinstalled node.js, reinstalled lit.dev using npm, and reinstalled Visual Studio Code entirely. I've also written a separate, simple "hello world" program to test that there were no issues unrelated to the program itself and it worked fine.

I'm relatively new to JS/TS, node.js/npm, and to lit in general so I'm going to explain what I did exactly to see if there's something missing. I created a folder to hold my project, opened cmd within it and added lit using npm i lit. I generated my package.json using npm init and generated my index.html and app.js files using VS Code. I tried to test it using the default example in https://lit.dev/playground/ and simply copied/pasted both the js and html code into my files. I will re-add them here for completion's sake.

My html file contains:

<!DOCTYPE html>
<head>
  <script type="module" src="app.ts"></script>
</head>
<body>
  <simple-greeting name="World"></simple-greeting>
</body>

My ts file contains:

import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue}`;

  @property()
  name = 'Somebody';
  render() {
    return html`<p>Hello, ${this.name}!</p>`;
    debugger
  }
}

To test it I tried to use the built-in debugger in VS Code for app.ts and also ran it but I keep receiving this error:

SyntaxError: Invalid or unexpected token
    at ESMLoader.moduleStrategy (node:internal/modules/esm/translators:115:18)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:289:14)
    at async link (node:internal/modules/esm/module_job:70:21)

Wondering if there were hidden characters like in the previous thread, I then deleted all of the text I copied/pasted from the lit playground and manually retyped it in, but still receive the same error. Clicking it also gives me this error:

No debugger available, can not send 'variables'

I editted my launch.json file to have the following:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "console": "integratedTerminal",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}\\app.js"
        }
    ]
}

and I'm still unable to click the error for more details.

Is there something I'm doing wrong with the basic setup of the project? Or is there some other issue causing this? I also tried running this in both javascript and typescript files

Edit: After troubleshooting I have determined that the error lies within the @ symbol used in @customElement('simple-greeting'). Why isn't VS Code recognizing it even though I've included the necessary lit files?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'SyntaxError: Invalid or unexpected token in Visual Studio Code while using Lit

Sources

Related Questions