New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simple Typescript: "Unexpected token" with Babel 7 #6959

Closed
danielg2002 opened this Issue Dec 2, 2017 · 14 comments

Comments

Projects
None yet
6 participants
@danielg2002

danielg2002 commented Dec 2, 2017

Using Babel7 an error arise on a simple sentence, like "let result: string;"

"Unexpected token"

How i should configure Babel7 with ts?

webpack.config:
{
test: /.(js|jsx|ts|tsx)$/,
loader: require.resolve('babel-loader'),
exclude: /(node_modules)/
},

.babelrc
{
"presets": [
[
"@babel/env",
{
"targets": {
"browsers": [
"last 2 versions",
"safari >= 10"
]
},
//"useBuiltIns": "usage",
"debug": false
}
],
"@babel/stage-3",
"@babel/react",
"@babel/typescript"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": true
}
]
]
}

partial package.json:

"@babel/core": "7.0.0-beta.34",
"@babel/polyfill": "7.0.0-beta.34",
"@babel/preset-env": "7.0.0-beta.34",
"@babel/preset-react": "7.0.0-beta.34",
"@babel/preset-stage-3": "7.0.0-beta.34",
"@babel/preset-typescript": "7.0.0-beta.34",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "21.2.0",
"babel-loader": "8.0.0-beta.0",
"ts-loader": "3.2.0",
"typescript": "2.6.2",

tsconfig.json

"module": "commonjs",
"target": "es5",
"lib": [
"es6",
"dom"
],
"moduleResolution": "node",
"jsx": "preserve",
"noEmit": true

@babel-bot

This comment has been minimized.

Show comment
Hide comment
@babel-bot

babel-bot Dec 2, 2017

Collaborator

Hey @danielg2002! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

Collaborator

babel-bot commented Dec 2, 2017

Hey @danielg2002! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

@loganfsmyth

This comment has been minimized.

Show comment
Hide comment
@loganfsmyth

loganfsmyth Dec 2, 2017

Member

Please include the full error message and stack trace, and webpack config if possible.

Member

loganfsmyth commented Dec 2, 2017

Please include the full error message and stack trace, and webpack config if possible.

@danielg2002

This comment has been minimized.

Show comment
Hide comment

danielg2002 commented Dec 2, 2017

@loganfsmyth

This comment has been minimized.

Show comment
Hide comment
@loganfsmyth

loganfsmyth Dec 2, 2017

Member

The full error message and stack trace is the most important part that we'll need.

Member

loganfsmyth commented Dec 2, 2017

The full error message and stack trace is the most important part that we'll need.

@danielg2002

This comment has been minimized.

Show comment
Hide comment
@danielg2002

danielg2002 Dec 2, 2017

danielg2002 commented Dec 2, 2017

@loganfsmyth

This comment has been minimized.

Show comment
Hide comment
@loganfsmyth

loganfsmyth Dec 2, 2017

Member

Hmm, so there's nothing on the next line after than message? Maybe just show us exactly what output you see. I'd at least expect Webpack itself to have printed for instance the name of the file on the line above the error.

Member

loganfsmyth commented Dec 2, 2017

Hmm, so there's nothing on the next line after than message? Maybe just show us exactly what output you see. I'd at least expect Webpack itself to have printed for instance the name of the file on the line above the error.

@danielg2002

This comment has been minimized.

Show comment
Hide comment
@danielg2002

danielg2002 Dec 3, 2017

@loganfsmyth here the output:

Compiling...
Failed to compile.

./src/core/models/ContainerItemHelper.ts
Syntax error: /Users/daniel/Code/SnowflakeWeb2/src/core/models/ContainerItemHelper.ts: Unexpected token (177:8)
175 |
176 | static imageSourceBasedOnType(type: ContainerItemType): string {

177 | let result: string;
| ^
178 |
179 | switch (type) {
180 | case ContainerItemType.Folder:

danielg2002 commented Dec 3, 2017

@loganfsmyth here the output:

Compiling...
Failed to compile.

./src/core/models/ContainerItemHelper.ts
Syntax error: /Users/daniel/Code/SnowflakeWeb2/src/core/models/ContainerItemHelper.ts: Unexpected token (177:8)
175 |
176 | static imageSourceBasedOnType(type: ContainerItemType): string {

177 | let result: string;
| ^
178 |
179 | switch (type) {
180 | case ContainerItemType.Folder:

@loganfsmyth

This comment has been minimized.

Show comment
Hide comment
@loganfsmyth

loganfsmyth Dec 4, 2017

Member

And there's no other text after that message?

That error seems strange to me, since there's clearly type annotations on the line before that. https://babeljs.io/repl/build/7.0/#?babili=false&browsers=&build=&builtIns=false&code_lz=MYGwhgzhAEBiD29oG8BQ1oQC5iwS2GjwFswBzAUwGV4BXAJ2AoCFIKATAeQDsAVATwAOFABRYhFAFzQAwvG4483CvQCSWCsQHCAlNOz0lZFOgzQQFLNHoUItEFn1ZD3MgG5TAX1SegA&debug=false&circleciRepo=&evaluate=true&lineWrap=false&presets=typescript&prettier=false&targets=&version=7.0.0-beta.34 for instance seems to work fine.

When you said let result: string; was the error, I thought you meant it was a file containing let result: string; on its own. If there's a bunch more stuff, we need to see what that code is. Ideally you could reproduce the error on https://babeljs.io/repl/build/7.0/#?babili=false&browsers=&build=&builtIns=false&code_lz=Q&debug=false&circleciRepo=&evaluate=true&lineWrap=false&presets=typescript&prettier=false&targets=&version=7.0.0-beta.34 and give us a link.

Member

loganfsmyth commented Dec 4, 2017

And there's no other text after that message?

That error seems strange to me, since there's clearly type annotations on the line before that. https://babeljs.io/repl/build/7.0/#?babili=false&browsers=&build=&builtIns=false&code_lz=MYGwhgzhAEBiD29oG8BQ1oQC5iwS2GjwFswBzAUwGV4BXAJ2AoCFIKATAeQDsAVATwAOFABRYhFAFzQAwvG4483CvQCSWCsQHCAlNOz0lZFOgzQQFLNHoUItEFn1ZD3MgG5TAX1SegA&debug=false&circleciRepo=&evaluate=true&lineWrap=false&presets=typescript&prettier=false&targets=&version=7.0.0-beta.34 for instance seems to work fine.

When you said let result: string; was the error, I thought you meant it was a file containing let result: string; on its own. If there's a bunch more stuff, we need to see what that code is. Ideally you could reproduce the error on https://babeljs.io/repl/build/7.0/#?babili=false&browsers=&build=&builtIns=false&code_lz=Q&debug=false&circleciRepo=&evaluate=true&lineWrap=false&presets=typescript&prettier=false&targets=&version=7.0.0-beta.34 and give us a link.

@danielg2002

This comment has been minimized.

Show comment
Hide comment
@danielg2002

danielg2002 Dec 5, 2017

@loganfsmyth Hi Logan, more info after I turned on debug info...

Please, review attached image
error

My actual presets:

presets: [
[
'@babel/es2015',
{
targets: {
browsers: [
'last 4 Chrome versions',
'last 4 FireFox versions',
'last 2 Safari versions',
],
},
debug: true
}
],
'@babel/typescript',
'@babel/stage-3',
'@babel/react',
]

danielg2002 commented Dec 5, 2017

@loganfsmyth Hi Logan, more info after I turned on debug info...

Please, review attached image
error

My actual presets:

presets: [
[
'@babel/es2015',
{
targets: {
browsers: [
'last 4 Chrome versions',
'last 4 FireFox versions',
'last 2 Safari versions',
],
},
debug: true
}
],
'@babel/typescript',
'@babel/stage-3',
'@babel/react',
]

@Kovensky

This comment has been minimized.

Show comment
Hide comment
@Kovensky

Kovensky Dec 5, 2017

Member

I see. This reproduces your issue:

https://babeljs.io/repl/build/7.0/#?babili=false&browsers=&build=&builtIns=false&code_lz=JYOwLgpgTgZghgYwgAgEJwF7IN4F8BQCANnAM6nIBiA9tTvssgEZxTIC8yAPOhgHx4GjYUIAW1AOYoAFAEp6w5EQhhkMAK4S4QggSA&debug=false&circleciRepo=&evaluate=true&lineWrap=true&presets=react%2Ctypescript&prettier=false&targets=&version=7.0.0-beta.34

Unlike TypeScript, Babel makes no distinction between .ts and .tsx files. You should write all your TypeScript files as if they are .tsx, which forbids the angle brackets cast.

You should change all your angle bracket casts to use as instead. In the reproduction example, <Baz>{} should be changed to {} as Baz.

Never use the <type> cast syntax if you can help it, as it is impossible to distinguish it from JSX. It is why TypeScript forbids it in .tsx files, and forbids JSX in .ts files.

Use https://palantir.github.io/tslint/rules/no-angle-bracket-type-assertion/ or https://github.com/nzakas/eslint-plugin-typescript/blob/master/docs/rules/no-angle-bracket-type-assertion.md to ensure you do not use them.

Member

Kovensky commented Dec 5, 2017

I see. This reproduces your issue:

https://babeljs.io/repl/build/7.0/#?babili=false&browsers=&build=&builtIns=false&code_lz=JYOwLgpgTgZghgYwgAgEJwF7IN4F8BQCANnAM6nIBiA9tTvssgEZxTIC8yAPOhgHx4GjYUIAW1AOYoAFAEp6w5EQhhkMAK4S4QggSA&debug=false&circleciRepo=&evaluate=true&lineWrap=true&presets=react%2Ctypescript&prettier=false&targets=&version=7.0.0-beta.34

Unlike TypeScript, Babel makes no distinction between .ts and .tsx files. You should write all your TypeScript files as if they are .tsx, which forbids the angle brackets cast.

You should change all your angle bracket casts to use as instead. In the reproduction example, <Baz>{} should be changed to {} as Baz.

Never use the <type> cast syntax if you can help it, as it is impossible to distinguish it from JSX. It is why TypeScript forbids it in .tsx files, and forbids JSX in .ts files.

Use https://palantir.github.io/tslint/rules/no-angle-bracket-type-assertion/ or https://github.com/nzakas/eslint-plugin-typescript/blob/master/docs/rules/no-angle-bracket-type-assertion.md to ensure you do not use them.

@danielg2002

This comment has been minimized.

Show comment
Hide comment
@danielg2002

danielg2002 Dec 5, 2017

@Kovensky Hi, I did your suggestion and the unexpected token was fixed! thanks!

BUT, now says "import = is not supported."

Please, review attached screen...

I don't have any "import =" in my code, what that means?
erro2

danielg2002 commented Dec 5, 2017

@Kovensky Hi, I did your suggestion and the unexpected token was fixed! thanks!

BUT, now says "import = is not supported."

Please, review attached screen...

I don't have any "import =" in my code, what that means?
erro2

@simonbuchan

This comment has been minimized.

Show comment
Hide comment
@simonbuchan

simonbuchan Jan 10, 2018

@Kovensky Untested, but with #7091 babel should now be able to behave like tsc:

const common = ["@babel/env"];
module.exports = {
  overrides: [
    { test: /\.js$/, presets: common },
    { test: /\.jsx$/, presets: [...common, "@babel/react"] },
    { test: /\.ts$/, presets: [...common, "@babel/typescript"] },
    { test: /\.tsx$/, presets: [...common, "@babel/typescript", "@babel/react"] },
  ]
}

Babylon is perfectly happy to parse <type> expr with syntax-typescript so long as syntax-jsx is not also enabled.

Probably something to suggest in whatever typescript docs get added?

simonbuchan commented Jan 10, 2018

@Kovensky Untested, but with #7091 babel should now be able to behave like tsc:

const common = ["@babel/env"];
module.exports = {
  overrides: [
    { test: /\.js$/, presets: common },
    { test: /\.jsx$/, presets: [...common, "@babel/react"] },
    { test: /\.ts$/, presets: [...common, "@babel/typescript"] },
    { test: /\.tsx$/, presets: [...common, "@babel/typescript", "@babel/react"] },
  ]
}

Babylon is perfectly happy to parse <type> expr with syntax-typescript so long as syntax-jsx is not also enabled.

Probably something to suggest in whatever typescript docs get added?

@danielg2002

This comment has been minimized.

Show comment
Hide comment
@danielg2002

danielg2002 Jan 10, 2018

Hi @simonbuchan, my project is working very well from beta.35.

thanks!
I will close this issue.

danielg2002 commented Jan 10, 2018

Hi @simonbuchan, my project is working very well from beta.35.

thanks!
I will close this issue.

@simonbuchan

This comment has been minimized.

Show comment
Hide comment
@simonbuchan

simonbuchan Jan 10, 2018

This was regarding the initial cast issue, not whatever the import = thing was.

To be fair to this issue, it's plausible that babylon could give an error with guidance like tsc when both typescript and JSX are enabled and it hits a syntax error after a old-style cast, but it's not obvious that it could do so in every case, for example the original issue here. Perhaps if it is "directly" inside a JSX opening element and it hits a "generic" syntax error it could try reparsing without JSX and if that passes (at least, further than the original error) issue similar guidance to tsc? Sounds flakey, but you already hit a parse error.

simonbuchan commented Jan 10, 2018

This was regarding the initial cast issue, not whatever the import = thing was.

To be fair to this issue, it's plausible that babylon could give an error with guidance like tsc when both typescript and JSX are enabled and it hits a syntax error after a old-style cast, but it's not obvious that it could do so in every case, for example the original issue here. Perhaps if it is "directly" inside a JSX opening element and it hits a "generic" syntax error it could try reparsing without JSX and if that passes (at least, further than the original error) issue similar guidance to tsc? Sounds flakey, but you already hit a parse error.

@lock lock bot added the outdated label May 3, 2018

@lock lock bot locked as resolved and limited conversation to collaborators May 3, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.