3
respostas

[Bug] Warning: findDOMNode ao finalizar a campra e problema com o deploy

Node v14.17.4 npm v6.14.14

GitHub: https://github.com/Jheimys/React-context

Ao finalizar a compra do carrinho estou recebendo um warning e também não estou conseguindo fazer o deploy do projeto. Insira aqui a descrição dessa imagem para ajudar na acessibilidade

3 respostas

Oi Jheimys! Tudo ok contigo?

Bom pra entender o que fazer devemos entender o que gerou esse erro.

Em muitos casos, o causa esses tipos de avisos não é nós nem o código, mas alguns componentes de uma biblioteca de terceiros usada no projeto. Essas bibliotecas não estão com defeito, mas simplesmente não foram atualizadas para a versão mais recente a tempo. Entre elas, existem bibliotecas muito famosas e populares como React Bootstrap, React Transition Group, React Draggable, entre outras.

Uma opção para resolver isso seria estar removendo/eliminando a biblioteca que está gerando isso no seu projeto. Aqui seria o <StrictMode> ele é alocado no arquivo index.js do projeto React quando nós criamos o projeto base. Portando uma opção seria seguir o caminho "seu-projeto-react/src/index.js", entrar no arquivo e remover o componente <React.StrictMode> de lá.

Saindo de algo parecido com isso:

ReactDOM.render(
  <React.StrictMode>
    <StylesProvider injectFirst>
      <ThemeProvider theme={theme}>
        <Router />
      </ThemeProvider>
    </StylesProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Para algo mais ou menos assim:

ReactDOM.render(
  
    <StylesProvider injectFirst>
      <ThemeProvider theme={theme}>
        <Router />
      </ThemeProvider>
    </StylesProvider>,
  document.getElementById('root')
);

O <StrictMode> é uma ferramenta para destacar possíveis problemas em um aplicativo React. Ele ativa verificações e avisos adicionais, removendo-o warning vai sumir.

Ou uma outra opção para tentar resolver o problema, seria atualizar as bibliotecas utilizadas no projeto, extensões, dependências, material UI, e outros.

Em suma era isso!

Caso precise estarei por aqui.

Abraços e bons estudos.

Caso este post tenha lhe ajudado, por favor marque ele como solução! ✓

Olá Renan,

Obrigado pela ajuda o warning conseguir resolver com suas instruções. Porém ainda não consigo fazer o deploy.

Obs: atualizei a versão do Node para v18.16.1

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Opa, Jheimys, tudo ok?

Esse erro parece estar relacionado a um problema durante a construção (build) do seu projeto. O erro é específico para uma biblioteca ou módulo que está tentando usar alguma funcionalidade criptográfica, possivelmente relacionada a OpenSSL. O erro em questão é: error:0308010C:digital envelope routines::unsupported.

Ele normalmente ocorre quando o código está tentando usar uma funcionalidade criptográfica que não é suportada ou não está disponível no ambiente em que o código está sendo executado. Isso pode ocorrer por várias razões, como incompatibilidades de versão, dependências ausentes ou problemas na configuração do ambiente.

Aqui estão algumas etapas que você pode seguir para tentar resolver esse problema:

  1. Verificar Dependências: Certifique-se de que todas as dependências do seu projeto estejam corretamente instaladas e atualizadas. Isso inclui o Node.js, suas bibliotecas e quaisquer outras dependências do projeto.

  2. Verificar a Versão do Node.js: O erro pode ser causado por incompatibilidades com a versão do Node.js. Verifique se a versão que você está usando é compatível com as versões necessárias para as bibliotecas e dependências do seu projeto.

  3. Reinstalar Dependências: Às vezes, problemas de construção podem ocorrer devido a corrupção em algumas dependências. Tente excluir a pasta node_modules do seu projeto e o arquivo package-lock.json e, em seguida, execute npm install novamente para reinstalar todas as dependências.

  4. Atualizar Bibliotecas: Verifique se todas as bibliotecas que você está usando estão atualizadas para suas versões mais recentes. Isso pode resolver problemas conhecidos e incompatibilidades.

  5. Verificar Configurações de Criptografia: Se o erro estiver relacionado a funcionalidades criptográficas, você pode precisar verificar as configurações de criptografia no seu projeto. Verifique se você está usando bibliotecas atualizadas e compatíveis com as configurações do seu ambiente.

  6. Verificar Configurações de Build: Se você estiver usando algum processo de build (como Webpack), verifique se as configurações estão corretas e não estão causando conflitos ou problemas de compilação.

  7. Verificar Variáveis de Ambiente: Algumas bibliotecas podem depender de variáveis de ambiente ou configurações específicas. Verifique se todas as variáveis necessárias estão configuradas corretamente.

  8. Verificar Compatibilidade: Verifique a documentação das bibliotecas que você está usando para ver se existem problemas conhecidos ou requisitos específicos para o ambiente de execução.

Se depois de seguir essas etapas o erro persistir, pode ser útil procurar pelo suporte do site onde você está tentando realizar o deploy. Lá eles podem ser mais assertivos em relação ao erro e explicar o que deve ser feito para que o deploy prossiga com sucesso.

Era isso.

Espero ter ajudado.

Abraços e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software