CODEWITHSUNDEEP
typescriptwebpackreactjsjsx
Amir Movahedi
Amir Movahedi

Reputation: 1792

Migration from react-jsx to typescript-tsx react

I want to migrate from react-jsx react to typescript-tsx react. As I have many files to convert I want to do it gradually. I want to keep old react-jsx file and for new features in my application I use typescript, then I will convert old react-jsx files to tsx. Is there any way to compile both react-jsx with Babel and tsx together in bundle file in webpack?

Upvotes: 3

Views: 1581

Answers (1)

Alex Young
Alex Young

Reputation: 4039

Yes there is! In your webpack config you just need to specify different loaders for *.jsx and *.tsx files. In situations using both typescript and babel I tend to get typescript to preserve JSX, and output ES6 modules, then use Babel to deal with the JSX. Your .tsconfig would be something like:

{
    "compilerOptions": {
        "target": "es6",
        "module": "es6",
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "jsx": "preserve",
        "allowJs": false,
        "moduleResolution": "node",
        "lib": [
            "dom", 
            "es7"
        ]
    }
}

And your webpack (assuming v2) loaders would be:

{
    test: /\.jsx?$/,
    use: [{
        loader: "babel-loader",
    }],
    exclude: /node_modules/,
},
{
    test: /\.tsx?$/,
    use: [
        {
            loader: "babel-loader"
        },
        {
            loader: "ts-loader"
        }
    ]
}

Upvotes: 3

Related Questions