Unexpected token when running babel with Typescript

Question

I'm writing a tutorial about how to publish a Typescript library on Github and I'm having trouble getting babel and typescript to work together. I'm using the Greeter class from the Typescript docs but I'm getting the following error when running babel.

SyntaxError: src/Greeter.ts: Unexpected token (3:10)
  1 | // From the TypeScript docs: https://www.typescriptlang.org/docs/handbook/classes.html
  2 | class Greeter {
> 3 |   greeting: string;
    |           ^
  4 | 
  5 |   constructor(message: string) {
  6 |     this.greeting = message;
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! typescript-import-test@0.0.1 build:babel: `npm i && tsc && ./node_modules/.bin/babel --config-file ./babel.config.js src --out-dir dist --copy-files --extensions '.ts,.tsx,.js, .jsx' --source-maps inline`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the typescript-import-test@0.0.1 build:babel script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/freddiepike/.npm/_logs/2021-02-11T11_53_19_924Z-debug.log

My babel command is:

./node_modules/.bin/babel --config-file ./babel.config.js src --out-dir dist --copy-files --extensions '.ts,.tsx,.js, .jsx' --source-maps inline

My babel config is:

exports = {
  presets: [
    ["@babel/preset-env", { targets: { browsers: ["last 2 versions"] } }],
    "@babel/preset-typescript",
  ],
};

Repo where you can reproduce the bug by running npm run babelify is here.

EDIT: `` As Aleksey L. noticed, I was incorrectly using the wrong version of babel-cli. Changing "babel-cli": "^6.26.0", -> "@babel/cli": "^7.12.13" results in the same console error, but with more info.

SyntaxError: /Users/freddiepike/greeter/src/Greeter.ts: Unexpected token (3:10)

  1 | // From the TypeScript docs: https://www.typescriptlang.org/docs/handbook/classes.html
  2 | class Greeter {
> 3 |   greeting: string;
    |           ^
  4 |
  5 |   constructor(message: string) {
  6 |     this.greeting = message;
    at Parser._raise (/Users/freddiepike/greeter/node_modules/@babel/parser/lib/index.js:776:17)
    at Parser.raiseWithData (/Users/freddiepike/greeter/node_modules/@babel/parser/lib/index.js:769:17)
    at Parser.raise (/Users/freddiepike/greeter/node_modules/@babel/parser/lib/index.js:737:17)
    at Parser.unexpected (/Users/freddiepike/greeter/node_modules/@babel/parser/lib/index.js:9183:16)
    at Parser.parseClassMemberWithIsStatic (/Users/freddiepike/greeter/node_modules/@babel/parser/lib/index.js:12739:12)
    at Parser.parseClassMember (/Users/freddiepike/greeter/node_modules/@babel/parser/lib/index.js:12632:10)
    at /Users/freddiepike/greeter/node_modules/@babel/parser/lib/index.js:12577:14
    at Parser.withTopicForbiddingContext (/Users/freddiepike/greeter/node_modules/@babel/parser/lib/index.js:11616:14)
    at Parser.parseClassBody (/Users/freddiepike/greeter/node_modules/@babel/parser/lib/index.js:12554:10)
    at Parser.parseClass (/Users/freddiepike/greeter/node_modules/@babel/parser/lib/index.js:12527:22) {
  loc: Position { line: 3, column: 10 },
  pos: 113,
  code: 'BABEL_PARSE_ERROR'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! typescript-import-test@0.0.1 babelify: `babel --config-file ./.babel.config.js src --out-dir dist --copy-files --extensions '.ts,.tsx,.js, .jsx' --source-maps inline`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the typescript-import-test@0.0.1 babelify script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Unexpected token when running babel with Typescript

0 Answers