Critical dependency when using React and Typescript
Closed this issue · 7 comments
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:
- Create a clean Typescript react app using the get started instructions here
npx create-react-app my-app --template typescript
- Install needed packages, here are the versions from my package.json:
"geotiff": "^2.0.5",
"geotiff-geokeys-to-proj4": "^2022.9.7",
- Add minial logic for importing and using
geotiff-geokeys-to-proj4
in the project. Same as in the Readme instructions. npm start
will produce a more verbose warning message thannpm 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.
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 ;)
Hi! I found a workaround for webpack and updated Readme.
- Replace
import geokeysToProj4 from "geotiff-geokeys-to-proj4"
withimport geokeysToProj4 from "geotiff-geokeys-to-proj4/main.js"
- Create a
.d.ts
file or just usereact-app-env.d.ts
. - 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
Works like a charm! Well done 😃
Thanks! Glad it worked :)
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
@egluhbegovic, hi, thanks for reporting this! There's two solutions:
-
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. -
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.
Hello, everybody! TypeScript support is finally fixed, module declarations is no longer required. Please update to version 2024.4.9.