Importing D3 is causing TheLayout to produce invalid unicode escape sequence on D3.random
aefnor opened this issue Β· comments
π bug report
Importing D3 into my react app that is being migrated from CRA produces invalid unicode escape sequence when passing in the params for D3.random.
import * as d3 from "d3";
causes TheLayout to produce
normal: function(\xb5, \u03C3) {
var n = arguments.length;
if (n < 2) \u03C3 = 1;
if (n < 1) \xb5 = 0;
return function() {
var x, y, r;
do {
x = Math.random() * 2 - 1;
y = Math.random() * 2 - 1;
r = x * x + y * y;
}while (!r || r > 1);
return \xb5 + \u03C3 * x * Math.sqrt(-2 * Math.log(r) / r);
};
},π Configuration (.babelrc, package.json, cli command)
{
"aliases": {
"src/*": "./src",
"alias": {
"d3": "d3/dist/d3.js"
}
},
"dependencies": {
"@azure/msal-browser": "^2.21.0",
"@azure/msal-react": "^1.2.0",
"@coreui/coreui": "^3.4.0",
"@coreui/icons": "^2.0.0-rc.0",
"@coreui/icons-react": "^1.0.2",
"@coreui/react": "^3.4.5",
"@coreui/react-chartjs": "^1.0.1",
"@coreui/utils": "^1.3.1",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.1",
"@mui/lab": "^5.0.0-alpha.168",
"@mui/material": "^5.15.13",
"@parcel/config-default": "^2.12.0",
"@parcel/core": "^2.12.0",
"@reduxjs/toolkit": "^1.6.1",
"axios": "1.6.4",
"bootstrap": "5.1.1",
"classnames": "^2.2.6",
"core-js": "^3.8.3",
"cronstrue": "^2.23.0",
"d3": "^7.9.0",
"date-fns": "^2.29.3",
"detect-file-encoding-and-language": "^2.1.0",
"email-validator": "^2.0.4",
"jwt-decode": "^3.1.2",
"lodash": "^4.17.21",
"node-sass": "^8.0.0",
"plotly.js": "^2.6.2",
"prop-types": "^15.7.2",
"python-format-js": "^1.4.0",
"query-string": "^6.13.8",
"react": "^18.2.0",
"react-app-polyfill": "^2.0.0",
"react-autocomplete": "^1.8.1",
"react-beautiful-dnd": "^13.1.1",
"react-bootstrap": "^2.5.0",
"react-circular-progressbar": "^2.1.0",
"react-code-blocks": "^0.0.8",
"react-color": "^2.19.3",
"react-data-grid": "^7.0.0-beta.19",
"react-data-table-component": "^7.4.4",
"react-date-picker": "^10.6.0",
"react-datepicker": "^6.1.0",
"react-dom": "^18.2",
"react-dropzone": "^12.0.4",
"react-grid-layout": "^1.4.4",
"react-hot-toast": "^2.4.0",
"react-icons": "^4.1.0",
"react-intl": "^5.20.10",
"react-joyride": "^2.3.0",
"react-loading-overlay-ts": "^2.0.0",
"react-pdf": "^7.3.3",
"react-pivottable": "^0.11.0",
"react-player": "^2.8.2",
"react-plotly.js": "^2.5.1",
"react-polling": "^1.0.9",
"react-query": "^3.21.1",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-select": "^5.7.3",
"react-spinners": "^0.9.0",
"react-step-progress-bar": "^1.0.3",
"react-textarea-autosize": "^8.4.1",
"react-toastify": "^9.1.3",
"react-tooltip": "^5.14.0",
"react-use-websocket": "3.0.0",
"reactflow": "^11.9.4",
"reactjs-crontab": "^4.5.0",
"redux": "^4.2.0",
"title-case": "^3.0.3",
"uplot": "^1.6.18",
"uplot-react": "^1.1.1"
},
"devDependencies": {
"@babel/plugin-proposal-private-property-in-object": "7.21.11",
"@parcel/packager-raw-url": "2.12.0",
"@parcel/transformer-sass": "2.12.0",
"@parcel/transformer-webmanifest": "2.12.0",
"auto-changelog": "~2.2.1",
"buffer": "^5.5.0||^6.0.0",
"eslint": "^7.31.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.24.0",
"husky": "^8.0.0",
"lint-staged": "^13.0.3",
"parcel": "^2.12.0",
"prettier": "^2.7.1",
"process": "^0.11.10",
"react-scripts": "^5.0.0"
},
"scripts": {
"startdev": "REACT_APP_STAGE=dev react-scripts start",
"start": "REACT_APP_STAGE=local parcel src/index.html --port 3000 ",
"build": "REACT_APP_STAGE=prod DISABLE_ESLINT_PLUGIN=true react-scripts build",
"test": "react-scripts test",
"test:cov": "npm test -- --coverage --watchAll=false",
"test:debug": "react-scripts --inspect-brk test --runInBand",
"eject": "react-scripts eject",
"changelog": "auto-changelog --starting-version 3.0.0 --commit-limit false --hide-credit",
"lint": "eslint --ext .js --ext .jsx --format compact",
"prepare": "husky install",
"pre-commit": "lint-staged"
},
"lint-staged": {
"src/**/*.{js,jsx}": [
"eslint --ext .jsx --ext .js ./src --fix"
],
"./src/**": [
"prettier --write ."
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not ie <= 10",
"not op_mini all"
],
"development": [
"ie 11",
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"resolutions": {
"react-code-blocks/**/prismjs": "^1.21.0",
"react-scripts/**/nth-check": "^2.0.1",
"react-code-blocks/**/react-syntax-highlighter": "^15.4.4",
"react-code-blocks/**/lowlight": "^1.0.0",
"react-code-blocks/**/highlight.js": "^10.4.1",
"react-scripts/**/postcss": "8.4.31",
"react-scripts/**/follow-redirects": "^1.15.6",
"axios/follow-redirects": "^1.15.6",
"autoprefixer": "10.4.5",
"ip": "2.0.1"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}",
"!**/*index.js",
"!src/serviceWorker.js",
"!src/polyfill.js"
]
},
"engines": {
"node": ">=10",
"npm": ">=6"
}
}π€ Expected Behavior
I would expect it to produce something along the lines of the other D3.random functions
d3.random = {
logNormal: function() {
var random = d3.random.normal.apply(d3, arguments);
return function() {
return Math.exp(random());
};
},
bates: function(m) {
var random = d3.random.irwinHall(m);
return function() {
return random() / m;
};
},
irwinHall: function(m) {
return function() {
for(var s = 0, j = 0; j < m; j++)s += Math.random();
return s;
};
}
};π― Current Behavior
d3.random = {
normal: function(\xb5, \u03C3) {
var n = arguments.length;
if (n < 2) \u03C3 = 1;
if (n < 1) \xb5 = 0;
return function() {
var x, y, r;
do {
x = Math.random() * 2 - 1;
y = Math.random() * 2 - 1;
r = x * x + y * y;
}while (!r || r > 1);
return \xb5 + \u03C3 * x * Math.sqrt(-2 * Math.log(r) / r);
};
},
π Possible Solution
π¦ Context
I am simply trying to convert from CRA to ParcelV2 on an established project
π» Code Sample
Seems either
yarn install d3
or
import * as d3 from "d3";
π Your Environment
| Software | Version(s) |
|---|---|
| Parcel | 2.12.0 |
| Node | 18.19.1 |
| npm/Yarn | 1.22.22 |
| Operating System | Windows 11 Pro 64-bit (10.0, Build 22631) (22621.ni_release.220506-1250) |
As a workaround, you can downgrade @parcel/optimizer-swc to 2.10.3
As a workaround, you can downgrade
@parcel/optimizer-swcto2.10.3
(Not sure if that will help, I think the bug occurs even before the minifier runs.)