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

Alguma idéia de como consertar isso?

— Павел Шиляев
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

— Павел Шиляев

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