diff --git a/CHANGELOG.md b/CHANGELOG.md
index 60844fec08..2851e0d01b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 
 ### Fixed 🐞
 
+-   Compressed `cc.jsons (.gz) not marked as accepted when selecting a file in the file chooser
+
 ### Chore 👨‍💻 👩‍💻
 
 ## [1.56.0] - 2020-09-04
diff --git a/gh-pages/_posts/dev-guide/2020-07-31-e2e-testing-with-puppeteer.md b/gh-pages/_posts/dev-guide/2020-07-31-e2e-testing-with-puppeteer.md
index fc3475ef1f..82b6da76e0 100644
--- a/gh-pages/_posts/dev-guide/2020-07-31-e2e-testing-with-puppeteer.md
+++ b/gh-pages/_posts/dev-guide/2020-07-31-e2e-testing-with-puppeteer.md
@@ -22,7 +22,7 @@ When you run e2e tests, puppeteers starts a html-server using the built applicat
 
 ### Running all e2e tests:
 
--   `npm run build`
+-   `npm run build:web`
 -   `npm run e2e` for parallel or `npm run e2e:ci` for sequential execution
 
 ### Running individual e2e tests:
diff --git a/visualization/.eslintignore b/visualization/.eslintignore
index f06235c460..5b0ec4f020 100644
--- a/visualization/.eslintignore
+++ b/visualization/.eslintignore
@@ -1,2 +1,3 @@
 node_modules
 dist
+*.js
diff --git a/visualization/.eslintrc.js b/visualization/.eslintrc.js
index 6990638089..e7340225ef 100644
--- a/visualization/.eslintrc.js
+++ b/visualization/.eslintrc.js
@@ -49,7 +49,6 @@ module.exports = {
         "@typescript-eslint/explicit-module-boundary-types": "off",
         "@typescript-eslint/ban-types": "off",
         "@typescript-eslint/no-explicit-any": "off",
-        "@typescript-eslint/no-var-requires": "off",
         "@typescript-eslint/consistent-type-assertions": "off",
     }
 }
diff --git a/visualization/app/codeCharta/codeCharta.component.spec.ts b/visualization/app/codeCharta/codeCharta.component.spec.ts
index c336d9b3ca..9f65ba285e 100644
--- a/visualization/app/codeCharta/codeCharta.component.spec.ts
+++ b/visualization/app/codeCharta/codeCharta.component.spec.ts
@@ -8,6 +8,8 @@ import { InjectorService } from "./state/injector.service"
 import { StoreService } from "./state/store.service"
 import { setAppSettings } from "./state/store/appSettings/appSettings.actions"
 import { ThreeCameraService } from "./ui/codeMap/threeViewer/threeCameraService"
+import sample1 from "./assets/sample1.cc.json"
+import sample2 from "./assets/sample2.cc.json"
 import { setSearchPanelMode } from "./state/store/appSettings/searchPanelMode/searchPanelMode.actions"
 import { PanelSelection, SearchPanelMode } from "./codeCharta.model"
 import { CodeChartaMouseEventService } from "./codeCharta.mouseEvent.service"
@@ -142,8 +144,8 @@ describe("codeChartaController", () => {
 
 		it("should call loadFiles with sample files", () => {
 			const expected = [
-				{ fileName: "sample1.cc.json", content: require("./assets/sample1.cc.json") },
-				{ fileName: "sample2.cc.json", content: require("./assets/sample2.cc.json") }
+				{ fileName: "sample1.cc.json", content: sample1 },
+				{ fileName: "sample2.cc.json", content: sample2 }
 			]
 
 			codeChartaController.tryLoadingSampleFiles()
diff --git a/visualization/app/codeCharta/codeCharta.component.ts b/visualization/app/codeCharta/codeCharta.component.ts
index 60338a10b0..826544d05e 100755
--- a/visualization/app/codeCharta/codeCharta.component.ts
+++ b/visualization/app/codeCharta/codeCharta.component.ts
@@ -8,10 +8,13 @@ import { InjectorService } from "./state/injector.service"
 import { StoreService } from "./state/store.service"
 import { setAppSettings } from "./state/store/appSettings/appSettings.actions"
 import { setIsLoadingFile } from "./state/store/appSettings/isLoadingFile/isLoadingFile.actions"
-import * as codeCharta from "../../package.json"
+import packageJson from "../../package.json"
 import { setDelta, setMultiple, setSingle } from "./state/store/files/files.actions"
 import { getCCFiles } from "./model/files/files.helper"
 import { CodeChartaMouseEventService } from "./codeCharta.mouseEvent.service"
+import sample1 from "./assets/sample1.cc.json"
+import sample2 from "./assets/sample2.cc.json"
+import { ExportCCFile } from "./codeCharta.api.model"
 
 export class CodeChartaController {
 	private _viewModel: {
@@ -33,7 +36,7 @@ export class CodeChartaController {
 		// @ts-ignore
 		private injectorService: InjectorService // We have to inject it somewhere
 	) {
-		this._viewModel.version = codeCharta.version
+		this._viewModel.version = packageJson.version
 		this.urlUtils = new UrlExtractor(this.$location, this.$http)
 		this.storeService.dispatch(setIsLoadingFile(true))
 		this.loadFileOrSample()
@@ -62,8 +65,8 @@ export class CodeChartaController {
 			)
 		}
 		this.tryLoadingFiles([
-			{ fileName: "sample1.cc.json", content: require("./assets/sample1.cc.json") },
-			{ fileName: "sample2.cc.json", content: require("./assets/sample2.cc.json") }
+			{ fileName: "sample1.cc.json", content: sample1 as ExportCCFile },
+			{ fileName: "sample2.cc.json", content: sample2 as ExportCCFile }
 		])
 	}
 
diff --git a/visualization/app/codeCharta/e2e/logo.e2e.ts b/visualization/app/codeCharta/e2e/logo.e2e.ts
index b0b72f1194..996bde8d48 100644
--- a/visualization/app/codeCharta/e2e/logo.e2e.ts
+++ b/visualization/app/codeCharta/e2e/logo.e2e.ts
@@ -1,5 +1,6 @@
 import { goto } from "../../puppeteer.helper"
 import { LogoPageObject } from "./logo.po"
+import packageJson from "../../../package.json"
 
 describe("CodeCharta logo", () => {
 	let logo: LogoPageObject
@@ -11,7 +12,7 @@ describe("CodeCharta logo", () => {
 	})
 
 	it("should have correct version", async () => {
-		expect(await logo.getVersion()).toBe(require("../../../package.json").version)
+		expect(await logo.getVersion()).toBe(packageJson.version)
 	})
 
 	it("should have correct link", async () => {
diff --git a/visualization/app/codeCharta/e2e/url.e2e.ts b/visualization/app/codeCharta/e2e/url.e2e.ts
index b82521d6b0..ce70541c9f 100644
--- a/visualization/app/codeCharta/e2e/url.e2e.ts
+++ b/visualization/app/codeCharta/e2e/url.e2e.ts
@@ -1,6 +1,8 @@
 import { CC_URL, goto } from "../../puppeteer.helper"
 import { DialogErrorPageObject } from "../ui/dialog/dialog.error.po"
 import { FilePanelPageObject } from "../ui/filePanel/filePanel.po"
+import sample1 from "../assets/sample3.cc.json"
+import sample3 from "../assets/sample3.cc.json"
 
 describe("codecharta", () => {
 	let dialogError: DialogErrorPageObject
@@ -37,13 +39,13 @@ describe("codecharta", () => {
 				request.respond({
 					contentType: "application/json",
 					headers: { "Access-Control-Allow-Origin": "*" },
-					body: JSON.stringify(require("../assets/sample2.cc.json"))
+					body: JSON.stringify(sample1)
 				})
 			} else if (request.url().includes("/fileTwo.json")) {
 				request.respond({
 					contentType: "application/json",
 					headers: { "Access-Control-Allow-Origin": "*" },
-					body: JSON.stringify(require("../assets/sample3.cc.json"))
+					body: JSON.stringify(sample3)
 				})
 			} else {
 				request.continue()
diff --git a/visualization/app/codeCharta/state/store/dynamicSettings/colorRange/colorRange.reducer.ts b/visualization/app/codeCharta/state/store/dynamicSettings/colorRange/colorRange.reducer.ts
index 11477cdf80..560d5b6158 100644
--- a/visualization/app/codeCharta/state/store/dynamicSettings/colorRange/colorRange.reducer.ts
+++ b/visualization/app/codeCharta/state/store/dynamicSettings/colorRange/colorRange.reducer.ts
@@ -1,6 +1,6 @@
 import { ColorRangeAction, ColorRangeActions, setColorRange } from "./colorRange.actions"
 import { ColorRange } from "../../../../codeCharta.model"
-const clone = require("rfdc")()
+import { clone } from "../../../../util/clone"
 
 export function colorRange(state: ColorRange = setColorRange().payload, action: ColorRangeAction): ColorRange {
 	switch (action.type) {
diff --git a/visualization/app/codeCharta/state/store/fileSettings/attributeTypes/attributeTypes.reducer.ts b/visualization/app/codeCharta/state/store/fileSettings/attributeTypes/attributeTypes.reducer.ts
index 9e895ea9a7..5043df5cd3 100644
--- a/visualization/app/codeCharta/state/store/fileSettings/attributeTypes/attributeTypes.reducer.ts
+++ b/visualization/app/codeCharta/state/store/fileSettings/attributeTypes/attributeTypes.reducer.ts
@@ -1,6 +1,6 @@
 import { AttributeTypesAction, AttributeTypesActions, setAttributeTypes, UpdateAttributeTypeAction } from "./attributeTypes.actions"
 import { AttributeTypes } from "../../../../codeCharta.model"
-const clone = require("rfdc")()
+import { clone } from "../../../../util/clone"
 
 export function attributeTypes(state: AttributeTypes = setAttributeTypes().payload, action: AttributeTypesAction): AttributeTypes {
 	switch (action.type) {
diff --git a/visualization/app/codeCharta/state/store/fileSettings/blacklist/blacklist.reducer.ts b/visualization/app/codeCharta/state/store/fileSettings/blacklist/blacklist.reducer.ts
index 27cb6a3ed5..46daf993b7 100644
--- a/visualization/app/codeCharta/state/store/fileSettings/blacklist/blacklist.reducer.ts
+++ b/visualization/app/codeCharta/state/store/fileSettings/blacklist/blacklist.reducer.ts
@@ -1,7 +1,7 @@
 import { BlacklistItem } from "../../../../codeCharta.model"
 import { BlacklistAction, BlacklistActions, setBlacklist } from "./blacklist.actions"
 import { addItemToArray, removeItemFromArray } from "../../../../util/reduxHelper"
-const clone = require("rfdc")()
+import { clone } from "../../../../util/clone"
 
 export function blacklist(state: BlacklistItem[] = setBlacklist().payload, action: BlacklistAction): BlacklistItem[] {
 	switch (action.type) {
diff --git a/visualization/app/codeCharta/state/store/fileSettings/edges/edges.reducer.ts b/visualization/app/codeCharta/state/store/fileSettings/edges/edges.reducer.ts
index 6f1af8bbab..f919bd33ea 100644
--- a/visualization/app/codeCharta/state/store/fileSettings/edges/edges.reducer.ts
+++ b/visualization/app/codeCharta/state/store/fileSettings/edges/edges.reducer.ts
@@ -1,7 +1,7 @@
 import { EdgesAction, EdgesActions, setEdges } from "./edges.actions"
 import { Edge } from "../../../../codeCharta.model"
 import { addItemToArray, removeItemFromArray } from "../../../../util/reduxHelper"
-const clone = require("rfdc")()
+import { clone } from "../../../../util/clone"
 
 export function edges(state: Edge[] = setEdges().payload, action: EdgesAction): Edge[] {
 	switch (action.type) {
diff --git a/visualization/app/codeCharta/state/store/fileSettings/markedPackages/markedPackages.reducer.ts b/visualization/app/codeCharta/state/store/fileSettings/markedPackages/markedPackages.reducer.ts
index 3fc8a0cff6..7aee0372d2 100644
--- a/visualization/app/codeCharta/state/store/fileSettings/markedPackages/markedPackages.reducer.ts
+++ b/visualization/app/codeCharta/state/store/fileSettings/markedPackages/markedPackages.reducer.ts
@@ -1,7 +1,7 @@
 import { MarkedPackagesAction, MarkedPackagesActions, setMarkedPackages } from "./markedPackages.actions"
 import { MarkedPackage } from "../../../../codeCharta.model"
 import { addItemToArray, removeItemFromArray } from "../../../../util/reduxHelper"
-const clone = require("rfdc")()
+import { clone } from "../../../../util/clone"
 
 export function markedPackages(state: MarkedPackage[] = setMarkedPackages().payload, action: MarkedPackagesAction): MarkedPackage[] {
 	switch (action.type) {
diff --git a/visualization/app/codeCharta/state/store/files/files.reducer.ts b/visualization/app/codeCharta/state/store/files/files.reducer.ts
index 11c5ed1855..e76ce64a11 100644
--- a/visualization/app/codeCharta/state/store/files/files.reducer.ts
+++ b/visualization/app/codeCharta/state/store/files/files.reducer.ts
@@ -1,8 +1,7 @@
 import { FilesAction, FilesSelectionActions, NewFilesImportedActions, setFiles } from "./files.actions"
 import { CCFile } from "../../../codeCharta.model"
 import { FileSelectionState, FileState } from "../../../model/files/files"
-
-const clone = require("rfdc")()
+import { clone } from "../../../util/clone"
 
 export default function files(state: FileState[] = setFiles().payload, action: FilesAction): FileState[] {
 	switch (action.type) {
diff --git a/visualization/app/codeCharta/state/store/metricData/edgeMetricData/edgeMetricData.reducer.ts b/visualization/app/codeCharta/state/store/metricData/edgeMetricData/edgeMetricData.reducer.ts
index c53ce57c98..260e36247e 100644
--- a/visualization/app/codeCharta/state/store/metricData/edgeMetricData/edgeMetricData.reducer.ts
+++ b/visualization/app/codeCharta/state/store/metricData/edgeMetricData/edgeMetricData.reducer.ts
@@ -5,8 +5,7 @@ import { CodeMapHelper } from "../../../../util/codeMapHelper"
 import { FileState } from "../../../../model/files/files"
 import { EdgeMetricDataService } from "./edgeMetricData.service"
 import { sortByMetricName } from "../metricData.reducer"
-
-const clone = require("rfdc")()
+import { clone } from "../../../../util/clone"
 
 export type EdgeMetricCountMap = Map<string, EdgeMetricCount>
 export type NodeEdgeMetricsMap = Map<string, EdgeMetricCountMap>
diff --git a/visualization/app/codeCharta/state/store/metricData/nodeMetricData/nodeMetricData.reducer.ts b/visualization/app/codeCharta/state/store/metricData/nodeMetricData/nodeMetricData.reducer.ts
index 0111be8766..205813a3b7 100644
--- a/visualization/app/codeCharta/state/store/metricData/nodeMetricData/nodeMetricData.reducer.ts
+++ b/visualization/app/codeCharta/state/store/metricData/nodeMetricData/nodeMetricData.reducer.ts
@@ -6,8 +6,7 @@ import { CodeMapHelper } from "../../../../util/codeMapHelper"
 import { hierarchy, HierarchyNode } from "d3"
 import { NodeMetricDataService } from "./nodeMetricData.service"
 import { sortByMetricName } from "../metricData.reducer"
-
-const clone = require("rfdc")()
+import { clone } from "../../../../util/clone"
 
 export function nodeMetricData(state: NodeMetricData[] = setNodeMetricData().payload, action: NodeMetricDataAction): NodeMetricData[] {
 	switch (action.type) {
diff --git a/visualization/app/codeCharta/ui/codeMap/codeMap.preRender.service.ts b/visualization/app/codeCharta/ui/codeMap/codeMap.preRender.service.ts
index b4a7b44fc8..1aab67305d 100755
--- a/visualization/app/codeCharta/ui/codeMap/codeMap.preRender.service.ts
+++ b/visualization/app/codeCharta/ui/codeMap/codeMap.preRender.service.ts
@@ -20,12 +20,12 @@ import { SortingOptionActions } from "../../state/store/dynamicSettings/sortingO
 import { IsAttributeSideBarVisibleActions } from "../../state/store/appSettings/isAttributeSideBarVisible/isAttributeSideBarVisible.actions"
 import { fileStatesAvailable, getVisibleFileStates, isDeltaState, isPartialState, isSingleState } from "../../model/files/files.helper"
 import { FileSelectionState, FileState } from "../../model/files/files"
+import { clone } from "../../util/clone"
 import { PanelSelectionActions } from "../../state/store/appSettings/panelSelection/panelSelection.actions"
 import { PresentationModeActions } from "../../state/store/appSettings/isPresentationMode/isPresentationMode.actions"
 import { MetricDataService, MetricDataSubscriber } from "../../state/store/metricData/metricData.service"
 import { NodeMetricDataService } from "../../state/store/metricData/nodeMetricData/nodeMetricData.service"
 import { EdgeMetricDataService } from "../../state/store/metricData/edgeMetricData/edgeMetricData.service"
-const clone = require("rfdc")()
 
 export interface CodeMapPreRenderServiceSubscriber {
 	onRenderMapChanged(map: CodeMapNode)
diff --git a/visualization/app/codeCharta/ui/codeMap/threeViewer/threeOrbitControlsService.ts b/visualization/app/codeCharta/ui/codeMap/threeViewer/threeOrbitControlsService.ts
index 218024b28c..0eb62fa299 100755
--- a/visualization/app/codeCharta/ui/codeMap/threeViewer/threeOrbitControlsService.ts
+++ b/visualization/app/codeCharta/ui/codeMap/threeViewer/threeOrbitControlsService.ts
@@ -10,6 +10,8 @@ import {
 } from "../../../state/store/dynamicSettings/focusedNodePath/focusedNodePath.service"
 import { FilesService, FilesSelectionSubscriber } from "../../../state/store/files/files.service"
 import { setCameraTarget } from "../../../state/store/appSettings/cameraTarget/cameraTarget.actions"
+import * as Three from "three"
+import oc from "three-orbit-controls"
 
 export interface CameraChangeSubscriber {
 	onCameraChanged(camera: PerspectiveCamera)
@@ -126,7 +128,7 @@ export class ThreeOrbitControlsService implements FocusNodeSubscriber, UnfocusNo
 	}
 
 	public init(domElement) {
-		const orbitControls = require("three-orbit-controls")(require("three"))
+		const orbitControls = oc(Three)
 		this.controls = new orbitControls(this.threeCameraService.camera, domElement)
 		this.controls.addEventListener("change", () => {
 			this.onInput(this.threeCameraService.camera)
diff --git a/visualization/app/codeCharta/ui/fileChooser/fileChooser.component.html b/visualization/app/codeCharta/ui/fileChooser/fileChooser.component.html
index 1e58dc20f0..9d58e0b0cf 100755
--- a/visualization/app/codeCharta/ui/fileChooser/fileChooser.component.html
+++ b/visualization/app/codeCharta/ui/fileChooser/fileChooser.component.html
@@ -7,7 +7,7 @@
 	id="input-file-id"
 	multiple
 	type="file"
-	accept=".json"
+	accept=".json,.gz"
 	onclick="this.value=null"
 	onchange="angular.element(this).scope().ctrl.onImportNewFiles(this)"
 />
diff --git a/visualization/app/codeCharta/ui/fileChooser/fileChooser.component.ts b/visualization/app/codeCharta/ui/fileChooser/fileChooser.component.ts
index c7a774975f..9427b764df 100755
--- a/visualization/app/codeCharta/ui/fileChooser/fileChooser.component.ts
+++ b/visualization/app/codeCharta/ui/fileChooser/fileChooser.component.ts
@@ -11,6 +11,7 @@ import { CodeChartaService } from "../../codeCharta.service"
 import { NameDataPair } from "../../codeCharta.model"
 import { StoreService } from "../../state/store.service"
 import { setIsLoadingFile } from "../../state/store/appSettings/isLoadingFile/isLoadingFile.actions"
+import zlib from "zlib"
 
 export class FileChooserController {
 	private files: NameDataPair[] = []
@@ -39,8 +40,6 @@ export class FileChooserController {
 
 				reader.onload = event => {
 					if (isCompressed) {
-						const zlib = require("zlib")
-
 						content = zlib.unzipSync(Buffer.from(event.target.result))
 					} else {
 						content = event.target.result
diff --git a/visualization/app/codeCharta/ui/mapTreeView/mapTreeView.component.ts b/visualization/app/codeCharta/ui/mapTreeView/mapTreeView.component.ts
index 2fd4d7a8d6..00b67ca0da 100755
--- a/visualization/app/codeCharta/ui/mapTreeView/mapTreeView.component.ts
+++ b/visualization/app/codeCharta/ui/mapTreeView/mapTreeView.component.ts
@@ -7,10 +7,9 @@ import {
 	SortingOrderAscendingSubscriber
 } from "../../state/store/appSettings/sortingOrderAscending/sortingOrderAscending.service"
 import { SortingOptionService, SortingOptionSubscriber } from "../../state/store/dynamicSettings/sortingOption/sortingOption.service"
+import { clone } from "../../util/clone"
 import { NodeMetricDataService } from "../../state/store/metricData/nodeMetricData/nodeMetricData.service"
 
-const clone = require("rfdc")()
-
 export class MapTreeViewController implements CodeMapPreRenderServiceSubscriber, SortingOptionSubscriber, SortingOrderAscendingSubscriber {
 	private _viewModel: {
 		rootNode: CodeMapNode
diff --git a/visualization/app/codeCharta/util/aggregationGenerator.ts b/visualization/app/codeCharta/util/aggregationGenerator.ts
index f0c913f484..7cb513b1a1 100755
--- a/visualization/app/codeCharta/util/aggregationGenerator.ts
+++ b/visualization/app/codeCharta/util/aggregationGenerator.ts
@@ -2,6 +2,7 @@ import { CodeMapNode, CCFile, NodeType } from "../codeCharta.model"
 import { CodeChartaService } from "../codeCharta.service"
 import { FileNameHelper } from "./fileNameHelper"
 import { getUpdatedPath } from "./nodePathHelper"
+import packageJson from "../../../package.json"
 
 export class AggregationGenerator {
 	private static projectNameArray: string[] = []
@@ -26,7 +27,7 @@ export class AggregationGenerator {
 			fileMeta: {
 				projectName: "project_aggregation_of_" + this.projectNameArray.join("_and_"),
 				fileName: "file_aggregation_of_" + this.fileNameArray.join("_and_"),
-				apiVersion: require("../../../package.json").codecharta.apiVersion
+				apiVersion: packageJson.codecharta.apiVersion
 			},
 			map: {
 				name: CodeChartaService.ROOT_NAME,
diff --git a/visualization/app/codeCharta/util/clone.spec.ts b/visualization/app/codeCharta/util/clone.spec.ts
new file mode 100644
index 0000000000..9d946b90b2
--- /dev/null
+++ b/visualization/app/codeCharta/util/clone.spec.ts
@@ -0,0 +1,13 @@
+import { clone } from "./clone"
+
+describe("clone", () => {
+	it("should clone a javascript object", () => {
+		const object = { x: 1, y: 2 }
+
+		const actual = clone(object)
+
+		expect(actual).toEqual(object)
+		object.x = 2
+		expect(actual).not.toEqual(object)
+	})
+})
diff --git a/visualization/app/codeCharta/util/clone.ts b/visualization/app/codeCharta/util/clone.ts
new file mode 100644
index 0000000000..99439cee6f
--- /dev/null
+++ b/visualization/app/codeCharta/util/clone.ts
@@ -0,0 +1,5 @@
+import rfdc from "rfdc"
+
+export function clone(content: any): any {
+	return rfdc()(content)
+}
diff --git a/visualization/app/codeCharta/util/deltaGenerator.ts b/visualization/app/codeCharta/util/deltaGenerator.ts
index 49042a67f8..dbb44d3454 100755
--- a/visualization/app/codeCharta/util/deltaGenerator.ts
+++ b/visualization/app/codeCharta/util/deltaGenerator.ts
@@ -3,6 +3,7 @@ import { CodeMapNode, CCFile, KeyValuePair, FileMeta } from "../codeCharta.model
 import _ from "lodash"
 import { MapBuilder } from "./mapBuilder"
 import { FileNameHelper } from "./fileNameHelper"
+import packageJson from "../../../package.json"
 
 export class DeltaGenerator {
 	public static getDeltaFile(referenceFile: CCFile, comparisonFile: CCFile): CCFile {
@@ -83,7 +84,7 @@ export class DeltaGenerator {
 				FileNameHelper.withoutCCJsonExtension(referenceFile.fileMeta.fileName) +
 				"_and_" +
 				FileNameHelper.withoutCCJsonExtension(comparisonFile.fileMeta.fileName),
-			apiVersion: require("../../../package.json").codecharta.apiVersion,
+			apiVersion: packageJson.codecharta.apiVersion,
 			projectName: "delta_between_" + referenceFile.fileMeta.projectName + "_and_" + comparisonFile.fileMeta.projectName
 		}
 	}
diff --git a/visualization/app/codeCharta/util/fileDownloader.ts b/visualization/app/codeCharta/util/fileDownloader.ts
index 2830d6d484..e072ab8555 100644
--- a/visualization/app/codeCharta/util/fileDownloader.ts
+++ b/visualization/app/codeCharta/util/fileDownloader.ts
@@ -5,7 +5,7 @@ import { DownloadCheckboxNames } from "../ui/dialog/dialog.download.component"
 import { CodeChartaService } from "../codeCharta.service"
 import { ExportCCFile } from "../codeCharta.api.model"
 import { NodeMetricDataService } from "../state/store/metricData/nodeMetricData/nodeMetricData.service"
-const clone = require("rfdc")()
+import { clone } from "./clone"
 
 export class FileDownloader {
 	public static downloadCurrentMap(
diff --git a/visualization/app/codeCharta/util/fileValidator.spec.ts b/visualization/app/codeCharta/util/fileValidator.spec.ts
index 34d32a51d7..1f739d4e95 100755
--- a/visualization/app/codeCharta/util/fileValidator.spec.ts
+++ b/visualization/app/codeCharta/util/fileValidator.spec.ts
@@ -6,6 +6,7 @@ import {
 	TEST_FILE_CONTENT_NO_API
 } from "./dataMocks"
 import { NodeType } from "../codeCharta.model"
+import packageJson from "../../../package.json"
 import { CCValidationResult, ERROR_MESSAGES, validate } from "./fileValidator"
 import assert from "assert"
 
@@ -18,7 +19,7 @@ describe("FileValidator", () => {
 	})
 
 	it("API version exists in package.json", () => {
-		expect(require("../../../package.json").codecharta.apiVersion).toEqual("1.1")
+		expect(packageJson.codecharta.apiVersion).toEqual("1.1")
 	})
 
 	it("should throw on null", () => {
diff --git a/visualization/app/codeCharta/util/fileValidator.ts b/visualization/app/codeCharta/util/fileValidator.ts
index 54f093155a..006d5d538e 100644
--- a/visualization/app/codeCharta/util/fileValidator.ts
+++ b/visualization/app/codeCharta/util/fileValidator.ts
@@ -1,10 +1,11 @@
 import { CodeMapNode } from "../codeCharta.model"
 import Ajv from "ajv"
+import packageJson from "../../../package.json"
 import { ExportCCFile } from "../codeCharta.api.model"
 import _ from "lodash"
+import jsonSchema from "./generatedSchema.json"
 
-const jsonSchema = require("./generatedSchema.json")
-const latestApiVersion = require("../../../package.json").codecharta.apiVersion
+const latestApiVersion = packageJson.codecharta.apiVersion
 
 interface ApiVersion {
 	major: number
diff --git a/visualization/app/codeCharta/util/reduxHelper.ts b/visualization/app/codeCharta/util/reduxHelper.ts
index 0150c35728..73fe222dcc 100644
--- a/visualization/app/codeCharta/util/reduxHelper.ts
+++ b/visualization/app/codeCharta/util/reduxHelper.ts
@@ -1,7 +1,6 @@
+import { clone } from "./clone"
 import _ from "lodash"
 
-const clone = require("rfdc")()
-
 export function removeItemFromArray(array: any[], item: any): any[] {
 	return array.filter(x => {
 		return !_.isEqual(x, item)
diff --git a/visualization/app/codeCharta/util/scenarioHelper.spec.ts b/visualization/app/codeCharta/util/scenarioHelper.spec.ts
index c87787d8c4..baec32d8cd 100755
--- a/visualization/app/codeCharta/util/scenarioHelper.spec.ts
+++ b/visualization/app/codeCharta/util/scenarioHelper.spec.ts
@@ -4,10 +4,11 @@ import { PARTIAL_SETTINGS, SCENARIO, SCENARIO_ITEM_WITH_EVERYTHING_SAVED, SCENAR
 import { Vector3 } from "three"
 import { ScenarioMetricType } from "../ui/dialog/dialog.addScenarioSettings.component"
 import { ScenarioItem } from "../ui/scenarioDropDown/scenarioDropDown.component"
+import scenarioJson from "../assets/scenarios.json"
 import { ExportScenario } from "../codeCharta.api.model"
 
 describe("scenarioHelper", () => {
-	const scenarios: ExportScenario[] = require("../assets/scenarios.json")
+	const scenarios: ExportScenario[] = scenarioJson
 
 	beforeEach(() => {
 		ScenarioHelper["scenarios"].set("Scenario1", SCENARIO)
diff --git a/visualization/app/codeCharta/util/scenarioHelper.ts b/visualization/app/codeCharta/util/scenarioHelper.ts
index 45c96294cc..f1c0f53181 100755
--- a/visualization/app/codeCharta/util/scenarioHelper.ts
+++ b/visualization/app/codeCharta/util/scenarioHelper.ts
@@ -3,6 +3,7 @@ import { AppSettings, CCLocalStorage, DynamicSettings, RecursivePartial, Scenari
 import { convertToVectors } from "./settingsHelper"
 import { AddScenarioContent, ScenarioMetricType } from "../ui/dialog/dialog.addScenarioSettings.component"
 import { ScenarioItem } from "../ui/scenarioDropDown/scenarioDropDown.component"
+import scenarios from "../assets/scenarios.json"
 import { ExportScenario } from "../codeCharta.api.model"
 
 export class ScenarioHelper {
@@ -68,7 +69,7 @@ export class ScenarioHelper {
 	}
 
 	private static getPreLoadScenarios(): Map<String, RecursivePartial<Scenario>> {
-		const scenariosAsSettings: ExportScenario[] = this.importScenarios(require("../assets/scenarios.json"))
+		const scenariosAsSettings: ExportScenario[] = this.importScenarios(scenarios)
 		const scenario: Map<String, RecursivePartial<Scenario>> = new Map<String, RecursivePartial<Scenario>>()
 		scenariosAsSettings.forEach(scenarioSettings => {
 			scenario.set(scenarioSettings.name, this.transformScenarioAsSettingsToScenario(scenarioSettings))
diff --git a/visualization/app/puppeteer.helper.ts b/visualization/app/puppeteer.helper.ts
index e690cce157..829e1a41e3 100644
--- a/visualization/app/puppeteer.helper.ts
+++ b/visualization/app/puppeteer.helper.ts
@@ -1,6 +1,5 @@
 import * as path from "path"
 
-export const puppeteer = require("puppeteer")
 export const CC_URL = `file:${path.join(__dirname, "../dist/webpack/index.html")}`
 
 export async function goto(url: string = CC_URL): Promise<void> {
diff --git a/visualization/package-lock.json b/visualization/package-lock.json
index 0c37744379..78ae406e50 100644
--- a/visualization/package-lock.json
+++ b/visualization/package-lock.json
@@ -3948,97 +3948,6 @@
 				}
 			}
 		},
-		"@typescript-eslint/scope-manager": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.0.1.tgz",
-			"integrity": "sha512-u3YEXVJ8jsj7QCJk3om0Y457fy2euEOkkzxIB/LKU3MdyI+FJ2gI0M4aKEaXzwCSfNDiZ13a3lDo5DVozc+XLQ==",
-			"dev": true,
-			"requires": {
-				"@typescript-eslint/types": "4.0.1",
-				"@typescript-eslint/visitor-keys": "4.0.1"
-			}
-		},
-		"@typescript-eslint/types": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.0.1.tgz",
-			"integrity": "sha512-S+gD3fgbkZYW2rnbjugNMqibm9HpEjqZBZkTiI3PwbbNGWmAcxolWIUwZ0SKeG4Dy2ktpKKaI/6+HGYVH8Qrlg==",
-			"dev": true
-		},
-		"@typescript-eslint/typescript-estree": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.0.1.tgz",
-			"integrity": "sha512-zGzleORFXrRWRJAMLTB2iJD1IZbCPkg4hsI8mGdpYlKaqzvKYSEWVAYh14eauaR+qIoZVWrXgYSXqLtTlxotiw==",
-			"dev": true,
-			"requires": {
-				"@typescript-eslint/types": "4.0.1",
-				"@typescript-eslint/visitor-keys": "4.0.1",
-				"debug": "^4.1.1",
-				"globby": "^11.0.1",
-				"is-glob": "^4.0.1",
-				"lodash": "^4.17.15",
-				"semver": "^7.3.2",
-				"tsutils": "^3.17.1"
-			},
-			"dependencies": {
-				"array-union": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-					"integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-					"dev": true
-				},
-				"debug": {
-					"version": "4.1.1",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-					"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
-					"dev": true,
-					"requires": {
-						"ms": "^2.1.1"
-					}
-				},
-				"globby": {
-					"version": "11.0.1",
-					"resolved": "https://registry.npmjs.org/globby/-/globby-11.0.1.tgz",
-					"integrity": "sha512-iH9RmgwCmUJHi2z5o2l3eTtGBtXek1OYlHrbcxOYugyHLmAsZrPj43OtHThd62Buh/Vv6VyCBD2bdyWcGNQqoQ==",
-					"dev": true,
-					"requires": {
-						"array-union": "^2.1.0",
-						"dir-glob": "^3.0.1",
-						"fast-glob": "^3.1.1",
-						"ignore": "^5.1.4",
-						"merge2": "^1.3.0",
-						"slash": "^3.0.0"
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				},
-				"semver": {
-					"version": "7.3.2",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
-					"integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
-					"dev": true
-				},
-				"slash": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-					"integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-					"dev": true
-				}
-			}
-		},
-		"@typescript-eslint/visitor-keys": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.0.1.tgz",
-			"integrity": "sha512-yBSqd6FjnTzbg5RUy9J+9kJEyQjTI34JdGMJz+9ttlJzLCnGkBikxw+N5n2VDcc3CesbIEJ0MnZc5uRYnrEnCw==",
-			"dev": true,
-			"requires": {
-				"@typescript-eslint/types": "4.0.1",
-				"eslint-visitor-keys": "^2.0.0"
-			}
-		},
 		"@webassemblyjs/ast": {
 			"version": "1.9.0",
 			"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
diff --git a/visualization/plop/templates/redux/reducer.ts.hbs b/visualization/plop/templates/redux/reducer.ts.hbs
index fce09d87e7..7ed12b5106 100644
--- a/visualization/plop/templates/redux/reducer.ts.hbs
+++ b/visualization/plop/templates/redux/reducer.ts.hbs
@@ -1,5 +1,5 @@
 import { {{properCase name}}Action, {{properCase name}}Actions, set{{properCase name}} } from "./{{camelCase name}}.actions"
-const clone = require("rfdc")()
+import { clone } from "../../../util/clone"
 
 export function {{camelCase name}}(state: {{type}} = set{{properCase name}}().payload, action: {{properCase name}}Action): {{type}} {
 	switch (action.type) {