miragejs '[WDS] 断开连接！立即 src/index.tsxsrc/server.js

问题描述

如果我使用 miragejs createServer，WDS（Webpack 开发服务器）会断开连接。

如果我禁用 Mirages 模拟服务器，WDS 会按预期工作。

这是[WDS] disconnected!的完整调用堆栈

src/index.tsx

import { mockServer } from './server';
if (process.env.NODE_ENV === "development") {
    mockServer({ environment: "development" });
}
ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <ConnectedRouter history={history}>
                <App />
            </ConnectedRouter>
        </Provider>
     </React.StrictMode>,document.getElementById('root')
);

src/server.js

import { createServer,Response,Model } from 'miragejs';
export const mockServer = ({ environment = 'test' }) => {

    createServer({
        environment,routes() {
            this.namespace = "api";
            this.post('/user/login',(schema,request) => {
                return new Response(200,{ },{ id: "[e-mail]",email: "qwerty",token: "Edovbkeyd2943kd3" });
            });
        },});
}
export default mockServer;

解决方法

我通过从 React Hot Loader 迁移到 React Fast Refresh 解决了这个问题。

我建议阅读“React Hot Loader”的“Moving towards next step”。 React Hot Loader 正在慢慢替换为 React Fast Refresh。