Not working with TSX + {"jsx": "react"}

[eni9889]

I need to use this with a TS project and it will not work. When I change to

jsx:preserve

I get errors. Any solitons?

[gustelle]

Hello,

I have a similar issue, my webpack is webpack@5.73.0

The data-v get generated without going through webpack, but as soon as I add a webpack config to craco it the data-v are not generated any more, here is my craco.config.js

const path = require("path");

module.exports = {
    plugins: [
        {
            plugin: require('craco-plugin-scoped-css'),
        }
    ],
    webpack: {
        configure: {
            mode: 'development',
            entry: "./src/index.tsx",
            devtool: 'source-map',
            resolve: {
                /**
                 * important to look-up for JSON files, because the locales are stored in JSON
                 */
                extensions: [".js", ".jsx", "ts", "tsx", ".json"],
            },
            output: {
                path: path.resolve(__dirname, "public"),
                filename: "app.js",
            },
            module: {
                /** "rules"
                 * use the ts-loader to transform tsx or ts files before adding it to the bundle. 
                 */
                rules: [
                    {
                        test: /\.(ts|tsx)$/, //kind of file extension this rule should look for and apply in test
                        exclude: /node_modules/, //folder to be excluded
                        use: "ts-loader", //loader which we are going to use
                    }
                ],
            },
        }
    }
}

Am I missing something ?

Thanks !