Tips on setting this up with CRACO and CRA?

[onionhammer]

I've been banging my head against this a bit trying to avoid ejecting or going with a different css-in-js library, everything seems like it ought to work, but when I do it it blows up with.. basically loses TypeScript support when I add the @compiled webpack loader.

  SyntaxError: C:\Development\C2C-Solution-Frontend\src\C2C.FormWeb\ClientApp\src\Components\Button.tsx: Missing semicolon. (4:4)

  2 | import * as theme from '../theme';
  3 |
> 4 | type ButtonStyleProps = {
    |     ^
  5 |     size?: "small" | "medium" | "large"
  6 | };
  7 |

I'm adding this custom plugin to my craco.config.js to try to inject the '@compiled/webpack-loader' in

const {  when, whenDev, whenProd, whenTest, ESLINT_MODES, POSTCSS_MODES } = require("@craco/craco");
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {

    plugins: [
        {
            plugin: {
                overrideWebpackConfig: ({ webpackConfig, cracoConfig, pluginOptions, context: { env, paths } }) => {

                    for (let rule of webpackConfig.module.rules) {
                        if (!rule.oneOf) continue;

                        for (let oneOf of rule.oneOf) {

                            if (oneOf.loader && 
                                oneOf.include &&
                                oneOf.loader.includes('babel-loader')) {

                                let loader = oneOf.loader;
                                let options = oneOf.options;

                                delete oneOf.loader;
                                delete oneOf.options;

                                oneOf.use = [
                                    {
                                        loader, options,
                                    },
                                    {
                                        loader: require.resolve('@compiled/webpack-loader'),
                                        options: {
                                            importReact: false,
                                            // extract: true,
                                        }
                                    }
                                ];
                            }
                        }
                    }

                    return webpackConfig;
                }
            },
            options: {}
        },
    ]

};

I've tried a bunch of varieties of this, such as discarding the previous loader and just adding { loader: "babel-loader" } as described here, same deal

[NikAtIdeally]

Have you tried adding a semicolon?

size?: "small" | "medium" | "large"; <- that line

[NikAtIdeally]

Actually, I've tried moving my app into Parcel and now getting the same issue

>  8 | var el: any = document.getElementById("root");
     |       ^
   9 | const root = ReactDOM.createRoot(el!);

SyntaxError: /home/nik/Dev/hello-parcel/src/index.tsx: Missing semicolon. (8:6)

Errors do change, but none of them seem to make sense.

If i remove "@compiled/parcel-config" from .parcelrc then it runs

So far the only way I got it to work is with babel plugin and CRACO. 🤷‍♂️ Would have left good enough alone, but really want to add component names to the html.