How to set a plugin settings next to Next.js settings?

Question

I have a project that uses a dependency called @uiw/react-md-editor and, for it to work with Next.js, I need to create the file next.config.js and put this code:

// next.config.js
const removeImports = require('next-remove-imports')();

module.exports = removeImports({});

And this works.

But when I need to set the settings of Next.js itself in this file (in this case to allow access of images from other domains), I have to do this:

// next.config.js

module.exports = {
  images: {
    domains: [
      'localhost',
      '10.0.0.164',
      'exemplo.com',
      'exemplo.com.br'
    ]
  }
};

Then the problem starts. I can’t use both codes in the same file, which was supposed to be something simple).

I’ve tried to declare two module.exports separate, I’ve tried exporting an object with both, an array, and everything I know. But it only "works" if you have one or the other. But if there is only one then I will have to remove the logic from the other of the app and I want to use both features. I’ve already researched and found some examples of how to do this, but they’re all outdated.

Note that this example does not just happen with this library. Whenever I need to export two settings (from one plugin and Next.js, for example), gives error.

Answer 1

You really can’t have two module.exports, since each Commonjs module may have only one entry point (denoted by exports).

---

Usually the configuration of plugins of Next.js accepts nesting of functions and settings. For example:

//                                        Configurações do plugin
//                                                   ↓↓
const removeImports = require('next-remove-imports')({});

//                  Configurações do Next.js
//                             ↓
module.exports = removeImports({
  images: {
    domains: [
      'localhost',
      '10.0.0.164',
      'exemplo.com',
      'exemplo.com.br'
    ]
  }
});

Note that the module next-remove-imports exports a function that accepts, as a single argument, an object with the settings for the plugin. This function returns another function which in turn accepts the settings of Next.js.

This behavior can be done for several plugins, so that the settings are being "nested" for each of them.

See that this is demonstrated in readme of plugin in question.