Postprocessing: Class constructor Effect cannot be invoked without 'new'

[brunoimbrizi]

I am trying to create a custom effect following the Wiki, but I am running into some issues.

Consider the example:

// MyEffect.js
import { BlendFunction, Effect } from 'postprocessing';
import fragment from './glsl/my-effect.frag';

export class MyEffect extends Effect {
    constructor({ blendFunction = BlendFunction.SCREEN } = {}) {
        super('MyEffect', fragment, { blendFunction });
    }
}

// main.js
import MyEffect from './effects/MyEffect';

const myEffect = new MyEffect();



md5-72a44b9c92ba7ba789319ddafeaa05bd



export default class MyEffect extends Effect {

Error:
Class constructor Effect cannot be invoked without 'new'

--

The build system is just a standard Webpack config with Babel.

[brunoimbrizi]

Here is a possible explanation found in the comments of a similar issue. Perhaps the project could be packaged differently for NPM?

Workaround:

import { Effect } from '../../../node_modules/postprocessing/build/postprocessing.umd';

[vanruesc]

Hi Bruno,

Perhaps the project could be packaged differently for NPM?

this library exposes a standard main ES5 bundle for backwards compatibility as well as the default module entry point for modern bundlers such as Rollup and Webpack 2.

The problem you're experiencing has to do with your Webpack configuration.

If you're using Babel to transpile your final product into ES5 code, make sure that the postprocessing library in your node_modules directory is __not__ excluded from that process. Alternatively, you can configure Webpack to use the main entry point instead.

I hope this helps!

[brunoimbrizi]

@vanruesc Spot on. Thank you for the suggestion.

I got it working now. I'll leave the solution here in case someone else runs into the same problem. Regex found here.

// webpack.config.js
module: {
  rules: [
    {
      test: /\.js$/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      },
      // exclude: /node_modules/ <--- removed this
      exclude: /node_modules\/(?!(postprocessing)\/).*/, // <--- added this
    },
    // etc...
}

[vanruesc]

Cool, I'm glad that fixed it :)

Have fun with effects!