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

I am using the splitting.js javascript library in my Rails 6 project. When I try to load the page I get "Uncaught TypeError: Splitting is not a function" in the console.

I have installed the javascript library using Yarn:

yarn add splitting

Splitting() is called with other Javascript in scripts.js which is required in my applicaiton.js file. I have configured my application.js file in a number of ways to try to fix the issue but to no avail. Here is my current iteration of this file (entire file included in case there are other interactions to consider):

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()

Here is relevant portion of scripts.js file:

   // ...
        Splitting();
   // ...

Here is my config > webpack > environment.js file:

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

Please provide your insights into how to fix this issue. Thx

I solved this problem thanks to some help from @rossta. I needed to move all my import statement for the splitting.js module from application.js to the script.js file in which the module was being called. So I added the following to the top of scripts.js:

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