turf: Turf does not work with Webpack 4

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

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 2
Comments: 25 (6 by maintainers)

Commits related to this issue

Update `@turf/invariant` to a webpack-compatible version see https://github.com/Turfjs/turf/issues/1383 — committed to Turbo87/aeroscore by Turbo87 5 years ago
latest @turf/difference 6.0.2 doesn't work with webpack https://github.com/Turfjs/turf/issues/1383#issuecomment-434486339 — committed to zumper/nebula.gl by hugotox 4 years ago
Fixes #1383 removed *.mjs — committed to andrewharvey/turf by DenisCarriere 6 years ago

Most upvoted comments

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 Jan 8, 2019

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 May 8, 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 Jun 26, 2018

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

protetore on May 21, 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 Oct 30, 2018

I am also getting same issue with @turf/invariant

jcritchley on May 15, 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.

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 Feb 5, 2019

Got the problem with difference and intersect.

codeofsumit on Jun 24, 2018

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

rmmlopes on Jun 5, 2018

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

mmmatthew on May 11, 2018