Turf does not work with Webpack 4

[adamduren]

I upgraded my project to Angular 6 which migrated to Webpack 4. I have a dependency on mapbox which uses turf. After the upgrade I started getting build errors like the following.

ERROR in ./node_modules/@turf/meta/index.mjs
997:15-25 Can't import the named export 'lineString' from non EcmaScript module (only default export is available)
 @ ./node_modules/@turf/meta/index.mjs
 @ ./src/index.js

It appears to be failing because @turf/meta uses mjs and @turf/helpers is a non mjs module. I am not sure if this is just a build configuration in Webpack that needs to be tweaked or if a correction needs to be made to turf. I looked around the Webpack issues and didn't really see anything to help along with a fix.

Here is a repo to easily reproduce this issue.

https://github.com/adamduren/webpack4-turf-issue

[adamduren]

A super hacky workaround is to delete the .mjs file and then Webpack uses the .js file. There are also ways to tell Webpack to prefer one over the other. Unfortunately with angular-cli we can't control Webpack config.

[DenisCarriere]

I've republished @turf/meta & @turf/difference and removed the *.mjs from the published files.

Ideally, we should refactor @turf/meta into Typescript (however that module is pretty complex)

[DenisCarriere]

@adamduren Can you try out @turf/meta again and see if it works with Angular

[adamduren]

After uninstalling and installing the affected package ngx-mapbox-gl the build is now fixed as it picked up the patch version. Much appreciated!

[danwoods]

Could we get a similar fix for @turf/invariant? Hitting a similar issue when trying to use @turf/boolean-contains

ERROR in ./node_modules/@turf/invariant/index.mjs
59:34-42 Can't import the named export 'isNumber' from non EcmaScript module (only default export is available)
 @ ./node_modules/@turf/invariant/index.mjs
 @ ./node_modules/@turf/boolean-contains/index.js
 @ ./src/components/map/index.js
 @ ./src/util/app.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.js react-hot-loader/patch

ERROR in ./node_modules/@turf/invariant/index.mjs
59:62-70 Can't import the named export 'isNumber' from non EcmaScript module (only default export is available)
 @ ./node_modules/@turf/invariant/index.mjs
 @ ./node_modules/@turf/boolean-contains/index.js
 @ ./src/components/map/index.js
 @ ./src/util/app.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.js react-hot-loader/patch
ℹ ｢wdm｣: Failed to compile.

[mmmatthew]

I am getting the same issue as @danwoods when trying to use @turf/distance

[jcritchley]

I am also getting same issue with @turf/invariant

[protetore]

Same here with @turf/intersect and @turf/lineIntersect

[rmmlopes]

Also having issues with the intersects. Will this be fixed soon?

[drnic]

@rowanwins I think I see you cutting releases for some modules in 4ffeabb etc, could you also please cut releases for all other modules?

Or perhaps @DenisCarriere can you push your commit out as a release?

[rowanwins]

Hi @drnic

Yep I'm just looking at it now - just trying to work out if the work has been done and needs publishing or if there is any outstanding work required...

Stay tuned

[rowanwins]

Hi @drnic

I've just republished @turf/invariant as v6.1.2, if you could test - I'm hopeful that that resolves a number of the issues.

If you could let me know any specific combos your experiencing issues with that would be good

[drnic]

@rowanwins awesome, works a treat; thanks!

[codeofsumit]

Got the problem with difference and intersect.

[rowanwins]

Hi @codeofsumit

What version failed for you?

For the timebeing the v6.x series should be considered alpha so stick with the v6.x series of you encounter issues. We've unfortunately been have some issues with publishing and converting to typescript so things are a bit messy at the moment sorry

[codeofsumit]

@rowanwins I tried the last two 6.x releases on npm. Works fine with Webpack 3 but when I upgrade, the build fails and throws this error.

[rowanwins]

Hi @codeofsumit

Doing a bit of googling it looks like you can try and add this sort of rule to your webpack config

{
  type: 'javascript/auto',
  test: /\.mjs$/,
  use: []
}

// OR 

{
  test: /\.mjs$/,
  include: /node_modules/,
  type: "javascript/auto",
}

If you google .mjs webpack4 there are a bunch of similar issues elsewhere.

[codeofsumit]

Hey @rowanwins, thanks for the hint. Will try it.

[jfolds]

FYI: I was getting this error with @turf/difference v6.02 - I think it was fixed in 6.0.1 but was re-introduced with 6.0.2: b032dfc#diff-149d2d8dd8ee68dc060406b560ff202e

[zsavajji]

Experiencing the same issue in a VueJS application with @turf/difference 6.0.2.
Tried to downgrade per @jfolds comment, but it's not working as expected :(

[ghost]

Downgrading from @turf/difference v6.0.2 to v6.0.1 worked for me. I deleted my node_modules folder to make sure no old files hung around.

[hellofantastic]

Downgrading from @turf/difference v6.0.2 to v6.0.1 worked for me. I deleted my node_modules folder to make sure no old files hung around.

Using create-react-app, deck.gl, nebula.gl and downgrading to 6.0.1 also worked.
Is a webpack 4 fix on the horizon?

[CorentinAmbroise]

Hi everyone,

I was getting the same error as you guys, so I downgraded @turf/difference to v6.0.1. Now I am getting this error and I have absolutely no clue on how to solve it :

Uncaught TypeError: _editModes.ViewMode is not a constructor at Object../node_modules/@nebula.gl/layers/dist-es6/layers/editable-geojson-layer-edit-mode-poc.js (editable-geojson-layer-edit-mode-poc.js:276) at __webpack_require__ (bootstrap:781) at fn (bootstrap:149) at Object../node_modules/@nebula.gl/layers/dist-es6/index.js (index.js:161) at __webpack_require__ (bootstrap:781) at fn (bootstrap:149) at Object../node_modules/nebula.gl/dist-es6/lib/layers/junctions-layer.js (junctions-layer.js:8) at __webpack_require__ (bootstrap:781) at fn (bootstrap:149) at Object../node_modules/nebula.gl/dist-es6/index.js (index.js:203) at __webpack_require__ (bootstrap:781) at fn (bootstrap:149) at Module../src/App.js (index.css:4) at __webpack_require__ (bootstrap:781) at fn (bootstrap:149) at Module../src/index.js (index.css?f3f6:45) at __webpack_require__ (bootstrap:781) at fn (bootstrap:149) at Object.0 (serviceWorker.js:135) at __webpack_require__ (bootstrap:781) at checkDeferredModules (bootstrap:45) at Array.webpackJsonpCallback [as push] (bootstrap:32) at main.chunk.js:1

I am simply using deck.gl, react-map-gl and nebula.gl, here are my packages versions
{ "@turf/difference": "^6.0.1", "deck.gl": "^7.0.9", "nebula.gl": "^0.13.0", "react": "^16.8.6", "react-dom": "^16.8.6", "react-map-gl": "^4.1.2", "react-scripts": "3.0.1" }

If you could guide me to a solution it'd be awesome. It must be a simple fix so sorry in advance for the inconvenience, I'm quite new to this. I will provide additional information if needed.

Thanks !

[mmmatthew]

I just ended up using a different npm library: `haversine`

[NameFILIP]

Would it be possible to remove the *.mjs files from the latest version?