webpack.ProvidePlugin not working with preact.config.js

EDIT: this is a preact issue, I messed up.

Do you want to request a feature or report a bug? bug or wrong configuration on my side

What is the current behaviour? Trying to provide a plugin with webpack.ProvidePlugin though the preact.config.js I get an error on runtime: ReferenceError: PIXI is not defined even though the package is installed correctly.

If the current behaviour is a bug, please provide the steps to reproduce. Here’s the configuration:

webpack(config, env, helpers, options) {
  //...
  options = {
    plugins: [
      new webpack.ProvidePlugin({
        PIXI: 'pixi.js',
      }),
    ],
  }
}

Install both pixi.js and pixi-layersdependencies, pixi-layers depends on pixi.js to be available to work:

import * as PIXI from "pixi.js";
import "pixi-layers";

What is the expected behaviour? I expect this config to work the same as an earlier version of my project (before switching to preact):

module.exports = {
  webpack: {
    plugins: [
      new webpack.ProvidePlugin({
        PIXI: 'pixi.js',
      }),
    ],
  },
};

This worked fine and provided pixi as expected.

[rschristian]

I’m still wondering why I can’t simply provide the plugin like in my other webpack config but I guess this will have to do for now.

I’m not sure what your config file looks like, but this can help provide context if you’re missing parameter descriptions, and this can help by showing some basic configurations.

You can’t provide the plugin like you can in a Webpack config because this isn’t a Webpack config. In your preact.config.js, you write rules that will overwrite the actual Webpack config file that’s hidden away. Most people do not like manually dealing with Webpack, as it can be quite the monster, so it is hidden away until when you want to make changes to it.

Had you targeted the right item (helpers.getPluginsByName(config, 'ProvidePlugin')[0].plugin.definitions) you would have overwritten the existing configs, likely breaking many things. The CLI needs its own skew of plugins to operate correctly, so that’s why we instead just appended to a new value to the ProvidePlugin, rather than reassigning it.

Glad you got it working though. Hope those warnings go away.

[rschristian]

This should work:

const providePlugin = helpers.getPluginsByName(config, 'ProvidePlugin')[0];
providePlugin.plugin.definitions['PIXI'] = 'pixi.js';

I’m not sure what the rendering should look like, but what I’m seeing is a V shape with the left half being of one image I provided, the right half being the other.