javascript - split.js 在 Rails 6 中导致“Uncaught TypeError: Splitting is not a function”
问题描述
我在我的 Rails 6 项目中使用 split.js javascript 库。当我尝试加载页面时,控制台中出现“未捕获的类型错误:拆分不是函数”。
我已经使用 Yarn 安装了 javascript 库:
yarn add splitting
Splitting()
在我的 applicaiton.js 文件中需要使用 scripts.js 中的其他 Javascript 调用。我已经以多种方式配置了我的 application.js 文件以尝试解决该问题,但无济于事。这是我当前对该文件的迭代(包括整个文件以防需要考虑其他交互):
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "jquery"
import "popper.js"
import "bootstrap"
import "@fortawesome/fontawesome-free/css/all"
require("@fortawesome/fontawesome-free/css/fontawesome.css")
// bootstrap css files get loaded by this. This seems to be problematic.
// import "css/site"
import "isotope-layout"
import "justifiedGallery"
require("justifiedGallery/dist/css/justifiedGallery.css")
// https://splitting.js.org
window.Splitting = require('splitting/dist/splitting').Splitting;
import "splitting/dist/splitting.css";
import "splitting/dist/splitting-cells.css";
// import Splitting from "splitting/dist/splitting";
import "pace"
// https://simpleparallax.com/
import simpleParallax from "simple-parallax-js"
//https://swiperjs.com/get-started
//import Swiper from 'swiper/bundle';
window.Swiper = require('swiper/bundle').Swiper
require("swiper/swiper-bundle.css")
//https://github.com/graingert/wow
//import WOW from 'wowjs';
window.WOW = require('wowjs').WOW;
require("wowjs/css/libs/animate.css")
//https://greensock.com/docs/v3/Installation for animation
import gsap from "gsap/dist/gsap"
import MotionPathPlugin from "gsap/dist/MotionPathPlugin"
//http://kottenator.github.io/jquery-circle-progress/
import "jquery-circle-progress/dist/circle-progress"
// https://github.com/kenwheeler/slick
// window.slick = require('slick-carousel').slick;
import slick from "slick-carousel"
require("slick-carousel/slick/slick.css")
require("slick-carousel/slick/slick-theme.css")
// https://github.com/ionic-team/ionicons
import "ionicons"
// SMC custom libraries that came with template
require ("map.js")
require ("scripts.js")
Rails.start()
Turbolinks.start()
ActiveStorage.start()
这是 scripts.js 文件的相关部分:
// ...
Splitting();
// ...
这是我的配置 > webpack > environment.js 文件:
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery'
})
)
module.exports = environment
请提供您对如何解决此问题的见解。谢谢
解决方案
感谢@rossta 的帮助,我解决了这个问题。我需要将 split.js 模块的所有导入语句从 application.js 移动到调用该模块的 script.js 文件中。所以我在scripts.js的顶部添加了以下内容:
import "splitting/dist/splitting.css";
import "splitting/dist/splitting-cells.css";
import Splitting from "splitting";
推荐阅读
- django - 无法连接到 Django 中的 sqlite3 数据库
- binding - SwiftUI 在多个类之间传递数据
- sql - 查找和替换字符
- c# - 为我们的产品寻找身份服务器选项
- libtorrent - 使用 libtorrent (Python) 下载许多种子
- javascript - 发生未处理的异常:对象原型可能只是一个对象或 null:未定义
- c# - 使用 Asp.net 应用程序中的 WCF SOAP 服务时出错(没有端点监听)
- java - JPA:两端都有列表而没有无限循环
- java - weblogic.xml.crypto.wss.WSSecurityException:时间戳验证失败
- docker - 带有 docker 的 k8s 使用 env 变量