SyntaxError: Named export 'BufferOp' not found

[Jason Lampel]

Problem

Vite and my application work fine during development, but my tests will not run
properly for any test that imports a file that imports turf.

Example error

Not sure how to reproduce this without Vite, but I see it when I run vitest run.

FAIL  src/components/reusable/maps/map-ctrls/measure/utils.test.ts [ src/components/reusable/maps/map-ctrls/measure/utils.test.ts ]
SyntaxError: Named export 'BufferOp' not found. The requested module '@turf/jsts' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@turf/jsts';
const { GeoJSONReader, BufferOp, GeoJSONWriter } = pkg;

 ❯ src/components/reusable/maps/map-ctrls/measure/utils.ts:1:31
      1| import {
      2|   area as turfArea,
      3|   center as turfCenter,
       |  ^
      4|   feature as turfFeature,
      5|   length as turfLength,

What I've tried

Very possible I am doing something dumb on my end, but here are my unsuccessful
troubleshooting attempts so far:

• change all import * as turf from "@turf/turf" instances to
  import turf from "@turf/turf"
• change a few instances of that to things like this:

import { area, center, feature, length } from '@turf/turf'

Environment

CLI

╰─ yarn -v && node -v && npm -v
1.22.19
v18.7.0
8.15.0

Settings

package.json (truncated)

{
  "type": "module",
  "browserslist": {
    "production": ["defaults", "not ie 11"],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "dependencies": {
    "@mapbox/mapbox-gl-draw": "^1.3.0",
    "@mapbox/mapbox-gl-geocoder": "^5.0.1",
    "@math.gl/web-mercator": "^3.5.7",
    "@turf/turf": "7.0.0-alpha.1",
    "@vitejs/plugin-react": "^4.0.0",
    "geobuckets": "^0.0.3",
    "mapbox-gl": "^2.15.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-map-gl": "^7.0.25",
    "react-map-gl-draw": "^1.0.4",
    "showdown": "^2.1.0",
    "typescript": "^5"
  },
  "devDependencies": {
    "@babel/preset-react": "^7.18.6",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "12.1.5",
    "@types/mapbox-gl": "^2.7.11",
    "@types/mapbox__mapbox-gl-draw": "^1.4.0",
    "@types/mapbox__mapbox-gl-geocoder": "^4.7.3",
    "@types/node": "^20.2.5",
    "@types/polylabel": "^1.0.5",
    "@types/react": "^18.2.7",
    "@types/react-dom": "^18.2.4",
    "jest": "~28.1.3",
    "jsdom": "^20.0.0",
    "ts-node": "^10.9.1",
    "vite": "^4.3.9",
    "vitest": "^0.31.1"
  }
}

tsconfig.json (truncated)

{
  "ts-node": {
    "compilerOptions": {
      "module": "commonjs"
    }
  },
  "compilerOptions": {
    "allowJs": false,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "src",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "strictNullChecks": true,
    "target": "ESNext",
    "lib": ["dom", "dom.iterable", "ESNext", "WebWorker"],
    "types": ["node", "vite-plugin-pwa/client", "vite/client", "vitest/globals"]
  }
}

I realize this issue is not Vite-specific, I'm just adding everything for
reference. Please let me know what else I can test/change, happy to do so!

Originally posted by @abettermap in
#2438 (comment)

[apocaliss92]

I could solve the issue patching the @turf/buffer librery like this

diff --git a/node_modules/@turf/buffer/dist/es/index.js b/node_modules/@turf/buffer/dist/es/index.js
index 326d58c..5d59ea3 100644
--- a/node_modules/@turf/buffer/dist/es/index.js
+++ b/node_modules/@turf/buffer/dist/es/index.js
@@ -1,8 +1,9 @@
 import center from '@turf/center';
-import { GeoJSONReader, BufferOp, GeoJSONWriter } from '@turf/jsts';
+import turfJsts from '@turf/jsts';
 import { featureEach, geomEach } from '@turf/meta';
 import { geoAzimuthalEquidistant } from 'd3-geo';
 import { featureCollection, earthRadius, radiansToLength, lengthToRadians, feature } from '@turf/helpers';
+const { GeoJSONReader, BufferOp, GeoJSONWriter } = turfJsts;
 
 /**
  * Calculates a buffer for input features for a given radius. Units supported are miles, kilometers, and degrees.

[Jason Lampel]

I'm not familiar with patching, would this be a permanent fix via a PR or just a temporary workaround?

[apocaliss92]

it's a local git change, as soon as the package is installed, patch-package will apply a fix. There is a very easy guide here https://github.com/ds300/patch-package

[Jason Lampel]

Ah, very nice. Thanks!

[Tim Welch]

@abettermap can you report if the issue has been resolved in the latest alpha? Thanks

[Jason Lampel]

Yes, up and running, thanks for the timely turnaround 🙌 My Vite dev/build run like a champ and so do the tests. Everything has been in my company's prod for a sec and all is well, appreciate your efforts!