webpack.plugins.js

const CircularDependencyPlugin = require('circular-dependency-plugin')
const {execSync} = require("child_process");

/**
 * Build `.d.ts` TypeScript declaration files using a different file, the `tsconfig.d.ts.json`.
 *
 * This is necessary because, with a single `tsconfig` file in Webpack watch mode,
 * the `.d.ts` files from other chunks (when there isn't a single root `index.ts` file) disappear.
 *
 * This seems to be a bug in Webpack.
 * A workaround is to build the `.d.ts` files using a custom plugin.
 */
class BuildDTSAndMapFiles {
  apply(compiler) {
    compiler.hooks.done.tap('BuildDTSAndMapFiles', () => {
      try {
        execSync('npx tsc --project tsconfig.d.ts.json', {stdio: 'inherit'});
      } catch (_e) {
        // Swallow the error since it is already printed
        // Otherwise it will break the builder!
      }
    });
  }
}

module.exports = {
  plugins: [
    new CircularDependencyPlugin({
      // `onStart` is called before the cycle detection starts
      onStart({compilation}) {},
      // `onDetected` is called for each module that is cyclical
      onDetected({module: webpackModuleRecord, paths, compilation}) {
        // `paths` will be an Array of the relative module paths that make up the cycle
        // `module` will be the module record generated by webpack that caused the cycle
        if (paths[0].indexOf('node_modules/') > -1) return; // ignore node_modules
        compilation.errors.push(new Error(
          [
            'CDD: Circular Dependency Detected:',
            `CDD: Module record: ${webpackModuleRecord}`,
            'CDD: Paths: ',
            ...paths.map(path => `--> ${path}`),
          ].join('\n'),
        ))
      },
      // `onEnd` is called before the cycle detection ends
      onEnd({compilation}) {
      },
    }),

    new BuildDTSAndMapFiles(),
  ]
};