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

Created by: 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 />));