TypeScript, SyntaxError: Unexpected token {

Question

I am trying to run my program using "node main.js", however, it keeps coming up with the error "SyntaxError: Unexpected token {"

D:\Visual Studio Code Projects\ts-hello>node main.js
D:\Visual Studio Code Projects\ts-hello\main.js:1
import { LikeComponent } from './like.component';
       ^

SyntaxError: Unexpected token {
    at Module._compile (internal/modules/cjs/loader.js:721:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

I have tried changing the tsconfig.json file to "module": "commonjs", however, this did not work. I have even uninstalled and reinstalled node and started from scratch.

import{LikeComponent} from './like.component';

let component = new LikeComponent(10, true);
component.onClick();
console.log(`likesCount: ${component.likesCount}, isSelected: ${component.isSelected}`);

It should output the program correctly onto the command prompt.

Use the compiler option "module": "commonjs" in tsconfig.json. Then compile again. — Paleo
– Paleo, Commented Jun 11, 2019 at 15:06
Can you please clarify what you mean by the compiler option? I have already gone into the config file and changed module to "module": "commonjs", — GolfBravo
– GolfBravo, Commented Jun 11, 2019 at 15:57

unional · Accepted Answer · 2019-06-11 17:54:20Z

7

Notice that your are running node main.js.

Your main.js currently has esm syntax (aka ES6 module syntax).

Assuming it is compiled from main.ts, you need to have module: commonjs in your `tsconfig.json

// tsconfig.json
{
  "compilerOptions": {
    "module": "commonjs",
    ... // other configurations
  }
}

With that, when you compile your code by running tsc, it will create main.js with commonjs module syntax.

answered Jun 11, 2019 at 17:54

unional

15.8k6 gold badges36 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

NSjonas · Accepted Answer · 2020-12-23 06:45:22Z

If you are trying to debug a vscode project and you already have "module": "commonjs", then check your "launch.json" outFiles to make sure it aligns with where your output files actually are (typically set via outDir):

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/src/index.ts",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "outFiles": ["${workspaceFolder}/build/**/*.js"], //make sure this matches!
      "sourceMaps": true
    }
  ]
}

It seems like if vscode doesn't find a matching file, it just attempts to run the ts file via node (which explains the error).

I just thrashed on this for a while, so hopefully this saves someone else some headache.

stuft2 · Accepted Answer · 2021-10-15 21:49:49Z

0

These kinds of errors crop up because of syntax differences between versions of Javascript/ECMAScript. They can be avoided by using the configurations found in the @tsconfig/bases github repository which are recommended by the TypeScript team. Just make sure to use the corresponding tsconfig for the environment the Javascript is intended to run in.

The TSConfig Bases are available for install on NPM. Install and then extend the @tsconfig/node12/tsconfig.json like so:

npm install --save-dev @tsconfig/node12

{
  "extends": "@tsconfig/node12/tsconfig.json",
  "compilerOptions": {
    ...
  },
  ...
}

answered Oct 15, 2021 at 21:49

stuft2

406 bronze badges

Comments

yvesva · Accepted Answer · 2022-06-30 22:47:38Z

0

My issue stemmed from problems installing all of the required packages from npm. I deleted my node_modules folder and used yarn to install again, and then yarn install --check-files to ensure they were installed correctly.

answered Jun 30, 2022 at 22:47

yvesva

7607 silver badges12 bronze badges

Collectives™ on Stack Overflow

TypeScript, SyntaxError: Unexpected token {

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related