locomotive-scroll
locomotive-scroll copied to clipboard
Issues with typescript imports for v5 beta
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"
I installed 'pnpm i @types/locomotive-scroll'
Im experiencing this issue too, I cannot use the options from the v5 docs because the types are from v4
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.
I installed 'pnpm i @types/locomotive-scroll'
Thanks, just overcome the issue.
At the moment pnpm i @types/locomotive-scroll
will install ^4.1.3 which is not working for 5+