Turf: Turf does not work with Webpack 4

Created on 4 May 2018 · 25Comments · Source: Turfjs/turf

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

awaiting feedback

Source

adamduren

👍2

Most helpful comment

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.

ghost on 8 Jan 2019

👍8 🎉1

All 25 comments

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.

adamduren on 4 May 2018

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 on 5 May 2018

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

DenisCarriere on 5 May 2018

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

adamduren on 5 May 2018

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.

danwoods on 9 May 2018

👍9

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

mmmatthew on 11 May 2018

👍2

I am also getting same issue with @turf/invariant

jcritchley on 15 May 2018

👍5

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

protetore on 21 May 2018

👍6 😕1

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

rmmlopes on 5 Jun 2018

👍2

@rowanwins I think I see you cutting releases for some modules in https://github.com/Turfjs/turf/commit/4ffeabb754b8fd7eaf77746bf664a04a8700cbdd etc, could you also please cut releases for all other modules?

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

drnic on 11 Jun 2018

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 on 11 Jun 2018

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

rowanwins on 11 Jun 2018

@rowanwins awesome, works a treat; thanks!

drnic on 12 Jun 2018

Got the problem with difference and intersect.

codeofsumit on 24 Jun 2018

👍3

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

rowanwins on 24 Jun 2018

@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.

codeofsumit on 25 Jun 2018

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.

rowanwins on 26 Jun 2018

👍7 🚀1

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

codeofsumit on 26 Jun 2018

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: https://github.com/Turfjs/turf/commit/b032dfc0870667e05159cab2bc0e541488dd3ef7#diff-149d2d8dd8ee68dc060406b560ff202e

jfolds on 30 Oct 2018

👍6

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 :(

Zsavajji on 23 Nov 2018

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.

ghost on 8 Jan 2019

👍8 🎉1

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?

hellofantastic on 5 Feb 2019

👍4

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 !