Created webpack config file for detecting circular imports (#2463)

* Created webpack config file for detecting circular imports

* missing packages, added script to run webpack to find circular dependencies

Co-authored-by: Miodec <bartnikjack@gmail.com>

frontend/webpack.config.js

@@ -0,0 +1,46 @@
+const path = require("path");
+const CircularDependencyPlugin = require("circular-dependency-plugin");
+
+module.exports = {
+  mode: "development", // Change to 'production' for production
+  devtool: false, // no SourceMap
+  entry: "./src/js/index.js",
+  resolve: {
+    fallback: {
+      crypto: require.resolve("crypto-browserify"),
+      stream: require.resolve("stream-browserify"),
+    },
+  },
+  output: {
+    path: path.resolve(__dirname, "public/js/"),
+    filename: "monkeytype.js",
+  },
+  plugins: [
+    new CircularDependencyPlugin({
+      // exclude detection of files based on a RegExp
+      exclude: /node_modules/,
+      // include specific files based on a RegExp
+      include: /./,
+      // add errors to webpack instead of warnings
+      failOnError: false,
+      // allow import cycles that include an asyncronous import,
+      // e.g. via import(/* webpackMode: "weak" */ './file.js')
+      allowAsyncCycles: false,
+      // set the current working directory for displaying module paths
+      cwd: process.cwd(),
+      onStart() {
+        console.log("start detecting webpack modules cycles");
+      },
+      // `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
+        compilation.errors.push(new Error(paths.join(" -> ")));
+      },
+      // `onEnd` is called before the cycle detection ends
+      onEnd() {
+        console.log("end detecting webpack modules cycles");
+      },
+    }),
+  ],
+};

package.json

@@ -10,12 +10,14 @@
     "deploy:live": "cd frontend && npm run deploy:live",
     "install:all": "sh ./bin/install.sh",
     "lint": "./node_modules/.bin/eslint './backend/**/*.js' './frontend/src/js/**/*.js'",
-    "pretty": "prettier --check './backend/**/*.js' './frontend/src/**/*.{js,scss}' './frontend/static/**/*.{json,html}'"
+    "pretty": "prettier --check './backend/**/*.js' './frontend/src/**/*.{js,scss}' './frontend/static/**/*.{json,html}'",
+    "webpack": "cd frontend && npx webpack --config webpack.config.js"
   },
   "engines": {
     "npm": "8.1.2"
   },
   "devDependencies": {
+    "circular-dependency-plugin": "^5.2.2",
     "concurrently": "5.3.0",
     "eslint": "8.8.0",
     "eslint-config-standard": "16.0.3",
@@ -27,7 +29,8 @@
     "eslint-plugin-require-path-exists": "1.1.9",
     "husky": "4.3.0",
     "prettier": "2.1.2",
-    "pretty-quick": "3.1.0"
+    "pretty-quick": "3.1.0",
+    "webpack-cli": "^4.9.2"
   },
   "husky": {
     "hooks": {