AlexGilleran / jsx-control-statements

Neater If and For for React JSX
https://www.npmjs.com/package/babel-plugin-jsx-control-statements
MIT License
1.62k stars 64 forks source link

Not working with laravel-mix with webpack config #122

Open jingp-ofload opened 1 year ago

jingp-ofload commented 1 year ago

My webpack config is like this:

module: {
        rules: [
            {
                test: /\.(ts|tsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "swc-loader",
                    options: {
                        parseMap: true,
                        jsc: {
                            target: "es2016",
                            loose: true,
                            parser: {
                                syntax: "typescript",
                                tsx: true,
                                dynamicImport: true
                            },
                            transform: {
                                react: {
                                    runtime: "automatic",
                                }
                            }
                        }
                    }
                },
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: [{
                    loader: 'babel-loader',
                    // options: { babelrc: true }
                    options: {
                        presets: [
                            [
                                "@babel/preset-env",
                                {
                                  "targets": {
                                    "chrome": 100
                                  }
                                }
                            ],
                            [
                                "@babel/preset-react",
                                {
                                    "runtime": "automatic"
                                }
                            ]
                        ],
                        plugins: [
                            require("babel-plugin-jsx-control-statements"),
                            require("@babel/plugin-proposal-class-properties"),
                            require("@babel/plugin-proposal-object-rest-spread"),
                            require("@babel/plugin-proposal-optional-chaining"),
                            require("@babel/plugin-syntax-dynamic-import"),
                            require("@babel/plugin-proposal-private-methods")
                        ],
                    }
                }]
            }
        ],
    },
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
        alias: {
            '@components': path.resolve('resources/js/Components'),
            '@composites': path.resolve('resources/js/composites'),
            '@public': path.resolve('public'),
            '@utils': path.resolve('resources/js/utils'),
        },
    },

But after I deploy, the browser says If is not defined

Screenshot 2023-11-04 at 10 31 23 pm