Unable to use TypeScript

M0hammedImran commented 3 years ago

I'm using typescript and followed the getting started https://github.com/pradel/create-react-app-esbuild/blob/main/packages/craco-esbuild/README.md

App.tsx

const { isLoading } = useQuery<FetchUserQueryResponse, Error>({
    queryKey: 'user', 
    queryFn: fetchUser,
});

Failed to compile.

./src/Components/App/App.tsx
Error: Transform failed with 1 error:
client/src/Components/App/App.tsx:38:64: error: Expected ";" but found ">"

craco.config.js

const CracoEsbuildPlugin = require('craco-esbuild');
const { ProvidePlugin } = require('webpack');

module.exports = {
    webpack: {
        plugins: [
            new ProvidePlugin({
                React: 'react',
            }),
        ],
    },
    plugins: [
        {
            plugin: CracoEsbuildPlugin,
            options: {
                enableSvgr: true, // Optional.
                esbuildLoaderOptions: {
                    loader: 'jsx',
                    target: 'es2015',
                },
            },
        },
    ],
    style: {
        postcss: {
            plugins: [require('tailwindcss'), require('autoprefixer')],
        },
    },
};

ph1p commented 3 years ago

Just replace jsx with tsx inside options

pradel commented 3 years ago

@ph1p added this to documentation 👍

pradel / create-react-app-esbuild

Unable to use TypeScript #29