graphql-engine/frontend/custom-webpack.config.js

const DomParser = require('dom-parser');

const { merge } = require('webpack-merge');
const util = require('util');
const webpack = require('webpack');
const { webpackPlugin } = require('unplugin-dynamic-asset-loader');

// un comment this to test out the circular deps
const CircularDependencyPlugin = require('circular-dependency-plugin');

const log = value =>
  console.log(
    util.inspect(value, { showHidden: false, depth: null, colors: true })
  );

const createCircularDependencyPlugin = () => {
  const shouldLogEveryCircularDep = false;
  let numCyclesDetected = 0;
  let filteredCircleDeps = 0;
  const depCircleFilter = undefined;

  let storedPaths = [];
  const shouldLogMostCommonPaths = false;

  return new CircularDependencyPlugin({
    exclude: /node_modules/,
    failOnError: false,
    onStart({ compilation }) {
      numCyclesDetected = 0;
      filteredCircleDeps = 0;
      storedPaths = [];
    },
    onDetected({
      // `paths` will be an Array of the relative module paths that make up the cycle
      paths: cyclePaths,
      compilation,
    }) {
      numCyclesDetected++;
      storedPaths = [...storedPaths, ...cyclePaths];
      const err = new Error(
        `Circular dependency detected!\n * ${cyclePaths.join('\n → ')}`
      );
      if (!shouldLogEveryCircularDep) {
        return;
      }

      if (!depCircleFilter) {
        compilation.warnings.push(err);
        return;
      }

      if (cyclePaths.some(path => path.includes(depCircleFilter))) {
        filteredCircleDeps++;
        compilation.warnings.push(err);
      }
    },
    onEnd({ compilation }) {
      const warns = Array.from(
        Array(Math.round(numCyclesDetected / 100)).keys()
      )
        .map(it => '!')
        .join('');
      compilation.warnings.push(
        new Error(`Detected ${numCyclesDetected} circular dependency ` + warns)
      );

      if (depCircleFilter) {
        const filterWarns = Array.from(
          Array(Math.round(filteredCircleDeps / 100)).keys()
        )
          .map(it => '!')
          .join('');
        compilation.warnings.push(
          new Error(
            `Detected ${filteredCircleDeps} circular dependency only for the filter "${depCircleFilter}" ${filterWarns}`
          )
        );
      }

      if (shouldLogMostCommonPaths) {
        const topTenPaths = storedPaths
          .sort(
            (a, b) =>
              storedPaths.filter(v => v === a).length -
              storedPaths.filter(v => v === b).length
          )
          .slice(0, 10);

        compilation.warnings.push(
          new Error(
            `Here are the top 10 files in the loops :\n${topTenPaths.join(
              '\n → '
            )}`
          )
        );
      }
    },
    cwd: process.cwd(),
  });
};

module.exports = (config, context) => {
  const isDevBuild = context.configuration === 'development';
  let output = merge(config, {
    output: {
      publicPath: 'auto',
    },
    plugins: [
      new webpack.DefinePlugin({
        __CLIENT__: 'true',
        __SERVER__: false,
        __DEVELOPMENT__: true,
        __DEVTOOLS__: true, // <-------- DISABLE redux-devtools HERE
        CONSOLE_ASSET_VERSION: Date.now().toString(),
      }),
      // un comment this to test out the circular deps. Left here since it can be tricky to configure
    ],
    module: {
      rules: [
        /*
        Rule taken from the old codebase
        => Do we still need the version naming ?

         */
        {
          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
          use: [
            {
              loader: 'url-loader',
              options: { limit: 10000, mimetype: 'image/svg+xml' },
            },
          ],
        },
      ],
    },
    resolve: {
      fallback: {
        /*
        Used by :
        openapi-to-graphql and it's deps (graphql-upload > fs-capacitor)
        no real polyfill exists, so this turns it into an empty implementation
         */
        fs: false,
        /*
        Used by :
        openapi-to-graphql and it's deps (graphql-upload > fs-capacitor)
         */
        os: require.resolve('os-browserify/browser'),

        /*
        Used by :
        openapi-to-graphql and it's deps (swagger2openapi)
         */
        http: require.resolve('stream-http'),
        /*
        Used by :
        @graphql-codegen/typescript and it's deps (@graphql-codegen/visitor-plugin-common && parse-filepath)
        => one usage is found, so we have to check if the usage is still relevant
         */
        path: require.resolve('path-browserify'),
        /*
        Used by :
        jsonwebtoken deps (jwa && jws)
        => we already have an equivalent in the codebases that don't depend on it,jwt-decode.
           Might be worth using only the latter
         */
        crypto: require.resolve('crypto-browserify'),
        /*
        Used by :
        jsonwebtoken deps (jwa && jws)
        @graphql-tools/merge => dependanci of graphiql & graphql-codegen/core, a package upgrade might fix it
         */
        util: require.resolve('util/'),
        /*
        Used by :
        jsonwebtoken deps (jwa && jws)
         */
        stream: require.resolve('stream-browserify'),
      },
    },
  });

  if (isDevBuild) {
    output = merge(output, {
      plugins: [
        // un comment this to test out the circular deps. Left here since it can be tricky to configure
        // createCircularDependencyPlugin(),
        webpackPlugin(),
      ],
    });
  }
  // log(output.plugins);
  return output;
};