Erro jQuery Elementor Crocoblock: como corrigir

Tipo Page Builders

Nome do erro Erro de jQuery entre Elementor e Crocoblock EN: jQuery conflict between Elementor and Crocoblock

Severidade Grave

Descrição O erro de jQuery entre Elementor e Crocoblock aparece quando dois scripts carregam versões diferentes de jQuery ou quando o jQuery e adiado, e o console mostra 'jQuery is not defined' ou '$ is not a function'. Os widgets dinamicos do JetEngine, os filtros do JetSmartFilters e os popups do JetPopup param de funcionar.

O que é o erro de jQuery entre Elementor e Crocoblock?

O erro de jQuery entre Elementor e Crocoblock e um conflito de JavaScript em que a biblioteca jQuery deixa de estar disponível no momento em que os scripts dos plugins tentam usa-la. O Elementor e os addons Crocoblock (JetEngine, JetSmartFilters, JetPopup, JetElements) dependem de jQuery e do jQuery Migrate para inicializar widgets, AJAX e interacoes no front-end.

Como identificar

O console do navegador mostra ‘Uncaught ReferenceError: jQuery is not defined’ ao abrir a página.
O console mostra ‘Uncaught TypeError: $ is not a function’ ou ‘jQuery(…).SomeFunction is not a function’.
Listing Grids do JetEngine aparecem vazios ou não paginam, mesmo com itens cadastrados.
Filtros do JetSmartFilters não aplicam e a URL não atualiza ao selecionar uma opção.
Popups do JetPopup ou abas/sliders do JetElements não abrem ao clicar.
Aviso ‘JQMIGRATE: Migrate is installed’ ou ‘jQuery.migrateMute’ some e funções antigas quebram.

Antes de começar: Faca backup do site e teste a desativacao de plugins e a atualização em ambiente de staging. Desativar o plugin errado em producao pode derrubar páginas montadas com JetEngine. Anote a ordem em que reativa cada plugin para conseguir reverter.

Como prevenir

Mantenha Elementor, Elementor PRO e os plugins Crocoblock sempre na mesma janela de atualização, testando em staging antes de subir.
No plugin de cache, deixe o jquery-core e o jquery-migrate permanentemente fora do Delay JS e da combinacao de JavaScript.
Evite plugins que registram a própria versão de jQuery; prefira os que usam o jQuery do nucleo do WordPress.
Em snippets próprios, sempre use o wrapper jQuery(function($){ … }); em vez do atalho $ global.

Causa

Um plugin ou tema registra a sua própria versão de jQuery (via wp_register_script com handle 'jquery'), sobrescrevendo a versão do WordPress que o Elementor e o Crocoblock esperam.
A opção Delay JavaScript Execution (WP Rocket, LiteSpeed, Perfmatters) adia o jquery-core e o jquery-migrate, fazendo os scripts do JetEngine rodarem antes do jQuery existir.
A combinacao/minificacao de JS (Combine JavaScript Files) muda a ordem de carregamento e coloca o código do addon antes do jquery-core.
O jQuery Migrate foi removido por um plugin de otimização, e um addon Crocoblock antigo ainda usa uma função depreciada (ex.: jQuery.fn.bind) que so existe com o Migrate ativo.
Um snippet customizado usa o atalho $ fora de um wrapper noConflict, e o $ aponta para outra biblioteca em vez do jQuery.
Versões incompativeis: JetEngine ou JetSmartFilters desatualizado frente a uma versão mais nova do Elementor, com a API de scripts mudada entre eles.

Como resolver

Confirme o erro exato no console: Abra a página quebrada, acesse o console do navegador e leia a primeira linha vermelha. Ela diz se o problema e jQuery ausente ou uma função específica de addon que sumiu. Anote o arquivo .js citado, porque ele aponta o plugin culpado.
```
Tecla F12 -> aba Console
Uncaught ReferenceError: jQuery is not defined
Uncaught TypeError: $ is not a function
```
Isole o conflito desativando plugins: Desative todos os plugins, exceto Elementor, Elementor PRO e os do Crocoblock. Recarregue e veja se o erro some. Se sumir, reative um a um, limpando o cache a cada teste, até o erro voltar — o último reativado e o que carrega o jQuery duplicado.
```
wp plugin deactivate --all --exclude=elementor,elementor-pro,jet-engine
wp plugin activate nome-do-plugin
wp cache flush
```
Exclua o jQuery do Delay e da combinacao de JS: No seu plugin de cache, retire o jquery-core, o jquery-migrate e os scripts do Crocoblock das otimizacoes de adiar e combinar JavaScript. Isso garante que o jQuery carregue primeiro e que os addons o encontrem ao inicializar.
```
jquery.min.js
jquery-migrate.min.js
/wp-content/plugins/jet-engine/
/wp-content/plugins/jet-smart-filters/
```
Garanta o jQuery Migrate carregado: Se um plugin de otimização removeu o jQuery Migrate, reative-o. Addons Crocoblock antigos ainda usam funções depreciadas que so existem com o Migrate presente. Desative a opção 'Remove jQuery Migrate' (ou equivalente) no plugin de performance.
```
wp option get perfmatters_options
Desmarcar: Remove jQuery Migrate
```
Teste no Modo de Segurança do Elementor e atualize: Abra a página com o Modo de Segurança do Elementor para confirmar que o conflito vem de outro plugin. Em seguida, atualize Elementor, Elementor PRO e todos os plugins Crocoblock para versões compativeis entre si, sempre testando antes em staging.
```
Elementor -> Ferramentas -> Modo de Segurança -> Ativar
wp plugin update jet-engine jet-smart-filters elementor elementor-pro
```

JavaScript

// Snippet proprio: sempre isole o jQuery para evitar '$ is not a function'
// Errado: o $ global pode ser de outra biblioteca
// $('.jet-listing-grid').slick();

// Certo: o $ dentro do wrapper e garantidamente o jQuery
jQuery( function ( $ ) {
  $( '.jet-listing-grid' ).each( function () {
    // sua logica que depende do jQuery aqui
  } );
} );

// Se precisar rodar so depois do Elementor inicializar o front-end:
jQuery( window ).on( 'elementor/frontend/init', function () {
  // codigo que interage com widgets do Elementor/Crocoblock
} );

Perguntas frequentes

Por que o erro so aparece no front-end e não no editor do Elementor

Porque o editor carrega os scripts em outra ordem e quase sempre sem o plugin de cache atuando. No front-end o cache adia ou combina o JavaScript, e e ai que o jQuery acaba carregando depois dos scripts do Crocoblock, quebrando os widgets dinamicos.

Como descubro qual plugin esta carregando o jQuery duplicado

Desative todos os plugins menos Elementor e Crocoblock, confirme que o erro sumiu e reative um a um limpando o cache a cada teste. O plugin que faz o erro voltar e o culpado. O arquivo .js citado no console também aponta a pasta do plugin.

Posso simplesmente remover o jQuery Migrate para limpar os avisos

Não sem testar. Addons Crocoblock e temas mais antigos usam funções de jQuery depreciadas que so existem com o Migrate ativo. Remove-lo pode trocar um aviso por uma quebra real de filtros e popups. Atualize os addons antes de cogitar remover o Migrate.

O Delay JavaScript Execution do WP Rocket causa esse erro

Pode causar. Quando o jquery-core e adiado junto com os scripts do JetEngine, eles tentam usar o jQuery antes dele existir. A correção e excluir o jquery, o jquery-migrate e os scripts do Crocoblock da lista de adiamento.

Atualizei o Elementor e os filtros do JetSmartFilters pararam. E o jQuery

Provavelmente e incompatibilidade de versão, não falta de jQuery. Uma versão nova do Elementor pode mudar como os scripts são registrados, e um JetSmartFilters antigo não acompanha. Atualize todos os plugins Crocoblock para a versão compativel com o seu Elementor.

O que significa o erro $ is not a function no console

Significa que o atalho $ não esta apontando para o jQuery naquele ponto do código, geralmente porque outra biblioteca tomou o $ ou porque o jQuery ainda não carregou. Use o wrapper jQuery(function($){ ... }); para garantir que o $ seja o jQuery dentro do seu script.

O Modo de Segurança do Elementor resolve o conflito de jQuery

Ele não corrige, mas diagnostica. O Modo de Segurança carrega a página sem o tema e sem outros plugins. Se o erro sumir nesse modo, o conflito vem de um terceiro plugin ou do tema, e não do Elementor nem do Crocoblock.

Grave

Como corrigir o erro de Header/Footer no Astra Pro após atualização

O Astra header footer quebrado após atualização ocorre quando o cabeçalho ou rodape do Astra Pro some, perde estilo ou troca de posicao depois de um update do tema ou do Astra Pro Addon. A causa quase sempre e CSS dinamico em arquivo defasado, módulo Custom Layouts desligado, ou regra de exibicao do layout perdida.

Atenção

Como corrigir o erro de CSS no Customizer do Astra Pro

O Astra Customizer CSS não aplica quando o código de Personalizar -> CSS Adicional não surte efeito no site, porque o cache serve o head antigo, a regra perde para a especificidade do CSS dinamico do Astra Pro, ou o CSS ficou preso a outro tema. A correção limpa o cache, sobe a especificidade do seletor e confirma o tema ativo.

Informativo

Como corrigir os estilos do WPForms que não aplicam com o Astra Pro no WordPress

Quando o estilo do WPForms não aplica com o Astra Pro, o formulário aparece sem CSS porque a opção Include Form Styling esta em No styling, o CSS do tema vence por especificidade, ou o cache combinou e removeu a folha de estilo do WPForms.

Grave

Como corrigir erros de cache entre o Elementor e o Cloudflare

O cache entre Elementor e Cloudflare quebra layout e editor quando o Cloudflare serve um CSS antigo de wp-content/uploads/elementor ou quando o Rocket Loader adia os scripts do editor. Regenerar os arquivos do Elementor, purgar o cache do Cloudflare e desligar o Rocket Loader resolve.

Atenção

Como corrigir o erro de fontes do Google entre Elementor e Perfmatters no WordPress

O erro de fontes Google entre Elementor e Perfmatters acontece quando as opções Disable Google Fonts ou Remove Unused CSS do Perfmatters removem os arquivos de fonte que o Elementor carrega, fazendo a tipografia trocar para a fonte padrão do sistema ou desaparecer no frontend.

Grave

Como corrigir o JetSmartFilters que não filtra dados dinâmicos

O JetSmartFilters que não filtra mostra o filtro aplicado mas o Listing Grid do JetEngine continua igual, sem reduzir os resultados. A causa quase sempre e o provider errado no campo This filter for, o Query ID divergente entre filtro e listagem, ou o indexador desligado para filtros de taxonomia e meta.

Setores

Extensões

Integrações

Como corrigir o erro de jQuery entre Elementor, Crocoblock e addons

O que é o erro de jQuery entre Elementor e Crocoblock?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir o erro de Header/Footer no Astra Pro após atualização

Como corrigir o erro de CSS no Customizer do Astra Pro

Como corrigir os estilos do WPForms que não aplicam com o Astra Pro no WordPress

Como corrigir erros de cache entre o Elementor e o Cloudflare

Como corrigir o erro de fontes do Google entre Elementor e Perfmatters no WordPress

Como corrigir o JetSmartFilters que não filtra dados dinâmicos

Setores

Extensões

Integrações

Extensões

Hero Sections

Seções de CTA

Login

Blog

Cabeçalhos

Seções de FAQ

Cadastro

Blog individual

Rodapés

Seções de contato

Seções de preços

Faixas

Portfólio

Seções de equipe

Números

Logotipos