MacroError with webpack

[b-d-m-p]

Getting this error with a project that is using RMWC. I've seen people posting about the same issue with Storybook or Jest. I can't seem to suss out the solution. Any help would be appreciated.

I've also gotten the same error trying the approach with Twin.

 MacroError: The macro you imported from "undefined" is being executed outside the context of compilation with babel-plugin-macros. This indicates that you don't have the babel plugin "babel-plugin-macros" configured correctly. Please see the documentation for how to configure babel-plugin-macros properly: https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md

I suppressed some potentially related errors about fs and module being undefined with the below in webpack.config.js.

      node: {
            fs: "empty",
             module: "empty"
        },

Here a redacted bit of my ``webpack.config.js`

const path = require("path");
const webpack = require("webpack");
const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
const htmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const Ajv = require("ajv");


...


module.exports = (env, argv) => {
    
    ...

    return {
        mode: mode,
        entry: path.resolve(__dirname, "src/index.tsx"),
        output: {
            filename: "js/[name].js",
            path: path.resolve(__dirname, "dist"),
            publicPath: publicPath
        },
        devtool: isProduction ? false : "source-map",
        devServer: {
            compress: true,
            port: 3001,
            historyApiFallback: true,
            proxy: {
                "/api": {
                    target: "http://localhost:4001",
                    pathRewrite: { "^/api": "" }
                }
            }
        },
        resolve: {
            alias: {
                "@": path.resolve(__dirname, "./src")
            },
            extensions: [".ts", ".tsx", ".js", ".json"]
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: "css/[name].css",
                sourceMap: true
            }),
              new FaviconsWebpackPlugin({
                logo: './src/logo.png', 
                mode: 'webapp', 
                devMode: 'light', 
                favicons: {
                    appName: 'app',
                    appDescription: 'app description',
                    developerName: 'Me',
                    developerURL: null, 
                    background: '#ffecb3',
                    theme_color: '#FFF',
                    icons: {
                        coast: false,
                        yandex: false
                    }
                }
            }),
            new htmlWebpackPlugin({
                template: path.resolve(__dirname, "src/index.html"),
            })
        ],
        optimization: {
            splitChunks: {
                name: "vendor",
                chunks: "initial"
            }
        },
        performance: {
            maxEntrypointSize: 1000000,
            maxAssetSize: 1000000
        },
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    loader: "ts-loader"
                },
                {
                    enforce: "pre",
                    test: /\.js$/,
                    loader: "source-map-loader",
                    exclude: [
                        // material-ui は source-map を提供してくれていないっぽいので除外
                        /node_modules\/@material/,
                        /node_modules\/@rmwc/
                    ]
                },
                {
                    test: /\.css$/,
                    sideEffects: true,
                    use: [MiniCssExtractPlugin.loader, "css-loader"]
                },
                {
                    test: /\.(?:ico|gif|png|jpg|jpeg|webp|svg)$/i,
                    loader: "file-loader",
                    options: {
                        name: "[path][name].[ext]",
                        context: "src"
                    }
                },
                {
                    test: /\.(woff|woff2|eot|ttf)$/,
                    loader: "file-loader",
                    options: {
                        limit: 8192,
                        name: "[path][name].[ext]",
                        context: "src"
                    }
                }
            ]
        },
        watch
    };
};