This can only be used in ts files

[daslicht]

Hi,
I have the following code while using Babel.

This is my config:

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs"
    }
}

Why do I get the following error:

• This can only be used in ts files, cannot find name Handler*
  here:

import express from "express";
import React from "react";
import Router from "react-router";
const app = express();

// set up Jade
app.set('views', './views');
app.set('view engine', 'jade');

import routes from "../shared/routes";

app.get('/*', function (req, res) {
  Router.run(routes, req.url, Handler => {

        ////////////////// This can only be used in ts files, cannot find name Handler ////////////////
    let content = React.renderToString(<Handler />); 
  ////Block Scoped Variable used before its declaration/////
    res.render('index', { content: content });

  });
});

var server = app.listen(3000, function () {
  var host = server.address().address;
  var port = server.address().port;

  console.log('Example app listening at http://%s:%s', host, port);
});

[felixfbecker]

The same problem occurs when trying to use ES7 async/await syntax, which can be used with Babel or in newest Edge/Chakra versions.
Imo jsconfig.json is completely unnecessary. Why do I need to set compilerOptions when I'm targeting a modern JS engine and not compiling anything? A better option would be to enable everything by default and then auto-detect .babelrc files (or the same for Traceur) and if one exists, look at the constraints defined there.

[daslicht]

isn't VS Code based on Atom?
In Atom I didn't get those Errors.

[felixfbecker]

It uses Electron core. But the JS linting is handled by TypeScript I believe for the IntelliSense support (which, I have to say, is so much better than Atom)

[daslicht]

Yeah

[jrieken]

We will make JSX better supported in the near future

[garthk]

Any workarounds? If VSCode can't handle the ES6+JSX syntax, I need some way to get it out of the way. Otherwise, everyone's going to tell me to get knotted and go back to Sublime Text.

[garthk]

[UPDATE: if you're seeing "This can only be used in ts files." in your plain JavaScript, drop in a jsconfig.json file.]

Worse, @jrieken, I'm seeing this error in plain ES5-compatibile JavaScript:

var HARDCODED_NAME = 'TODO';
var HARDCODED_VERSION = '0.2.3';

function foo() {
    var props = {
        name: HARDCODED_NAME,
        version: HARDCODED_VERSION,
    };
    // '>' expected.
    // ',' expected.
    // ',' expected.
    // Expression expected.
    // Expression expected.
    // This can only be used in ts files.
    console.log(props);
}

module.exports = foo;

All those errors get displayed as hover-over on the squiggly red line under the ; in the line ending props.

[egamma]

Any workarounds? If VSCode can't handle the ES6+JSX syntax, I need some way to get it out of the way. Otherwise, everyone's going to tell me to get knotted and go back to Sublime Text.

In 0.10.6 you can disable the validation using a setting

    "javascript.validate.enable": true

In 0.10.7 that will become available this week, we provide a preview of the new JS infrastructure that supports JSX, pls give it a try.

[chrisdias]

here is how to get 0.10.7 build: https://code.visualstudio.com/insiders

[jrieken]

Closed with the adoption of Salsa.