MD Bootstrap 与 Rails 6 不兼容？

Question

我有一个 Rails 6 应用程序。生成时，它将这些行（和其他行）放在 application.js 中：

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

当我安装 Bootstrap 4 时，我添加了：

import "bootstrap"
import "../stylesheets/application"

document.addEventListener("turbolinks:load", () => {
    $('[data-toggle="tooltip"]').tooltip()
    $('[data-toggle="popover"]').popover()
})

现在我想添加 MD Bootstrap。我做了一个yarn add mdbootstrap 并将这一行添加到application.js：

require('mdbootstrap')

我在 JS 控制台中收到此错误：

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Object.<anonymous> (mdb.min.js:3414)
    at Object../node_modules/mdbootstrap/js/mdb.min.js (mdb.min.js:3417)
    at n (mdb.min.js:38)
    at Module../node_modules/mdbootstrap/js/mdb.min.js (mdb.min.js:3297)
    at n (mdb.min.js:38)
    at Object../node_modules/mdbootstrap/js/mdb.min.js (mdb.min.js:3292)
    at n (mdb.min.js:38)
    at mdb.min.js:74
    at Object.<anonymous> (mdb.min.js:75)
    at Object../node_modules/mdbootstrap/js/mdb.min.js (mdb.min.js:14068)
(anonymous) @ mdb.min.js:3414
./node_modules/mdbootstrap/js/mdb.min.js @ mdb.min.js:3417
n @ mdb.min.js:38
./node_modules/mdbootstrap/js/mdb.min.js @ mdb.min.js:3297
n @ mdb.min.js:38
./node_modules/mdbootstrap/js/mdb.min.js @ mdb.min.js:3292
n @ mdb.min.js:38
(anonymous) @ mdb.min.js:74
(anonymous) @ mdb.min.js:75
./node_modules/mdbootstrap/js/mdb.min.js @ mdb.min.js:14068
__webpack_require__ @ bootstrap:19
(anonymous) @ application.js:31
./app/javascript/packs/application.js @ application.js:177
__webpack_require__ @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ bootstrap:83

为什么要这样做？我该如何解决？

我读到 import 和 requires 不应该混用。这是否意味着自动生成的require 调用应该更改为导入？我能够将需求转换为导入：

import Ujs from '@rails/ujs'
import TurboLinks from 'turbolinks'
import * as ActiveStorage from '@rails/activestorage'
import 'channels'
import 'packs/reports'
import 'datatables.net-bs4'
import 'datatables.net-bs4/css/dataTables.bootstrap4.min.css'

Answer 1

我让 mdbootstrap 在 rails 6 上工作，请按照以下步骤操作：

将 jquery mdb-ui-kit 和 mdbootstrap 添加到 rails：

yarn add jquery mdb-ui-kit mdbootstrap

关于 environment.js

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.append('Provide', new webpack.ProvidePlugin({
 $: 'jquery',
 jQuery: 'jquery'
}))
module.exports = environment

添加 javascripts/packs/application.js

require("jquery")

import * as mdb from 'mdb-ui-kit';

关于资产/样式表/application.scss

@import 'mdb-ui-kit/css/mdb.min.css';
@import 'mdbootstrap/css/mdb.min.css';