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 new to JS, 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.js"></script>
</head>
<body>
<simple-greeting name="World"></simple-greeting>
</body>
My js 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 run app.js 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 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?