Next.js (14.2.5) Unhandled Runtime Error TypeError: createStringInterpolator is not a function

[robksawyer]

Bug summary

Next.js (14.2.5)

Unhandled Runtime Error
TypeError: createStringInterpolator is not a function

Call Stack
createInterpolator
node_modules/@react-spring/animated/node_modules/@react-spring/shared/dist/react-spring_shared.modern.mjs (500:1)
new AnimatedString
node_modules/@react-spring/animated/dist/react-spring_animated.modern.mjs (76:40)
AnimatedString.create
node_modules/@react-spring/animated/dist/react-spring_animated.modern.mjs (82:1)
SpringValue._set
node_modules/@react-spring/core/dist/react-spring_core.modern.mjs (1141:22)
SpringValue._prepareNode
node_modules/@react-spring/core/dist/react-spring_core.modern.mjs (895:1)
eval
node_modules/@react-spring/core/dist/react-spring_core.modern.mjs (1621:1)
Array.forEach
<anonymous>
each
node_modules/@react-spring/core/node_modules/@react-spring/shared/dist/react-spring_shared.modern.mjs (43:1)
prepareSprings
node_modules/@react-spring/core/dist/react-spring_core.modern.mjs (1619:10)
eval
node_modules/@react-spring/core/dist/react-spring_core.modern.mjs (1593:1)
Array.forEach
<anonymous>
each
node_modules/@react-spring/core/node_modules/@react-spring/shared/dist/react-spring_shared.modern.mjs (43:1)
getSprings
node_modules/@react-spring/core/dist/react-spring_core.modern.mjs (1586:11)
eval
node_modules/@react-spring/core/dist/react-spring_core.modern.mjs (1784:1)
Array.map
<anonymous>
useSprings
node_modules/@react-spring/core/dist/react-spring_core.modern.mjs (1784:1)
GridSkeleton
node_modules/@shopify/polaris-viz/build/esm/components/ChartSkeleton/components/GridSkeleton/GridSkeleton.js (38:42)
React
renderWithHooks
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (11121:1)
mountIndeterminateComponent
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (16869:1)
beginWork$1
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (18458:1)
beginWork
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26927:1)
performUnitOfWork
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25748:1)
workLoopSync
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25464:1)
renderRootSync
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25419:1)
recoverFromConcurrentError
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24597:1)
performSyncWorkOnRoot
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24899:1)
flushSyncWorkAcrossRoots_impl
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (7758:1)
flushSyncWorkOnAllRoots
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (7718:1)
commitRootImpl
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26369:1)
commitRoot
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26077:1)
commitRootWhenReady
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24749:1)
finishConcurrentRender
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24714:1)
performConcurrentWorkOnRoot
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24559:1)
workLoop
node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (256:1)
flushWork
node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (225:1)
MessagePort.performWorkUntilDeadline
node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (534:1)

Specifications

  System:
    OS: macOS 14.3
    CPU: (10) arm64 Apple M1 Max
    Memory: 78.77 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: 7.29.1 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 127.0.6533.73
    Safari: 17.3
  npmPackages:
    @shopify/polaris-viz: ^14.4.0 => 14.4.0 
    react: ^18 => 18.3.1 
    react-dom: ^18 => 18.3.1 

[robksawyer]

Fixed it by adding the following to the package.json and installing the modules directly via yarn add @react-spring/[email protected] @react-spring/[email protected] @react-spring/[email protected]

"resolutions": {
    ...
    "@react-spring/animated": "9.0.0",
    "@react-spring/core": "9.0.0",
    "@react-spring/web": "9.0.0"
  },