preact refresh not work as expected.

[cbbfcd]

config as:

and got the error:

so, entry index.tsx not be compiled?

[chenjiahan]

Hi, can you provide a reproduction?

[cbbfcd]

Sure~, https://github.com/cbbfcd/preact-rspack-reproduction/blob/main/rspack.config.js#L25

[cbbfcd]

Hi, @LingyuCoder, To add some context, it's difficult to directly show the code due to project specifics. The main issue is that when I include @swc/plugin-prefresh, my entry file doesn't get compiled, and I encounter an error. However, if I remove this plugin, the page loads as expected, but I lose the hot reloading functionality.

use @swc/plugin-prefresh:

the compiled file:

without @swc/plugin-prefresh:

the page will work well:

[cbbfcd]

Another issue is that to support jsx, tsx, js, and ts files with rspack's current @swc/core version, I need to configure multiple rules. However, even with these rules in place, I still encounter problems when integrating preact-prefresh.

[LingyuCoder]

Seems to caused by injecting $RefreshReg$(); into ./node_modules/preact/dist/preact.module.js, and it is required before initialization of $RefreshReg$.

You can add exclude: [/node_modules\/@prefresh/, /node_modules\/preact/] to your module.rules and install the latest @rspack/plugin-preact-refresh to solve this error.

It is recommend to handle .jsx/.tsx and .js/.ts with different module.rules. Otherwise you will compile all .js files in node_modules and it will slow down your compiling.

[cbbfcd]

Thank you for replying, I'll give it a try~

[cbbfcd]

@LingyuCoder oh~ also not work.

module rule config:

const getJsModule = (options) => {
    const { mode = 'production' } = options || {};
    const isDev = mode === 'development';
    return [
        {
            test: /\.(mjs|jsx?)$/,
            loader: 'builtin:swc-loader',
            options: {
                jsc: {
                    experimental: {
                        plugins: [
                            [
                                '@swc/plugin-prefresh', // enable prefresh specific transformation
                                {}, // the customizable preact name, default is `["preact", "preact/compat", "react"]`
                            ],
                        ],
                    },
                    parser: {
                        syntax: 'ecmascript',
                        jsx: true,
                    },
                    transform: {
                        react: {
                            refresh: isDev,
                            development: isDev,
                            runtime: 'automatic',
                        },
                    },
                },
            },
            type: 'javascript/auto',
            exclude: [/node_modules\/@prefresh/, /node_modules\/preact/],
        },
        {
            test: /\.tsx?$/,
            loader: 'builtin:swc-loader',
            options: {
                jsc: {
                    experimental: {
                        plugins: [
                            [
                                '@swc/plugin-prefresh', // enable prefresh specific transformation
                                {}, // the customizable preact name, default is `["preact", "preact/compat", "react"]`
                            ],
                        ],
                    },
                    parser: {
                        syntax: 'typescript',
                        tsx: true,
                    },
                    transform: {
                        react: {
                            refresh: isDev,
                            development: isDev,
                            runtime: 'automatic',
                        },
                    },
                },
            },
            type: 'javascript/auto',
            exclude: [/node_modules\/@prefresh/, /node_modules\/preact/],
        },
    ];
};

plugin upgrade, and config:

 plugins.push(
      new HTMLInlineRspackPlugin(),
      new rspack.HotModuleReplacementPlugin(),
      new PreactRefreshRspackPlugin({})
    );

now the result:

[LingyuCoder]

have you install the @swc/plugin-prefresh plugin? this error occur when swc can not find the plugin

[cbbfcd]

installed, the latest version.

"dependencies": {
"@swc/plugin-prefresh": "^3.0.3",
}

[LingyuCoder]

Not sure what the problem is. Just forked your repro and modified the rspack.config.js and it works well to me.

[cbbfcd]

have you install the @swc/plugin-prefresh plugin? this error occur when swc can not find the plugin

@LingyuCoder, my cli tool is a monorepo, swc can not find the plugin, i change code like this:

experimental: {
    plugins: [[require.resolve('@swc/plugin-prefresh'), {}]],
},

swc can find it! but i got another error:

[LingyuCoder]

The __prefresh_utils__ is just injected by ProvidePlugin. I am not sure why your monorepo can not inject corretly, perhaps need another repro to locate the error.

[cbbfcd]

I found the reason, it's that the module rule is not configured to compile cjs files, it works perfectly now, thank you very much for your help!