Minimal setup for reproduce D3 error with Parcel 2.8.3

parcel-bundler/parcel#8792
OzzyCzech · Mar 8, 2023 · 542d13f · 542d13f
commit 542d13f
Show file tree

Hide file tree

Showing 6 changed files with 2,383 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+dist
+.parcel-cache
+node_modules
diff --git a/index.html b/index.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>Example error</title>
+	<script type="module" src="index.js"></script>
+</head>
+<body>
+
+<main style="margin: 2rem auto; max-width: 680px">
+
+	<h1>D3 chart should be here...</h1>
+	<div id="chart" style="border: 1px solid #ddd; padding: 1em; margin: 1em auto; width: 400px; height: 400px;"></div>
+
+	<div id="console" style="border: 1px solid red; padding: 1em; margin: 1em auto;border-radius: 5px; color: red; font-family: monospace; font-size: 1.5rem; white-space: break-spaces;display: none;"></div>
+
+	<script>
+		window.onerror = function (message, source, lineno, colno, error) {
+			const cons = document.getElementById('console');
+			cons.style.display = 'block';
+			cons.innerHTML += `<h2>Error console</h2>${message} ${source} ${lineno} ${colno} ${error}`;
+		};
+	</script>
+</main>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,34 @@
+import * as d3 from 'd3';
+
+
+class Chart {
+
+	constructor(element) {
+		this.data = [1, 2, 3];
+		this.element = element;
+	}
+
+
+	render() {
+		const svg = d3.select(this.element)
+			.append('svg')
+			.attr('width', '400px')
+			.attr('height', '400px')
+			.attr('viewBox', [0, 0, 400, 400])
+			.attr('preserveAspectRatio', 'xMinYMin meet')
+			.attr('xmlns', 'http://www.w3.org/2000/svg')
+			.attr('style', 'max-width: 100%; height: auto; height: intrinsic;');
+
+
+		svg.append('circle')
+			.attr('cx', 200)
+			.attr('cy', 200)
+			.attr('r', 50)
+			.attr('stroke', 'green')
+			.attr('fill', 'green');
+	}
+}
+
+const element = document.getElementById('chart');
+const chart = new Chart(element);
+chart.render();
diff --git a/package.json b/package.json
@@ -0,0 +1,18 @@
+{
+	"name": "d3error",
+	"version": "1.0.0",
+	"license": "MIT",
+	"scripts": {
+		"clean": "rm -rf dist",
+		"start": "parcel index.html",
+		"build": "yarn clean && parcel build index.html --no-cache",
+		"serve": "serve -s dist",
+		"ok": "yarn clean && yarn start",
+		"error": "yarn clean && yarn build && yarn serve"
+	},
+	"dependencies": {
+		"d3": "^7.8.2",
+		"parcel": "^2.8.3",
+		"serve": "^14.2.0"
+	}
+}
diff --git a/readme.md b/readme.md
@@ -0,0 +1,10 @@
+# Parcel 2.8 bundler issue
+
+https://github.com/parcel-bundler/parcel/issues/8792
+
+
+Reproduce an error:
+
+```bash
+yarn failing
+```