loaderUtil.getOptions returns null: "this" object is empty in loader function for Webpack 4

Question

I'm trying to create a custom loader in order to generate the manifest.json file for a chrome extension, and for some reason I can't get access to the "options" object via loaderUtils because this is an empty object... Is there something else I should be doing to make sure loaderRunner calls my loader function and initializes this properly?

manifest-loader.js

const loaderUtils = require('loader-utils');

module.exports = (source) => {
  const options = loaderUtils.getOptions(this);
  console.log(this)
  const env = options.env;
  let APP_DOMAIN = env === 'production' ? 'production_domain' : 'http://localhost:3000';
  let icons = env === 'production' ? ({
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }) : ({ "128": "icon-dev128.png" });

  let manifest_template = JSON.parse(source);
  manifest_template.permissions.push(`${APP_DOMAIN}/*`);
  manifest_template.content_scripts[0].matches.push(`${APP_DOMAIN}/*`)
  manifest_template.icons = icons;

  let indentation = this.minimize ? null : 2
  return JSON.stringify(manifest_template, null, indentation) + '\n'
}

webpack.config.js

{
  test: /manifest\.json$/,
  use: {
    loader: path.resolve('src/loaders/manifest-loader.js'),
    options: {
      env: `${env.NODE_ENV}`
    }
  }
}

score 2 · Answer 1 · answered Apr 27 '18 at 08:14

2

Arrow functions () => {} have no this binding, so I should have been using a function declaration instead.

answered Apr 27 '18 at 08:14

chez.mosey

194
1
8

loaderUtil.getOptions returns null: "this" object is empty in loader function for Webpack 4

1 Answers1