Next.js: Desativar HMR

HMR sempre é compatível com o modo dev. Não há uma maneira oficial de desligá-lo.
Não temos planos de fazer isso no curto prazo.

Isso não causaria uma carga no servidor? Precisamos de uma maneira de desligar o HMR para rodar em produção.

Está em produção. Certifique-se de que está executando next build e next start ou next build e NODE_ENV=production node server.js em produção.

Desligar o HMR pode ser útil ao trabalhar no layout. Estou editando styled-components e alguns estilos css globais, mas a visualização é interrompida logo. O motivo é que a página obtém uma mistura de estilos renderizados por SSR e os que acabaram de ser gerados. Parece não haver maneira de superar isso, exceto desligando o HMR.

Além de HMR ainda ser compatível apenas com ES5 (nem todo mundo precisa mais transpilar classes), tenho encontrado regularmente bugs relacionados a HMR spazzy que ocorrem apenas no desenvolvimento. Eu realmente adoraria ter uma maneira de desativá-lo.

Mesmo uma solução hacky seria apreciada. Está se transformando em um pesadelo.

Acredito que estou encontrando um problema relacionado. Atualmente tentando usar react-waypoint em uma página Next.js. Ao chamar this.setState de dentro de um manipulador de eventos Waypoint, estou recebendo um erro Maximum call stack size exceeded . Isso ocorre apenas ao executar Next.js no modo dev. Se eu npm run build e npm start o problema não ocorre.

Talvez relacionado a esse problema ?

De qualquer forma, poderíamos reabrir esse problema. O HMR pode ser muito irritante em várias situações. Se isso não for uma prioridade, você pode fornecer algumas informações de onde encontrar esse código (para desativá-lo manualmente) e / ou fazer um PR @arunoda

No momento, estamos enfrentando grandes problemas com o Apollo GraphQL + Next JS (5.0.0). getDataFromTree simplesmente não funciona e isso quebra muitas coisas em nossa configuração :(

@timneutkens , @arunoda , você pode reabrir isso?

E por falar nisso https://github.com/zeit/next.js/issues/1938#issuecomment -358195616

parece um problema com o shouldComponentUpdate . Uma coisa importante a saber é que no modo dev essas funções não são chamadas devido às limitações da funcionalidade de
Eu diria que execute no modo de produção localmente e adicione algum registro às suas funções.

Isso parece uma coisa importante

Às vezes, eu gostaria de desabilitar o HMR no modo dev apenas para evitar entupir a guia de rede das ferramentas de desenvolvimento com ruídos desnecessários de mensagens.

"on-demand-entries-ping? page = / xxx", etc

Pressionar CMD-R para recarregar a página não é um grande problema, reiniciar o servidor para obter atualizações no modo prod é uma dor.

como solução alternativa, você pode evitar solicitações de hmr com o recurso de "bloqueio de solicitação" das ferramentas de desenvolvimento do Chrome

@vanmik Ótima dica, obrigado! ✨

Para encontrar o bloqueio de solicitações no Chrome (pelo menos 66), você pode precisar:

abra 'Personalizar e controlar DevTools' (três pontos verticais)> More tools > Request Blocking . Isso abrirá o console de Bloqueio de Solicitações, onde você pode verificar as fontes de solicitação a serem bloqueadas, conforme mostrado na captura de tela de

Quero mencionar que você não está limitado a ferramentas de desenvolvimento com isso. Você pode usar um plug-in do navegador para bloquear solicitações. Nesse caso, você não precisa manter as ferramentas de desenvolvimento abertas todas as vezes apenas para isso.

Mas espero que no futuro tenhamos algo simples como:

// next.config.js
module.exports = {
  hmr: false
}

HRM é uma merda. Isso traz mais dificuldades do que benefícios (por exemplo, quando algumas partes do código são recarregadas a quente enquanto outras não, o que causa um estado inconsistente).

Embora a dica de @vanmik pare a operação real do HMR, meu console de desenvolvimento ainda está cheio de http://localhost:3000/_next/on-demand-entries-ping?page=/xxx entradas, só que agora são erros.

Não aceitável para depuração: - /

Claro que adoraria ter

// next.config.js
module.exports = {
  hmr: false
}

Talvez alguém possa escrever um plugin para isso ???

@gihrig você pode filtrar esses erros com o menu de contexto do console (clique com o botão direito no erro):

@arunoda Algum progresso nisso? Estou tendo um problema com os proptypes HMR e immutablejs - super frustrante. Veja: https://github.com/facebook/prop-types/issues/221

Minha solução para isso foi habilitar request blocking e, em seguida, adicionar a solicitação on-demand-entries-ping à lista de solicitações bloqueadas. Espero que ajude outras pessoas que não gostam de HMR tanto quanto eu.

Para desativar o recarregamento de módulo ativo (HMR) no Next.js v7 +, adicione ao seu arquivo next.config.js :

module.exports = {
  webpackDevMiddleware: (config) => {
    config.watchOptions = config.watchOptions || {};
    config.watchOptions.ignored = [
      // Don't watch _any_ files for changes
      /.*/,
    ];
    return config;
  },
};

Isso desabilitará a reconstrução na mudança, o que por sua vez fará com que o navegador nunca "veja" nenhuma mudança e, portanto, não recarregará nada. Isso significa que Next.js não irá recompilar nas alterações . Você terá que reiniciar o servidor next.js toda vez que houver uma mudança e, em seguida, atualizar seu navegador.

Para uma solução que força o recarregamento de uma página inteira a cada alteração, consulte este comentário abaixo .

FWIW mesclando isso em breve: https://github.com/zeit/next.js/pull/4508

Para uma solução que sempre recarregará a página nas mudanças , você pode criar um server.js :

const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {

  // ℹ️ Below is the magic which forces a page reload on every change
  // ℹ️ From https://github.com/zeit/next.js/issues/1109#issuecomment-446841487

  // The publish function tells the client when there's a change that should be hot reloaded
  const publish = app.hotReloader.webpackHotMiddleware.publish.bind(
    app.hotReloader.webpackHotMiddleware,
  );

  // Intercept publish events so we can send something custom
  app.hotReloader.webpackHotMiddleware.publish = (event, ...rest) => {
    let forwardedEvent = event;

    // upgrade from a "change" to a "reload" event to trick the browser into reloading
    if (event.action === 'change') {
      forwardedEvent = {
        action: 'reload',
        // Only `/_document` pages will trigger a full browser refresh, so we force it here.
        data: ['/_document'],
      };
    }

    // Forward the (original or upgraded) event on to the browser
    publish(forwardedEvent, ...rest);
  };
  // ℹ️ End force page reload on change

  // ... Whatever custom server setup you have. See: https://github.com/zeit/next.js/#custom-server-and-routing
});

Tenho cerca de 80% de certeza de que isso vai quebrar no futuro.

É um hack horrível, mas a única maneira de contornar um bug que faria com que a guia do navegador consumisse> 100% da CPU e travasse no Chrome a cada atualização ativa.

Esperançosamente, quando o hack for interrompido, haverá uma solução oficial ou os bugs mencionados neste problema serão corrigidos 👍

O motivo pelo qual desejo desabilitar o HMR é que o painel DevTools / Applications / Cookies (Chrome Windows) perde o foco conforme você digita porque as atualizações do HMR continuam acontecendo em segundo plano. Suspeito que esse seria o caso, mesmo se eu dissesse ao webpackDevServer para ignorar todos os arquivos. A conexão do websocket ainda seria feita em segundo plano e acredito que é essa conexão que está destruindo o painel de cookies.

Sendo o ponto: uma solução ideal deve desativar HMR totalmente. Obrigado!

É uma pena que você não pode simplesmente adicionar isso ao seu next.config.js

module.exports = {
  webpackDevMiddleware: config => {
    config.lazy = true;
    return config;
  },
};

Esta opção instrui o módulo a operar no modo 'preguiçoso', o que significa que ele não irá recompilar quando os arquivos forem alterados, mas sim a cada solicitação. Parece algo que muitos de nós esperamos sem ter que ir tão longe quanto as soluções de @jesstelford .

Fonte : https://github.com/webpack/webpack-dev-middleware#lazy

Quando tento fazer isso em next 7.0.2 , recebo o seguinte erro:

Tive a oportunidade de trabalhar com um projeto Create React App hoje.

Acho que a raiz desse problema de HMR não é que o HMR seja mau, mas sim a maneira como ele é implementado.

Simplificando, ter o cliente sondando o servidor periodicamente não é o ideal.

A partir de uma observação superficial, parece que o CRA usa uma conexão de soquete que só se comunica com o cliente quando um arquivo é alterado e, em seguida, o cliente recarrega a página. Esse esquema também resulta em uma atualização mais rápida do navegador porque a operação não depende do próximo intervalo de pesquisa.

CRA é open source . Seria ótimo se alguém com tempo e interesse pudesse cavar para atualizar o HMR da Next para seguir o modelo CRA (e torná-lo facilmente desativado também, é claro :-)

@gihrig provavelmente existem alguns motivos diferentes pelos quais as pessoas estão procurando desabilitar o HMR.

Meu entendimento é que o react-hot-loader requer certas suposições sobre como seu aplicativo é escrito, como o estado é modelado e a ausência de identidade de objeto significativa. Essas suposições normalmente são válidas para um aplicativo baseado em redux escrito corretamente, mas podem não ser válidas para aplicativos que foram projetados usando outras abordagens. Concordo que o problema não é que o HMR seja mau - apenas que não é uma ferramenta genérica. Isso cria alguma dissonância no contexto de uma estrutura que, de outra forma, é agnóstica sobre essas decisões de design.

Mudar de polling para websockets é provavelmente uma boa ideia, mas polling não é “a raiz do problema”, ou melhor, não está relacionado a pelo menos alguns dos problemas que as pessoas aqui enfrentaram.

Observe que os dois últimos comentários fazem suposições erradas:

• Next.js não usa react-hot-loader, ele renderiza novamente a árvore de componentes quando uma mudança é emitida
• Next.js não faz polling para receber alterações, ele faz polling para marcar quais páginas ainda estão sendo visualizadas, no canário isso foi alterado para um websocket apenas para que o usuário não veja a votação acontecendo em seus devtools. Para expandir ainda mais este HMR funciona usando uma conexão de fonte de evento, o que significa que o servidor envia eventos (na mudança de arquivo) para o navegador

@timneutkens É ótimo ouvir isso, obrigado. Não era uma suposição errada, porém, era uma informação desatualizada. O RHL estava em uso quando começamos a usar o Next e foi a causa dos problemas que encontramos que me levaram a comentar originalmente neste tópico. Eu não vejo nenhum problema relacionado ao HMR ao usar o Next há algum tempo.

Na verdade, agora podemos executar nossa compilação ES2017 no dev!

Depois de 2 anos reclamando do HMR, ainda não existe uma forma oficial de desativá-lo? !!

Por que este loggin é GET / _next / on-demand-entries-ping? Page = / no meu aplicativo NON next.js?

- auto-resolvido: teve que comentar o logger app.use. (morgan (dev)) o estranho é que o Morgan está instalado em um aplicativo diferente sem next.js, então algo está acontecendo com isso sendo registrado por Morgan, quero saber por que isso está acontecendo. Isso não acontecia antes de instalar o next.js em um projeto diferente.

Reabra o problema definitivamente não foi resolvido.

+1