Issues with typescript imports for v5 beta

[Rutuj-Runwal]

In a Next.js typescript project The import for locomotive v5 beta (import LocomotiveScroll from 'locomotive-scroll';) displays the following error.

The error

Could not find a declaration file for module 'locomotive-scroll'. '/node_modules/locomotive-scroll/dist/locomotive-scroll.modern.mjs' implicitly has an 'any' type. There are types at '/node_modules/locomotive-scroll/dist/types/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'locomotive-scroll' library may need to update its package.json or typings.

I believe the error is caused due to an invalid path for types in package.json

"types": "./dist/locomotive-scroll.d.ts"

Possible Resolution

Update the "types" export to the correct path i.e. "./dist/types/index.d.ts"

[mooyah5]

I installed 'pnpm i @types/locomotive-scroll'

[AlexisKenAlvarez]

Im experiencing this issue too, I cannot use the options from the v5 docs because the types are from v4

[aleciavogel]

Add a types.d.ts file with the following:

declare module 'locomotive-scroll' {
  export interface ILenisScrollToOptions {
    behavior?: 'auto' | 'smooth'
    top?: number
    left?: number
  }

  export interface ILocomotiveScrollOptions {
    lenisOptions?: any
    modularInstance?: any
    triggerRootMargin?: string
    rafRootMargin?: string
    autoResize?: boolean
    autoStart?: boolean
    scrollCallback?: () => void
    initCustomTicker?: () => void
    destroyCustomTicker?: () => void
  }

  export type lenisTargetScrollTo = any

  export default class LocomotiveScroll {
    rafPlaying: boolean
    private lenisInstance
    private coreInstance
    private lenisOptions
    private modularInstance?
    private triggerRootMargin?
    private rafRootMargin?
    private rafInstance?
    private autoResize?
    private autoStart?
    private ROInstance?
    private scrollCallback
    private initCustomTicker?
    private destroyCustomTicker?
    private _onRenderBind
    private _onResizeBind
    private _onScrollToBind
    constructor({
      lenisOptions,
      modularInstance,
      triggerRootMargin,
      rafRootMargin,
      autoResize,
      autoStart,
      scrollCallback,
      initCustomTicker,
      destroyCustomTicker,
    }?: ILocomotiveScrollOptions)

    private _init
    destroy(): void
    private _bindEvents
    private _unbindEvents
    private _bindScrollToEvents
    private _unbindScrollToEvents
    private _onResize
    private _onRender
    private _onScrollTo
    start(): void
    stop(): void
    removeScrollElements($oldContainer: HTMLElement): void
    addScrollElements($newContainer: HTMLElement): void
    resize(): void
    scrollTo(target: lenisTargetScrollTo, options?: ILenisScrollToOptions): void
    private _raf
  }
}

Some of this may be incorrect, but I was able to build without issue once I added this file. This is a temporary fix until someone can update the typescript exports accordingly.

[Shlok2927]

I installed 'pnpm i @types/locomotive-scroll'

Thanks, just overcome the issue.

[An1mus]

At the moment pnpm i @types/locomotive-scroll will install ^4.1.3 which is not working for 5+

[devenini]

This issue should be fixed in 5.0.0-beta.21.

You can now explicitly import any types, like so:

import LocomotiveScroll, { type lenisTargetScrollTo, type ILenisScrollToOptions }  from 'locomotive-scroll';