sweetalert2 Uncaught SyntaxError：意外的标识符答案

【问题标题】：sweetalert2 Uncaught SyntaxError: Unexpected identifiersweetalert2 Uncaught SyntaxError：意外的标识符
【发布时间】：2018-08-02 06:59:36
【问题描述】：

我很想使用 SweetAlert2。但是，我无法让它工作......我阅读了关于 stackoverflow 的各种帖子。但是，我无法解决我的问题..

sweetalert2 github page 表示如果需要，我可以通过添加
“sweetalert2/dist/sweetalert2.min.js”
&“sweetalert2/dist/sweetalert2.min.css”来单独包含样式表。

或者，包括“import Swal from 'sweetalert2'”
和“const Swal = require('sweetalert2')”。

于是，我采用了第一种方法，得到如下错误信息：

获取文件：///Users/HyejungLim/SaferTrip_JL/sweetalert2/dist/sweetalert2.min.js 0 () index.html:21
GET file:///Users/HyejungLim/SaferTrip_JL/sweetalert2/dist/sweetalert2.min.css 0 () index.html:22
获取文件：///Users/HyejungLim/SaferTrip_JL/sweetalert2/dist/sweetalert2.all.min.js 0 () jquery.min.js:2 [Violation] 'setTimeout' 处理程序耗时 120 毫秒 index.js:31
Uncaught ReferenceError: swal is not defined
- 在 HTMLDivElement。 (index.js:31)
- 在 HTMLDivElement.dispatch (jquery.min.js:2)
- 在 HTMLDivElement.y.handle (jquery.min.js:2)

单击绿色按钮和其中一个圆圈后，您可以看到最后一条错误消息。

$(document).ready(function() {
  $('#test').click(function(){
  $(".options:hidden").fadeIn()
    .on("click", function(){
      $(this).css("background", "#F3C78D");
    })
    .on("click", function(){
      swal({
        title: 'Sweet!',
        text: 'Modal with a custom image.',
        imageUrl: 'https://unsplash.it/400/200',
        imageWidth: 400,
        imageHeight: 200,
        imageAlt: 'Custom image',
        animation: false
      })
     });
  });
});

body{
  font-family: 'Poor Story', sans-serif;
}

#test{
   cursor: pointer;
   display: block;
   text-align: center;
   position: absolute;
   display: flex;
   left: 50%;
   top: 50%; 
   transform: translate(-50%, -50%);
}
.options {
    background: #f7f7f5;
    display: none;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    width: 100%;
    left: 50%;
    top: 50%; 
    border-radius: 50%;
    border-style: solid;
    border-color: #F3C78D;
    width: 60px;
    height: 60px;
    font-size: 12px;
}

.options span {
    color: #000000;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    width: 100%;
   left: 50%;
   top: 50%; 
   transform: translate(-50%, -50%);
}

#option1{
    transform: translate(-100%, -150%);
}

#option2{
    transform: translate(-160%, -40%);
}

#option3{
    transform: translate(-50%, 50%);
}

#option4{
    transform: translate(60%, -40%);
}

#option5{
    transform: translate(15%, -150%);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap 4.1.x -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">
<!-- sweetalert2 -->
  <script src="sweetalert2/dist/sweetalert2.all.min.js"></script>
<!-- You can also include the stylesheet separately if desired: -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>
  <link rel="stylesheet" href="sweetalert2/dist/sweetalert2.min.css">
  
</head>
<body>
  <div class="container">
    <button type="button" class="btn btn-outline-success" id="test">test</button>
    <div class="options" id="option1"><span>Hello<br>World</span></div>
    <div class="options" id="option2"><span>Goodbye</span></div>
    <div class="options" id="option3"><span>How<br>are<br>you?</span></div>
    <div class="options" id="option4"><span>Fine</span></div>
    <div class="options" id="option5"><span>Okay</span></div>
  </div>
</body>
<footer>
  <!-- Bootstrap 4.0 : jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
  <script type="text/javascript" src="index.js"></script>
</footer>
</html>

按照官方页面的建议，我尝试了第二种方法，即添加
“import Swal from 'sweetalert2'”
和“const Swal = require('sweetalert2')”
JavaScript 文件。

所以，我做了并收到以下错误消息：

未捕获的 SyntaxError：意外的标识符
由于“从'sweetalert2'导入Swal”。

此外，没有任何 JavaScript 代码起作用，在单击绿色按钮后显示五个圆圈。

总之，第二次尝试给我带来了更多问题。

我怎样才能让 sweetalert2 工作？请给我任何建议。提前致谢！

【问题讨论】：

当我在终端输入“npm list”时，我看到“sweetalert2@7.26.9”。所以，我认为我正确安装了它。
另外，有人建议添加“window.swal = require('sweetalert2');”在laracasts.com/discuss/channels/javascript/…。但是，我收到了“ReferenceError：require is not defined”错误消息...
我接受了将编辑从“sweetalert2/dist/sweetalert2.min.js”更改为“cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/…>”的建议。现在可以了。但是，我收到其他 sweet2 链接的错误消息。我想我对编程知之甚少……

标签： javascript jquery html css sweetalert2

【解决方案1】：

我在您的案例中发现了 2 个问题。

Jquery CDN 链接放在 Sweetheart Link 之后。将 jquery CDN 链接放在 Sweetalert 上方而不是页脚。
在大写的 Swal({ 标题：'甜蜜！'，。

【讨论】：

使用大写的“S”给了我一个错误：“index.js:31 Uncaught ReferenceError: Swal is not defined”。小写的 's' 适合我。
另外，我使用以下方法解决了这个问题：
哦，有趣！我无法让它在我的情况下工作。感谢您提供 jsfiddle 链接。 :)