TypeError: Queue is not a constructor

Question

TypeError: Queue is not a constructor

Closed this issue 3 years ago · 16 comments

Hello!

When running version v1.2.0 of concaveman with Webpack (in a vue-cli environment), the following error occurs:

TypeError: Queue is not a constructor
    at findCandidate (index.js:95)
    at concaveman (index.js:65)

In Chrome Debugger, Queue is an object which holds a transpiled ES6 module, and has __esModule and default properties.

Is this a bug in concaveman or my Webpack configuration?

Thanks!

Answer 1 · 2020-06-02T13:22:04.000Z

@mbullington, we have same issue after update to v1.2.0:

index.js:95 Uncaught TypeError: Queue is not a constructor
    at findCandidate (index.js:95)
    at concaveman (index.js:65)
    at convex (main.es.js:45)
    at centerOfMass (main.es.js:86)

Points to line var queue = new Queue([], compareDist):

function findCandidate(tree, a, b, c, d, maxDist, segTree) {
    var queue = new Queue([], compareDist);
    // ...
}

Answer 2 · 2020-06-02T15:06:09.000Z

It's a known Webpack bug that triggers when a CommonJS package is require-ing a dependency that additionally exposes a module entry point and has a default export. I guess a fix would be to switch to ES bundling for this module too.

Answer 3 · 2020-06-15T22:11:40.000Z

At least in the short-term, using webpack-chain we monkey patched tinyqueue like so:

// TODO: Track this issue
// https://github.com/mapbox/concaveman/issues/18
config.resolve.alias.set('tinyqueue', require.resolve('tinyqueue/tinyqueue.js'))

Answer 4 · 2020-07-21T12:35:00.000Z

We've caught the issue too. Lost a day of debugging.

I guess a fix would be to switch to ES bundling for this module

Do you mean each client has to do it? Is it possible to fix it once and for everyone to avoid the multiplication of pain (does it really need to export both named and default)?

Answer 5 · 2020-08-10T09:26:30.000Z

We manually apply @grassick's fix for now and it works locally but this bug still breaks our build pipelines.

Answer 6 · 2020-12-27T21:36:33.000Z

This bug seems to be breaking @turf/convex

https://github.com/Turfjs/turf/blob/master/packages/turf-convex/package.json#L58

Answer 7 · 2021-01-11T14:29:12.000Z

@braco @sedot42 You can use https://www.npmjs.com/package/patch-package. Works like a charm.

Answer 8 · 2021-01-12T10:22:47.000Z

I am in contact with Mapbox support about this. The GL JS team is aware but was busy with the v2 release so far.

Thanks for the suggestion @alebinson. I don't want to introduce another 124 dependencies to our project, so we resolve the dependency via a resolutions block in Yarn's package.json. Even better of course if you control the repo yourself.

 "resolutions": {
    "@turf/center-of-mass/concaveman": "https://github.com/grassick/concaveman#patch-1"
  },

Answer 9 · 2021-04-09T18:14:05.000Z

Any update on this bug getting resolved? Really appreciate all the work MapBox does for the community.

Answer 10 · 2021-05-26T19:05:42.000Z

Hi all, any update on the issue?

Answer 11 · 2021-06-28T11:57:19.000Z

I am also facing the same issue, any update on the issue? Thanks.

Answer 12 · 2021-07-02T13:48:46.000Z

You can get around this issue by installing tinyqueue as a dependency in your project:

npm install tinyqueue

And then configuring your webpack config with an alias within the resolve object like so:

 resolve: {
        alias: {
            tinyqueue$: require.resolve('tinyqueue/tinyqueue.js')
        }
  },

Hope this helps.

Answer 13 · 2021-08-08T15:49:14.000Z

@mourner who at Mapbox is responsible for merging the PR fixing this issue? This issue is a year old, and is a big bug that's effecting a lot of users.

Answer 14 · 2021-08-09T09:53:55.000Z

Sorry for the late reaction everyone, I was holding back on this because I really don't like the default hack and planned to fully convert this package to a pure ES module with type: "module" instead. Never got around to it but I will at some point. Released v1.2.1 with the fix.

Answer 15 · 2021-10-26T15:55:39.000Z

I had this error but with RBush, and using SvelteKit, which uses Vite. It was fixed with the same thing solution as the PR mentioned above.

if (RBush.default) {
    RBush = RBush.default;
}

Answer 16 · 2022-05-31T06:30:22.000Z

You can get around this issue by installing tinyqueue as a dependency in your project:
npm install tinyqueue
And then configuring your webpack config with an alias within the resolve object like so:
 resolve: {
        alias: {
            tinyqueue$: require.resolve('tinyqueue/tinyqueue.js')
        }
  },
Hope this helps.

You are so great! It is effective,thanks! @JamesLMilner