Babel 7 + babel-preset-react-app@next but with TypeScript #3863
Closed
Description
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-appmake 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 />));