popper.js no bootstrap 4 dá SyntaxError Exportação de token inesperada

100

Tentei instalar o bootstrap 4 e incluí os links a seguir

<script src="libs/jquery/dist/jquery.min.js"></script>
<script src="libs/tether/dist/js/tether.min.js" ></script>
<script src="libs/popper.js/dist/popper.js"></script>
<script src="libs/bootstrap/dist/js/bootstrap.min.js" ></script>

Mas ocorre o seguinte erro:

SyntaxError não capturado: exportação de token inesperada

insira a descrição da imagem aqui

Alguma idéia de como consertar isso?

javascript twitter-bootstrap bootstrap-4 popper.js Павел Шиляев
fonte
Não sei, o arquivo de bootstrap requer isso
Павел Шиляев
não, eu usei bootstrap, mas nunca me perguntou
Ashish sah
1
última versão solicitada
Павел Шиляев
bem, se for assim, direi para usar links CDN
Ashish sah
o problema é que não devo usar links de CDN ao usar o uploud no mercado
Павел Шиляев

Respostas:

35

Encontrei o mesmo problema se usar popper.js da rede CDN como cdnjs.

Se você observar o código-fonte de Bootstrap 4exemplos como, por exemplo, Navbar, poderá ver que popper.min.jsé carregado de:

<script src="https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js"></script>

Incluí isso no meu projeto e o erro desapareceu. Você pode baixar o código-fonte em

https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js

e inclua em seu projeto como um arquivo local e deve funcionar.

Phani Kumar M
fonte
sim. Você está certo. Eu copiei e colei esse código e o erro desapareceu. O CDN não especifica nenhuma versão específica depopper.js
Fabrizio Bertoglio
2
Embora funcione, acho que esta não é a maneira correta, até que a equipe do BootStrap atualize seu próprio código.
Nadeem Jamali
8
O URL acima retorna um erro não encontrado (404). Usei getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js para Bootstrap 4.1.3 e isso resolveu o problema para mim.
Mike Strother
1
Usar a técnica sugerida nesta resposta é como perseguir um alvo em movimento. A resposta certa é fornecida por Marc e Zim.
novembro
infelizmente isso não funciona mais. O erro desapareceu, mas a dica de ferramenta é a dica de ferramenta HTML padrão
deanwilliammills
249

Só peguei isso também e descobri por que isso realmente acontece. Caso outros passem por aqui:

Verifique o readme.md "Uso". O lib está disponível em três versões para três carregadores de módulo diferentes. Resumindo: se você carregá-lo com o <script>tag, deverá usar a versão UMD . Você pode encontrá-lo em /dist/umd. O padrão (in /dist) é o ESNext (ECMA-Script) que não pode ser carregado usando a scripttag.

Marc
fonte
5
Obrigado. Livrou-se do erro para mim alterando para o arquivo umd.
user1500321
4
Alterar a referência ao arquivo na pasta umd resolveu meu problema
Vimalan Jaya Ganesh
16
Esta deveria ter sido a resposta aceita. Impressionante. Muito obrigado por compartilhar.
Ajay Kumar
3
Conforme acima, esta é a verdadeira resposta.
Ron
1
Impressionante pela ajuda rápida, obrigado. Eu queria saber o que são essas pastas / umd e / esm, mas o Google não dá bons resultados.
Blackbam
91

O Bootstrap 4 requer a versão UMD do popper.jse certifique-se de que a ordem seja a seguinte:

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="~/Scripts/jquery-3.0.0.min.js"></script>
<script src="~/Scripts/umd/popper.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
Zim
fonte
A versão UMD é o único link CDN que removeu o erro.
nyusternie
Obrigado cara! Seu pedido corrigiu meu problema. Felicidades!
Noobie
18

Você também pode adicionar bootstrap.bundle.min.js e remover popper.js em seu html.

Os arquivos JS bootstrap.bundle.jsagrupados ( e minimizados bootstrap.bundle.min.js) incluem [Popper] ( https://popper.js.org/ ), mas não jQuery .

webdeveloper086
fonte
2
bootstrap.bundle.min.jsincluídopopperjs
vuhung3990
1
melhor resposta, já que não requer o uso da biblioteca Popper.js adicional
BuddyZ
10

Linha 96 em README

Alvos dist

Popper.js é fornecido atualmente com 3 destinos em mente: UMD, ESM e ESNext.

  • UMD - Definição de Módulo Universal: AMD, RequireJS e globais;
  • Módulos ESM - ES: Para webpack / Rollup ou navegador compatível com as especificações;
  • ESNext: Disponível em dist/, pode ser usado com webpack e babel-preset-env;

Certifique-se de usar o correto para suas necessidades. Se você quiser importá-lo com uma <script>tag, use UMD.

Roubar
fonte
Usar o arquivo popper.min.js localizado no diretório UMD resolveu meu problema ao instalar o popper via npm. Obrigado!
Kickin_Wing
6

Você tem o seguinte código em Bundle Config bundles.Add (new ScriptBundle ("~ / bundles / jquery"). Include ("~ / Scripts / jquery- {version} .js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                    "~/Scripts/umd/popper.min.js",
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));

seguinte código em layout html

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")

Isso funcionou para mim

ycs
fonte