Skip to content
This repository was archived by the owner on Jul 24, 2025. It is now read-only.
This repository was archived by the owner on Jul 24, 2025. It is now read-only.

Refresh does not always work with class components #199

@n9

Description

@n9

When it works

If a class component is exported from a module that also exports a functional component.

Sample:

import React from "react";

export class Bar1 extends React.Component {
    render() {
        return <span>Barx</span>
    }
}

export function DummyBarFc() {
    return <span>dummy</span>
}

When it does not work

If a class component is exported from a module that exports no functional component.

Sample:

import React from "react";

export class Bar1 extends React.Component {
    render() {
        return <span>Barx</span>
    }
}

// export function DummyBarFc() {
//     return <span>dummy</span>
// }

Why it does not work

The refresh runtime is only included

RefreshRuntime.__hmr_import(import.meta.url).then((currentExports) => {
RefreshRuntime.registerExportsForReactRefresh("${id}", currentExports);
import.meta.hot.accept((nextExports) => {
if (!nextExports) return;
const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate("${id}", currentExports, nextExports);
if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage);
});
});

if the code of module matches

const refreshContentRE = /\$Refresh(?:Reg|Sig)\$\(/;

However, the pattern is not generated by SWC for class components, as fast refresh does not preserve their state (see swc-project/swc#4431 (comment)).
So a module with no exported functional component is not handled by HMR.

(Note: I will provide a PR.)

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions