Importing D3 is causing TheLayout to produce invalid unicode escape sequence on D3.random

[aefnor]

🐛 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)

[mischnic]

#9370 has come back again

Also fails when just building

function p(µ, σ) {}
console.log(p);

[chdominguez]

As a workaround, you can downgrade @parcel/optimizer-swc to 2.10.3

[mischnic]

As a workaround, you can downgrade @parcel/optimizer-swc to 2.10.3

(Not sure if that will help, I think the bug occurs even before the minifier runs.)

[chdominguez]

As a workaround, you can downgrade @parcel/optimizer-swc to 2.10.3

(Not sure if that will help, I think the bug occurs even before the minifier runs.)

You are right, It seemed to work after downgrading but now it still doesn't (maybe some cache). I think the only actual workaround will be to migrate to other bundler.