Babel 7 + babel-preset-react-app@next but with TypeScript

[oieduardorabelo]

Hello there 👋 ,

I'm trying to unify my building, currently TypeScript & Babel, under Babel 7,

I'm using babel-preset-react-app@next, to keep everything nice and updated, but, when I try to mix with @babel/preset-typescript, I've the following error:

Module build failed: Error: Cannot combine flow and typescript plugins.

Seems it's because we've the @babel/preset-flow built in in babel-preset-react-app,

My questions is:

• Could babel-preset-react-app make a opt-in/out for @babel/preset-flow?

How to reproduce

Keep in mind, below, there's no tsconfig.json yet, because the project doesn't even compile with both presets describe above

• package.json file:

  "dependencies": {
    "@babel/core": "^7.0.0-beta.38",
    "@babel/preset-typescript": "^7.0.0-beta.38",
    "babel-loader": "8.0.0-beta.0",
    "babel-preset-react-app": "next",
    "babel-runtime": "^6.23.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "webpack": "^3.10.0"
  }

• .babelrc

{
  "presets": ["react-app", "@babel/typescript"]
}

• webpack.config.js

const path = require("path");

module.exports = {
  entry: "./main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

• main.js

import React from "react";
import ReactDOMServer from "react-dom/server";

const App = () => <h1>Hello Wolrd!</h1>;

console.log(ReactDOMServer.renderToString(<App />));

[gaearon]

I wouldn't mind making it possible to exclude the flow preset with an option (but leave it on by default). Wanna send a PR?

[oieduardorabelo]

sure @gaearon, what do you think about:

• .babelrc

{
  "presets": [
    ["react-app", { useFlowPreset: false }],
    "@babel/typescript"
  ]
}

similar to how we use useBuiltIns

[Timer]

Looks good to me @oieduardorabelo. Do we know if there's an existing setting anywhere else so we can keep a consistent option name?

[oieduardorabelo]

thanks @Timer, based on the docs, there are different options and configs, the only one I found similar to opt-in/out was useBuiltIns:

• https://babeljs.io/docs/plugins/preset-env/#show-debug-output
• https://babeljs.io/docs/plugins/preset-es2015/#loose
• https://babeljs.io/docs/plugins/preset-latest/#options

maybe the the last link is similar too, where we can toggle es2015 preset by es2015: false:

{
  "presets": [
    ["latest", {
      "es2015": false
    }]
  ]
}

following that, we could use:

{
  "presets": [
    ["react-app", {
        "flow": false 
    }],
  ]
}

[Timer]

I think "flow": false is best then 😄

[gaearon]

Fixed in #3865

[bondz]

Does this mean CRA supports React with typescript natively? 🕺

[gaearon]

I doubt that :-). But if you can reuse the preset I guess that's nice?

[Timer]

TypeScript is now officially supported as of Create React App 2.1. Read the release notes to get started!