this.WorkerClass is not a constructor

[stelasido]

Hi, I am getting this error with the example from the docs:

in promise) TypeError: this.WorkerClass is not a constructor.

This is my code:

console.log(src); Vibrant.from(src).getPalette() .then((palette) => console.log(palette))

I am using React.

[ankile]

I'm also getting the exact same error when trying to implement the example in React, please help.

[akfish]

Sorry for the confusion. We are still finalizing the docs.

You will need webpack and worker-loader for this to work.
Relevant docs are in the develop branch:
https://github.com/akfish/node-vibrant/tree/develop#webpack-configuration

[crutchcorn]

I'll do my best to take a look at how we can ship down a built version of this that doesn't require webpack. Timeline is hesitant, as I have some family health problems, so please be patient :)

[MadReal]

Same problem, using vue.js though

[mlncstr]

Same problem, using Angular 7 :)

[AggressivelyMeows]

Same problem with Vue.js
Using Webpack

[WbyNghbr]

@AggressivelyMeows, @MadReal make sure you have worker-loader installed and change webpack configuration. In case of using Vue, you need to edit vue.config.js.

//vue.config.js
module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.worker\.js$/,
          use: { loader: "worker-loader" }
        }
      ]
    }
  },
}

[nkCreation]

Hi. Can't find a may to make it work. I have the loader in my webpack config but still have the error...

[nkCreation]

@akfish any ideas ?

[crutchcorn]

Please avoid tagging maintainers directly - FWIW I'm one the current maintainer of the project.

Is there any way someone could provide a minimal reproduction that I can take a look into? I'm not able to reproduce

[ivgtr]

Currently, npmjs has an alpha version distributed as a latest version.
In my case(use Nuxt.js), I downgraded from "3.2.1-alpha.1" to "3.1.6", and the error was solved.

[micahlt]

@ivgtr Your solution worked perfectly to resolve this issue!

npm remove node-vibrant && npm install [email protected]

[vova42matters]

@ivgtr solved! thanks!
added config from docs and downgraded to [email protected]
Hope this issue will be solved in next versions of node-vibrant
Using React and ejected react-create-app

[c0ncentus]

please not make like https://github.com/storybookjs/storybook/issues , as you see there is more issue for webpack crap config than "true" issue of the main functionnality.

Make usage easiest possible please.

[ramfattah]

@ivgtr Your solution worked perfectly to resolve this issue!

npm remove node-vibrant && npm install [email protected]

thank you!!!!!

[zanjie1999]

Same problem, using Vue.js 3 with Vite

Work fine with [email protected]

[bitdom8]

Thanks @ivgtr

[bitdom8]

The error is resolved however when I build sveltekit it appears

Uncaught TypeError: Cannot read property 'filters' of undefined``

[micahlt]

The error is resolved however when I build sveltekit it appears

Uncaught TypeError: Cannot read property 'filters' of undefined``

Unless that error is directly connected to this issue (which I don't believe it is), you'll need to create a separate issue for that.

[beeftony]

Still having the same problem with Vue3, Nuxt3, [email protected] and [email protected]...

[crutchcorn]

@Lucienest you're welcome to open a PR to fix this.

[chiarapaskulin]

SelfServiceDemo.tsx:50 Error: TypeError: this.WorkerClass is not a constructor
    at WorkerPool2._findIdleWorker (pool.ts:35:16)
    at WorkerPool2._tryDequeue (pool.ts:72:23)
    at WorkerPool2._enqueue (pool.ts:60:10)
    at WorkerPool2.invoke (pool.ts:110:17)
    at WorkerManager2.invokeWorker (index.ts:25:30)
    at WorkerPipeline2.process (client.ts:22:26)
    at Vibrant2._process (index.ts:49:30)
    at index.ts:70:27
    at async handleLaunch (SelfServiceDemo.tsx:46:29)

Downgrading + worker-loader + webpack didn't work for me.

[saeho]

How would one use this package/get around this issue if webpack is not possible? (ie. Deno runtime)