Critical dependency when using React and Typescript

[ImpulseDeer]

I get the following warning:

WARNING in ./node_modules/geotiff-geokeys-to-proj4/main-dist.js 235:18-19
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

When importing and using geotiff-geokeys-to-proj4 in a react typescript project. This blocks PRs from merging with strict merging rules etc.

How to reproduce:

1. Create a clean Typescript react app using the get started instructions here
   npx create-react-app my-app --template typescript
2. Install needed packages, here are the versions from my package.json:

"geotiff": "^2.0.5",
"geotiff-geokeys-to-proj4": "^2022.9.7",

3. Add minial logic for importing and using geotiff-geokeys-to-proj4 in the project. Same as in the Readme instructions.
4. npm start will produce a more verbose warning message than npm run build

Expected behavior:
Compile without a warning from the import.

I can supply the full minimal project as a repo if you have trouble with reporducing the error.

[matafokka]

Hi, thanks for the report! I'm a bit busy right now, so give me a couple of days to solve this :)

I can supply the full minimal project as a repo if you have trouble with reporducing the error.

Thanks, I'll ask if I'll have issues with it ;)

[matafokka]

Hi! I found a workaround for webpack and updated Readme.

1. Replace import geokeysToProj4 from "geotiff-geokeys-to-proj4" with import geokeysToProj4 from "geotiff-geokeys-to-proj4/main.js"
2. Create a .d.ts file or just use react-app-env.d.ts.
3. Paste following code here:

declare module "geotiff-geokeys-to-proj4/main.js" {
    export * from "geotiff-geokeys-to-proj4";
}

Please, let me know if this workaround might not meet some other kind of other requirements and reopen this issue. But I don't want to replace Closure Compiler just to make webpack happy :D

[ImpulseDeer]

Works like a charm! Well done 😃

[matafokka]

Thanks! Glad it worked :)

[egluhbegovic]

I am using Next.js V14 app router.

"geotiff": "^2.1.3",
"geotiff-geokeys-to-proj4": "^2024.3.9",
"next": "^14.1.3",

Next.js uses: https://swc.rs/

I tried the above solution am now seeing:

../../node_modules/geotiff-geokeys-to-proj4/main.js:2:0
Module not found: Can't resolve 'core-js/stable/object/keys'

https://nextjs.org/docs/messages/module-not-found

[matafokka]

@egluhbegovic, hi, thanks for reporting this! There's two solutions:

1. Install core-js by running npm i core-js. I didn't include that in dependencies, so most users won't need to download unneeded package. If they're already using core-js, outdated version in my project may cause peer dependencies conflict, although any core-js version should do the trick.

2. If you're building only for modern browsers and don't use transpilers or polyfills, link main-dist.js like so:

   declare module "geotiff-geokeys-to-proj4/main-dist.js" {
       export * from "geotiff-geokeys-to-proj4";
   }

   Please note that this solution may increase bundle size a bit.

Please test both of the solutions and provide a feedback, so I could update the readme.

[matafokka]

Hello, everybody! TypeScript support is finally fixed, module declarations is no longer required. Please update to version 2024.4.9.