distance is not a function about geojson-path-finder HOT 15 CLOSED

Actually it does works with create-react-app in the browser. The issue is with require function which behaves differently in webpack.

Changing one line in src/geojson-path-finder/preprocessor.js from

 distance = require('@turf/distance'),

to

 distance = require('@turf/distance').default,

does make is work with webpack, and paths can be found now on frontend as well.

Im assuming that this could be fixed in webpack.config

from geojson-path-finder.

Qunabu, I love you. Thank you so much.

from geojson-path-finder.

You're right, the problem isn't with geojson-path-finder, or Turf, it's with Webpack. But as far as I can work out, it can only be fixed with changes to each user's Webpack config, or a change to how geojson-path-finder imports.

The problem: @turf/distance contains two files with the same logic, one in es6 module style (main.es.js), and a commonjs one too (main.js). Webpack, annoyingly, picks the es module unless you specify otherwise in your config.

What geojson-path-finder can do in order to work with Webpack is to explicitly say that it wants to use the commonjs version, with:

var distance = require('@turf/distance/main') // use /main to ensure the commonjs file is used

Adding .default as suggested above does something slightly different, and uses the es6 version but targets the default export.

P.S. there's a much more involved fix of making this package ES6 and compiling it to ES5 with Webpack.

from geojson-path-finder.

Never mind, I think it's an issue on my end due to mixing ES5 and ES6.

from geojson-path-finder.

How did you managed to fix this ?

Im trying to implement this in create-react-app experiencing same error

from geojson-path-finder.

Reason it's happening is because it's a node module and requires node.js (create-react-app is React only).
I just fixed it up by spinning a up a local node.js server and routing my requests through that.

from geojson-path-finder.

Agreed..was stumped by this for quite awhile

One way to fix this from webpack side is to specify resolve.mainFields as ['main', 'module'], e.g.:

environment.config.set('resolve.mainFields', ['main', 'module'])

Still looking for better ways that do not affect the loading of other modules.. (this might work for webpack 4: https://github.com/webpack/webpack/issues/6796)

More info: webpack/webpack#4742 (comment)

from geojson-path-finder.

I don't think this should be closed. It means that we can't use geojson-path-finder without ejecting a create-react-app and/or creating an exception for this package, is that right?

@perliedman I'm keen to use this package but can't justify ejecting my app. Are you still looking at issues here? Would you accept a PR that fixes the issue?

If not please let me know and I'll create a fork. Thanks!

from geojson-path-finder.

I think this is more a turf or webpack/commonjs issue, but if there is a more compatible way of loading turf/distance by all means suggest it

from geojson-path-finder.

https://twitter.com/tmcw/status/1091023428780470273 ¯_(ツ)_/¯

Having said that - if you come up with a non-intrusive way to improve the situation for webpack users, feel free to make a PR. This is not a priority for me personally, though, and I do not think it is a bug in geojson-path-finder.

from geojson-path-finder.

You should be able to support both es6 and cjs modules by doing this I guess:

var distance = require('@turf/distance/main')
distance = 'default' in distance ? distance['default'] : distance;

Could someone test this and maybe create a PR?

from geojson-path-finder.

Thanks for the reply @perliedman - you're right, it's certainly not the fault of geojson-path-finder, you're just collateral damage.

I'm happy to do a PR. I think

var distance = require('@turf/distance/main')

Is the most straightforward approach.

@vincentfretin is there a benefit to having geojson-path-finder use the ES6 version of @turf/distance?

from geojson-path-finder.

I can confirm that changing to

 distance = require('@turf/distance').default,

does work with react and react-create-app as we used this in one project https://niezapomniani.org/ so

const distance = require('@turf/distance/main');
distance = 'default' in distance ? distance['default'] : distance;

would be great solution.

from geojson-path-finder.

@davidgilbertson @turf/distance is such a small module, so it doesn't really give you a benefit if you use ES6 module vs commonjs module.
Webpack by default gives priority to ES6 modules (the module key in package.json) over commonjs (the main key in package.json). Webpack can remove some code so reducing your bundle size by tree shaking in some conditions if the dependency expose ES6 modules with sideEffects : false and if you use @babel/preset-env with modules: false (more details here https://webpack.js.org/guides/tree-shaking/)

from geojson-path-finder.

It appears updating @turf/distance to latest version breaks even with a normal Node environment without webpacks/imports, so I have simply switched to importing like suggested above: distance = require('@turf/distance').default. Please notify if this cause issues for anyone.

from geojson-path-finder.