splitting.js results in "Uncaught TypeError: Splitting is not a function" in Rails 6

Question

我在 Rails 6 项目中使用 splitting.js javascript 库。当我尝试加载页面时，我在控制台中收到“Uncaught TypeError: Splitting is not a function”。

我已经使用 Yarn 安装了 javascript 库：

yarn add splitting

Splitting() 与 scripts.js 中的其他 Javascript 一起调用，这在我的 applicaiton.js 文件中是必需的。我已通过多种方式配置我的 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

请提供您对如何解决此问题的见解。谢谢

Answer 1

感谢@rossta 的帮助，我解决了这个问题。我需要将 splitting.js 模块的所有导入语句从 application.js 移动到调用该模块的 script.js 文件中。所以我在 scripts.js 的顶部添加了以下内容：

import "splitting/dist/splitting.css";
import "splitting/dist/splitting-cells.css";
import Splitting from "splitting";

splitting.js results in "Uncaught TypeError: Splitting is not a function" in Rails 6

splitting.js results in "Uncaught TypeError: Splitting is not a function" in Rails 6

javascript

node-modules

webpack

webpacker

ruby-on-rails-6