Mixing cjs and esm imports results in duplicated version of the lib because of "exports" setup in "package.json" about react-toastify

[mishani0x0ef]

Just to add, for those who faced the same issue and are looking for a solution.

If you can use esm instead of cjs - just use it. It's better, believe me 😄

If you cannot avoid cjs - as a workaround for this issue use cjs everywhere (assuming you cannot tune your bundler to workaround it in other way).

I know it's painful, but this is what currently available.

const { toast } = require('react-toastify');

Depending on your project configuration, you may also need to:

• Disable linting error:

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { toast } = require('react-toastify');

• Provide a new linting rule in your eslintrc.js to enforce importing react-toastify using cjs style:

{
  'no-restricted-imports': [
    'error',
    {
      name: 'react-toastify',
      message: 'Please use CommonJS importing syntax for this lib - require',
    },
  ]
}

• Also, you may need to change other settings of your tsconfig, package.json or bundler configuration

[mishani0x0ef]

Also, there is tricky workaround for webpack.

The idea is to remove exports section before compilation using a custom plugin:

const { validate } = require('schema-utils');
const path = require('path');
const fs = require('fs');

const schema = {
  type: 'object',
  properties: {
    path: {
      type: 'string',
    },
  },
};

class DualCjsEsmWorkaroundPlugin {
  static name = 'DualCjsEsmWorkaroundPlugin';

  constructor(options) {
    validate(schema, options);

    const defaultOptions = {
      path: null,
    };

    this.options = { ...defaultOptions, ...options };
  }

  apply(compiler) {
    if (!this.options.path) {
      return;
    }

    compiler.hooks.initialize.tap(DualCjsEsmWorkaroundPlugin.name, () =>
      this._removeExportsWhenPossible(),
    );
  }

  _removeExportsWhenPossible() {
    try {
      const packageJsonPath = path.join(this.options.path, 'package.json');
      const packageJson = require(packageJsonPath);
      const canRemoveExports = packageJson.module && packageJson.main && packageJson.exports;

      if (!canRemoveExports) {
        return;
      }

      const packageJsonWithoutExports = JSON.stringify(
        { ...packageJson, exports: undefined },
        null,
        2,
      );

      fs.writeFileSync(packageJsonPath, packageJsonWithoutExports);
    } catch (error) {
      console.error(
        `[${DualCjsEsmWorkaroundPlugin.name}]: error while trying to remove externals: ${error}`,
      );
    }
  }
}

// webpack.config.js

module.exports = {
  // other configs

  plugins: [
    new DualCjsEsmWorkaroundPlugin({ path: path.join(__dirname, 'node_modules/react-toastify') }),

    // other plugins
  ],
};