sweetalert2 带导轨 6答案

【问题标题】：sweetalert2 with rails 6sweetalert2 带导轨 6
【发布时间】：2019-11-15 14:09:45
【问题描述】：

我正在使用 sweetify gem 将 sweetalert2 添加到我的 rails 6 应用程序中，但出现此错误

Uncaught ReferenceError: Swal is not defined

我在 environment.js 文件中添加了以下代码

environment.plugins.append('Provide', new webpack.ProvidePlugin({
  sweetalert2: 'sweetalert2/dist/sweetalert2.all',
  Swal: 'sweetalert2/dist/sweetalert2.all'
}));

我确实需要它在 application.js 文件中，如下所示

require("sweetalert2")

sweetify gem 在标签末尾添加以下代码

<script>
      Swal.fire({"showConfirmButton":true,"timer":null,"allowOutsideClick":false,"confirmButtonText":"Try again","type":"error","text":"there was a problem saving your Information, please try again","title":"Oops..."})
    </script>

我不知道我错过了什么。

非常感谢任何帮助

【问题讨论】：

这是导轨吗？听起来你也在使用 react 或某种 JS 框架
@Waclock 这看起来像带有新默认 webpacker gem 的 Rails。
@FDI 你的 webpack 编译成功了吗？您是否能够检查已编译的包以查看是否添加了 sweetify 代码？您可能还需要尝试import { Swal } from "sweetalert2";。
@taylorthurlow 是的，sweetalert 代码在那里
@FDI 如果它在包中，则在加载页面后，您应该能够从浏览器控制台使用/检查 Swal 常量。如果它没有在控制台中定义/可用，那么您可能需要我上面使用的额外导入语句。

标签： ruby-on-rails webpack ruby-on-rails-6

【解决方案1】：

尝试这样做：

yarn install sweetalert2

和

import Swal from 'sweetalert2';
window.Swal = Swal;

【讨论】：

在 assets/stylesheets/application.scss 中你必须添加 @import 'sweetalert2/src/sweetalert2';

【解决方案2】：

Rails 6.0.3 对我有用

yarn add sweetalert2
在app/javascript/packs/application.js 中添加以下条目

import Swal from 'sweetalert2/dist/sweetalert2.js'
import 'sweetalert2/src/sweetalert2.scss'
window.Swal = Swal;

【讨论】：