@babel/plugin-syntax-jsx and @babel/plugin-syntax-typescript on REPL does not respect tsx contents

[alex-kinokon]

Bug Report

• [ ] I would like to work on a fix!

Current behavior

/repl.js: Unexpected token, expected "," (4:14)

  2 | 
  3 | export function A() {
> 4 |   return <div />
    |               ^
  5 | }
  6 | 

Input Code

Minimum reproduction sample on REPL.

import React from "react"

export function A() {
  return <div />
}

Expected behavior Nothing happens.

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

• Filename: babel.config.js

{
  "plugins": [
    "@babel/plugin-syntax-jsx",
    "@babel/plugin-syntax-typescript"
  ]
}

Environment

• Babel version(s): 7.10.3
• Node/npm version: N/A. Issue reproducible on REPL.
• OS: N/A
• Monorepo: no
• How you are using Babel: N/A

[babel-bot]

Hey @proteriax! 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."

[babel-bot]

Hey @proteriax! 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.

[JLHwung]

The REPL does not add filename: "test.tsx" option, required by @babel/plugin-syntax-typescript. As a workaround, please use the presets > typescript option.

[alex-kinokon]

You can reproduce it even with filename set on Node.js. Please see this example.

[JLHwung]

In Babel 7 you have to enable the isTSX option: https://babeljs.io/docs/en/babel-plugin-syntax-typescript#istsx

We acknowledge that

{
  "plugins": [
    "@babel/plugin-syntax-jsx",
    "@babel/plugin-syntax-typescript"
  ]
}

is more natural and it is now supported on Babel 8.