"The current file is a CommonJS module..."

[eprisr]

Description:
I receive a TypeScript error, "The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("@splinetool/react-spline/next")' call instead." after a fresh installation and import. This doesn't break anything locally, but does break the build.

Steps to Reproduce:
npm install @splinetool/react-spline @splinetool/runtime
import Spline from '@splinetool/react-spline/next' in .tsx file (I'm using Next.JS 14 App Router)

Use Case:
Display 3D Phone Mockup in the upper fold/hero section. I've tried Lazy Loading using a dynamic import, but the fallback image doesn't consistently load. When it does, it's very brief, leaving a blank space until the Spline fully renders.

Actual Behavior:
Throws error and breaks build

Code Example:

Regular Import:

import React from 'react'
import Spline from '@splinetool/react-spline/next'
import Button from '../../components/base/Button'
import styles from './hero.module.css'

function Hero() {
  return (
    <section className={styles.hero}>
      <div className={` ${styles.container} container `}>
        <div className={` ${styles.left_column} column `}>
          <h1 className={styles.intro}>
            <span className={styles.greeting}>Hello,</span> <br />
            my name is &Eacute;pris
          </h1>
          <p className={styles.pronunciation}>(pronounced aye-pree)</p>
          <p className={styles.intro_text}>
            I'm a technical and visual problem solver who fuses innovation and
            creativity to craft immersive digital experiences.
          </p>
          <Button href="/about" variant="solid" colorScheme="accent2">
            About Me
          </Button>
        </div>
        <div className={` ${styles.right_column} column `}>
          <div className={styles.sosweet}>
            <Spline
              scene="https://prod.spline.design/QvnN9UZyqrXUgWZ2/scene.splinecode"
              className={`${styles.sosweet_mockup} ${styles.imgLight}`}
            />
            <Spline
              scene="https://prod.spline.design/cEkXHQu0orVinyJF/scene.splinecode"
              className={`${styles.sosweet_mockup} ${styles.imgDark}`}
            />
          </div>
        </div>
      </div>
    </section>
  )
}

export default Hero

Dynamic import:

import React from 'react'
import dynamic from 'next/dynamic'
import Image from 'next/image'
import Button from '../../components/base/Button'
import styles from './hero.module.css'

const Spline = dynamic(() => import('@splinetool/react-spline/next'), {
  loading: () => (
    <Image
      src="/assets/images/so_sweet_mockup.png"
			alt=""
			priority={true}
      className={`${styles.sosweet_mockup}`}
      width="365"
      height="753"
    />
  ),
})

function Hero() {
  return (
    <section className={styles.hero}>
      <div className={` ${styles.container} container `}>
        <div className={` ${styles.left_column} column `}>
          <h1 className={styles.intro}>
            <span className={styles.greeting}>Hello,</span> <br />
            my name is &Eacute;pris
          </h1>
          <p className={styles.pronunciation}>(pronounced aye-pree)</p>
          <p className={styles.intro_text}>
            I'm a technical and visual problem solver who fuses innovation and
            creativity to craft immersive digital experiences.
          </p>
          <Button href="/about" variant="solid" colorScheme="accent2">
            About Me
          </Button>
        </div>
        <div className={` ${styles.right_column} column `}>
          <div className={styles.sosweet}>
            <Spline
              scene="https://prod.spline.design/QvnN9UZyqrXUgWZ2/scene.splinecode"
              className={`${styles.sosweet_mockup} ${styles.imgLight}`}
            />
            <Spline
              scene="https://prod.spline.design/cEkXHQu0orVinyJF/scene.splinecode"
              className={`${styles.sosweet_mockup} ${styles.imgDark}`}
            />
            <svg
              width="572"
              height="443"
              className={styles.sosweet_bg}
              viewBox="0 0 572 443"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              xmlnsXlink="http://www.w3.org/1999/xlink">
              <ellipse
                cx="69.6033"
                cy="74.6112"
                rx="69.6033"
                ry="74.6112"
                className={styles.sosweet_ellipse}
              />
              <path
                d="M465.367 442.5C400.302 442.5 352.107 365.564 352.107 328.066C352.107 258.242 424.4 203.934 487.657 203.934C561.156 203.934 572 255.656 572 293.154C572 330.652 538.263 442.5 465.367 442.5Z"
                mask="url(#pattern-mask)"
                className={styles.sosweet_pattern}
              />
              <defs>
                <pattern
                  id="pattern0"
                  patternContentUnits="objectBoundingBox"
                  width="0.0545719"
                  height="0.0503006">
                  <use
                    xlinkHref="#image0_185_645"
                    transform="scale(0.00454766 0.00419172)"
                  />
                </pattern>
                <mask id="pattern-mask" x="0" y="0" width="1" height="1">
                  <rect
                    x="350"
                    y="200"
                    width="220"
                    height="245"
                    fill="url(#pattern0)"
                  />
                </mask>
                <image
                  id="image0_185_645"
                  width="12"
                  height="12"
                  xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA4SURBVHgB7cwxEQAwCATBQzm4QgQaEiskOIAuRb75ZueExla4CWiCtfAOz/v68SO4NsEVZ4IrfgCccWkURPNAMQAAAABJRU5ErkJggg=="
                />
              </defs>
            </svg>
          </div>
        </div>
      </div>
    </section>
  )
}

export default Hero