Preact-cli: Unable to configure webpack via preact.config.js

[vinaybedre]

Do you want to request a feature or report a bug?
bug
What is the current behavior?
preact build fails with error TypeError: Cannot read property 'plugin' of undefined
If the current behavior is a bug, please provide the steps to reproduce.
create a material template via preact-cli
create file preact.config.js and populate the contents as below.

export default (config, env, helpers) => {
    let { plugin } = helpers.getPluginsByName(config, 'UglifyJsPlugin')[0];
    plugin.options.sourceMap = false;
};

Run preact build

What is the expected behavior?
preact build should work and build should succeed
If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information.

• node version
  8.5.0
• npm version
  5.5.1
• Operating system
  Win 10

[Panya]

UglifyJsPlugin is added only for production build (preact build). You should check that env is production (e.g. env.isProd).

[developit]

Thanks for the great answer @Panya! Let us know if you need more help @vinaybedre :)

[vinaybedre]

Hi,

I tried isProd, but even with that, i get the same error,
But, when I am consoling the value of plugin, it displays, but preact fails to continue with error, Error: Error at C:\Users\vinay\dev\preact-oki\preact.config.js:
TypeError: Cannot read property 'plugin' of undefined

export default (config, env, helpers) => {
    if (env.isProd) {
        let { plugin } = helpers.getPluginsByName(config, 'UglifyJsPlugin')[0];
        console.log(plugin);
        plugin.options.sourceMap = false;
        // process.exit();
    }
};

[jaydp17]

Same here,
console.log prints it but then it errors out with TypeError: Cannot read property 'plugin' of undefined

[devin6391]

I am getting the same error for trying to use this:

let { plugin } = helpers.getPluginsByName(config, 'HtmlWebpackPlugin')[0];
 plugin.options.template = `!!ejs-loader!${path.resolve(__dirname, './template.html')}`;
  plugin.options.title = "Jl";
  plugin.options.manifest = Object.assign({}, {
    name: 'Jl',
    short_name: 'Hyper',
    theme_color: '#007DC5'
  });

It works perfectly well in development mode. Breaks when I try to run 'preact build --prerender false'

[developit]

Both code samples are attempting to mutate a plugin without checking that it exists first. Instead of looking at env, just do an existence check:

export default (config, env, helpers) => {
    let uglify = helpers.getPluginsByName(config, 'UglifyJsPlugin')[0];
    if (uglify) {
        uglify.plugin.options.sourceMap = false;
    }
};

let { plugin } = helpers.getPluginsByName(config, 'HtmlWebpackPlugin')[0] || {};
if (plugin) {
 plugin.options.template = `!!ejs-loader!${path.resolve(__dirname, './template.html')}`;
  plugin.options.title = "Jl";
  plugin.options.manifest = {
    name: 'Jl',
    short_name: 'Hyper',
    theme_color: '#007DC5'
  };
}

btw @devin6391 - you can change title and manifest by adding a manifest.json in your src/ directory. Should avoid the need for a plugin at all:

{
    "name": "Jl",
    "short_name": "Hyper",
    "theme_color": "#007DC5"
}