Module not found. Can't resolve 'jsts'.

[infacto]

I'm on Angular 12 (typescript 4.3.5) and get the following error when using jsts:

Module not found. Can't resolve 'jsts' ...

import { geom } from 'jsts';

I use Node 16 with NPM 8. In Angular 11 and Node 14 / NPM 6 it worked fine.

Are there some known issues and / or ideas / solution about this. I would appreciate it. I'm on this issue for hours.

jsts v2.8.1

[tomgruszowski]

Same issue here, we just stuck with jsts 2.7.1 for now.

TypeScript 4.5.x,

[bjornharrtell]

Try importing individual modules as explained in https://github.com/bjornharrtell/jsts#browser-or-nodejs-use.

[infacto]

Ok thanks, the following seems to work in my case. (not tested on runtime. Build works.)

import * as geom from 'jsts/org/locationtech/jts/geom';

I just have to setup Jest (unit test; Node) to handle the "Cannot use import statement outside a module" error.

Also the @types/jsts package does not support this. It's any type now. Consider to provide declarations build-in.

Also note that in npm it's possible to have a hybrid package for esm and commonjs. So that both works without different usage.

[bjornharrtell]

Transpiling to typescript would be interesting and would give typings but it is not a trivial task.

I would still recommend importing individual modules instead of the "bundle" variants which really was made only for the old single file build.

I have tried to do hybrid packages but found it very difficult to get right.

[nicoesiea]

May I ask for an example please?

import * as jsts from 'jsts';

const reader = new jsts.io.WKTReader();
const writer = new jsts.io.WKTWriter();
const parser = new jsts.io.OL3Parser();

Was working previously, but now I have the error, since I switch to angular 13

[bjornharrtell]

@nicoesiea have you read https://github.com/bjornharrtell/jsts#browser-or-nodejs-use?

[nicoesiea]

I switched back to jsts 2.6.1 ^^

[djMax]

ESM is the biggest threat to the Node ecosystem in the history of the Node ecosystem. I am not able to get this to work in a React Native project using Typescript and Jest. 2.6.1 behaves the same, and individual modules break because they can't reference each other.

I notice that package.json does not define an entry point. Shouldn't it?

[bjornharrtell]

@djMax no, jsts doesn't really have an entry point it is rather a collection of modules. The single file build was that I suppose but I've stopped using it since a long time ago.

[djMax]

That may be, but the modules are interdependent no? So if I target a particular subpath, it's going to try and import other things, and now the module system gets in the way again. I patched package.json locally, and then it seems to mostly work using the packaged distribution in Node/Jest/Metro. But it is a very confusing beast.

[bjornharrtell]

@djMax I have no idea why it's not working with your stack. I have no problems with Vue (vite), Angular (webpack, I think), Ember (webpack), plain node js, plain modern browsers and more so I'm leaning on blaming your tooling rather than ESM.

[djMax]

Ok, I think the remaining challenge is that when you don't use the "single" entrypoint, none of the typescript types are matched given the @types/jsts module. There's probably some hackaround for that, but it's a bit cumbersome.

Another thing is that it requires node 16, but expo doesn't work with 18, so it's a "tight window" that actually probably isn't relevant given that expo is bundling with webpack. So even though we're using npm/yarn to install, the version of node actually isn't super relevant.

[bjornharrtell]

Any typescript types for jsts are unofficial and unsupported and likely out of date. I would recommend an any shim instead.

I have no knowledge about "expo".

[bjornharrtell]

Thinking to myself I wish there was an easy way to opt out typing for a dependency when using typescript...

[djMax]

It is possible, but with a library as complex as jsts (and an original source with such clear typings) I would argue it is suboptimal.

[bjornharrtell]

@djMax I agree but I would need a week of free time or so to do it and as of yet I have not had a good reason enough to. See https://github.com/bjornharrtell/jsts/issues/285.

[djMax]

But, for posterity, I will just recount the solutions to the original bug in "modern times" (even though it's only a year old):

1. Patch package.json and add "main": "dist/jsts.min.js" and then use @types/jsts and import * as jsts from 'jsts', also optionally patch the engines to reduce the node version dependency. This version works with Jest as well.
2. Directly import the specific module and don't use typescript strict mode
3. Directly import the specific module and add typings or empty declarations for those modules to please tsc

[quachc]

I think this can be easily fixed by adding exports to the package.json, see: https://nodejs.org/api/packages.html#package-entry-points https://medium.com/swlh/npm-new-package-json-exports-field-1a7d1f489ccf

I'm pretty sure this is supported by most(/all) major build tools, but you would still have to use @types/jsts.

[mperdikeas]

In my case the following worked:

1. downgraded to jsts@2.6.2
2. no need to patch node_modules/jsts/package.json to include "main": "dist/jsts.min.js" as that line is already there
3. have in tsconfig.json the following: "allowJs": true and "checkJs": false (not sure if it makes a difference though)
4. changed const jsts = require('jsts'); to import * as jsts from 'jsts';

My setup is:

"typescript": "@^5.0.2",
"jsts": "^2.6.2",
"@types/jsts": "^0.17.21",
"vite": "^4.4.5",

The @types/jsts mostly work (I had to intervene at a couple of points in the code to silence tsc)

[vaishnavravi33]

Previously it was working. After migration from angular v9 to angular v13. I am stuck with JSTS import in angular v13. Error "Error: Module not found: Error: Can't resolve 'jsts'".

My Environment - Angular: 13.4.0 Angular CLI: 13.3.11 typescript: 4.6.4 Node: 19.4.0 (Unsupported) Package Manager: npm 9.2.0 OS: win32 x64

Need help in this matter please.