How to avoid TypeScript Property 'lightGallery' does not exist on type 'Window & typeof globalThis'

[CCCullens]

Hi
I'm not sure what I'm missing since I receive the following error message. How should I work around it?

favoritephotos.ts:374:16 - error TS2339: Property 'lightGallery' does not exist
on type 'Window & typeof globalThis'.

374 window.lightGallery(lgElement, {...

--- ps

Have you considered creating a very short TypeScript example modeled after https://codepen.io/sachinchoolur/pen/VwpYagE (lightgallery dynamic mode demo with images and videos)

I looking for a foo.html and foo.ts sample to get me started with this environment in a type safe way.

For example:

1. foo.html uses jsdelivr for lightgallery, and includes foo.ts
   <script src="https://cdn.jsdelivr.net/npm/lightgallery@2.1.8/lightgallery.min.js" integrity="sha256-isEejtDbO523DeXW0VXW2Me3k0slauzVVwE3Mj6+c4o=" crossorigin="anonymous"></script>
   

2. foo.ts has the basic code to create amd open a simple dynamic gallery

3. Designed for a generic Visual Studio Code with Typescript compiler running.

thanks
CCC

[sachinchoolur]

Hey @CCCullens,

Really sorry for the delayed response. I forgot to check the discussion section :(

You can either declare lightGallery as described in the StackOverflow answer
Or directly import it wherever you want

import lightGallery from 'lightgallery';

Here is the typescript demo - https://stackblitz.com/edit/typescript-ignhuc

let me know if you have any questions

[CCCullens]

Hi Sachin
Clearly there is something I'm not understanding about types, styles or compiler options.
When I use: import Thumbnail from "node_modules/lightgallery/plugins/thumbnail/lg-thumbnail";
I do get past the compiler error. However, my .js includes
import lgThumbnail from './node_modules/lightgallery/plugins/thumbnail/lg-thumbnail';
This import triggers a runtime error in Chrome:
Uncaught SyntaxError: Cannot use import statement outside a module
Yet
import type LightGallery from './node_modules/lightgallery/index'
or
import LightGallery from './node_modules/lightgallery/index'

Have no impact on my generated .js.

My design style is to use the 'imports' to let the typescript compiler know about 'types'. For example import LightGallery find
declare function lightGallery(el: HTMLElement, options?: LightGallerySettings): LightGallery;
export default lightGallery;

When I try to use this design style on lgZoom and lgThumbnail I fail.

The second half of this design style is in my HTML to include script src= for lightgallery and whatever plugins I'm using.

As a developer in a basic setup, in my TypesScript files I'd like

1. A way to inform the compiler of the LG types
   --- this has no visible impact on the generated code
   --- this might be several files, e.g. core (lightgallery), dynamic (GalleryItem), one for each plugin
   --- this is why I asked for DefinitelyTypedSupport a) it avoids downloading LG b) compiler magically finds the type files

2. Then for runtime in a browser - reference to the required LG .js files

Today I'll failing trying to use 7 imports LightGallerySettings, LightGallery, lgVideo VideoSurce, VideoINfo, lgThumbnail, GalleryItem plus ImageSources

There must be a better way to consistently let the compiler know about types. It was easier to use the non-typescript version of LG, albeit in a less-type safe way.

CCC

[sachinchoolur]

Yes, the issue is probably with your build set-up
It is very difficult to debug without seeing the actual setup
Could you pls add "type": "module" to the package.json and try again

Ref: https://stackoverflow.com/questions/58273824/typescript-cannot-use-import-statement-outside-a-module

[CCCullens]

Hi "type": "module" did not help. I'll try a few more options.

[CCCullens]

Hi Sachin
I've been offline for a while. Starting fresh, I copied your sample from https://codepen.io/sachinchoolur/pen/VwpYagE to my local Visual Studio Code with TypeScript installed.

When I compile, I get the errors below in the import statements:
import lightGallery from 'lightgallery'
import lgZoom from 'lightgallery/plugins/zoom'
import lgVideo from 'lightgallery/plugins/video'
import lgThumbnail from 'lightgallery/plugins/thumbnail'
import { GalleryItem } from 'lightgallery/lg-utils'

Where should I put the LG bit? Via npm? Then how should I change this code or tsconfig.json to get compiles to work. Thanks!

Cannot find module 'lightgallery'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?
Cannot find module 'lightgallery/plugins/zoom'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?
Cannot find module 'lightgallery/plugins/video'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?
Cannot find module 'lightgallery/plugins/thumbnail'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?
Cannot find module 'lightgallery/lg-utils'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?

[sachinchoolur]

Hey,
This is completely dependent on your dev environment.

Can you try importing with full node_modules path? And of course, you need lightGalelry installed via npm for this to work.

import lightGallery from './node_modules/lightgallery'

In case if this doesn't work, please provide a little more info about your dev env setup

[CCCullens]

Close discussion