Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issues with typescript imports for v5 beta #550

Open
Rutuj-Runwal opened this issue Feb 15, 2024 · 3 comments
Open

Issues with typescript imports for v5 beta #550

Rutuj-Runwal opened this issue Feb 15, 2024 · 3 comments

Comments

@Rutuj-Runwal
Copy link

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
Copy link

mooyah5 commented Feb 29, 2024

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

@AlexisKenAlvarez
Copy link

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

@aleciavogel
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants