Plotly.js dependency is breaking the React application

Question

I am working on a project using react version 17, react-scripts 5, plotly.js, and react-plotly.js among many other front-end dependencies. Here is package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://127.0.0.1:8000",
  "dependencies": {
    "@react-three/drei": "^7.13.1",
    "@react-three/fiber": "^7.0.12",
    "@reduxjs/toolkit": "^1.6.2",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^13.2.1",
    "ace-builds": "1.4.13",
    "assert": "^2.0.0",
    "axios": "^0.21.4",
    "body-scroll-lock": "^3.1.5",
    "bootstrap": "^4.5.2",
    "buffer": "^6.0.3",
    "chroma-js": "^2.1.2",
    "crossfilter2": "^1.5.4",
    "delaunator": "^5.0.0",
    "html-react-parser": "^1.4.5",
    "leaflet": "^1.7.1",
    "lodash": "^4.17.21",
    "plotly.js": "^2.8.3",
    "postcss": "^8.4.5",
    "postcss-flexbugs-fixes": "^5.0.2",
    "react": "17.0.2",
    "react-ace": "9.5.0",
    "react-beautiful-dnd": "^13.0.0",
    "react-bootstrap": "^1.3.0",
    "react-contexify": "^5.0.0",
    "react-contextmenu": "^2.14.0",
    "react-diff-viewer": "3.1.1",
    "react-dom": "17.0.2",
    "react-helmet": "^6.1.0",
    "react-plotly.js": "^2.5.1",
    "react-qr-code": "2.0.3",
    "react-redux": "^7.2.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^5.0.0",
    "react-scrollspy": "^3.4.3",
    "react-select": "^4.3.1",
    "react-spreadsheet": "^0.6.0",
    "reactour": "^1.18.6",
    "redux": "^4.1.0",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.3.0",
    "sass": "^1.49.0",
    "stream": "^0.0.2",
    "stream-parser": "^0.3.1",
    "styled-components": "^5.2.0",
    "three": "^0.133.1",
    "typescript": "^4.5.4",
    "zxcvbn": "^4.4.2"
  },
  "resolutions": {
    "react-error-overlay": "6.0.9"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build --max-old-space-size=7000 --nomaps",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "cy:run": "cypress run"
  },
  "eslintConfig": {
    "extends": "react-app",
    "overrides": [
      {
        "files": [
          "**/*.stories.*"
        ],
        "rules": {
          "import/no-anonymous-default-export": "off"
        }
      }
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/chroma-js": "^2.1.3",
    "@types/delaunator": "^5.0.0",
    "@types/leaflet": "^1.7.8",
    "@types/postcss-flexbugs-fixes": "^4.2.1",
    "@types/three": "^0.136.0",
    "cypress": "^9.1.1",
    "cypress-file-upload": "^5.0.8",
    "cypress-wait-until": "^1.7.2",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.23.1",
    "eslint-plugin-react-hooks": "^4.3.0",
    "prettier": "^2.3.2",
    "react-error-overlay": "6.0.9"
  }
}

The react app was bootstrapped using CRA 4.

The problem started when we upgraded react-scripts to version 5, lots of errors popped up, they were solved by installing different dependencies.

After solving all the errors displayed in the vs code console (there is one warning though take a look at the end of the post), the app displays a white screen. Upon inspection, I saw this error.

Here's what it says:

Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')
    at Object../node_modules/probe-image-size/lib/common.js (common.js:13:1)
    at Object.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Object../node_modules/probe-image-size/lib/parse_sync/avif.js (avif.js:13:1)
    at Object.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Object../node_modules/probe-image-size/lib/parsers_sync.js (parsers_sync.js:5:1)
    at Object.options.factory (react refresh:6:1)

This is indicating that the dependency probe-image-size used by plotly.js is throwing an error.

To verify this theory, I removed plotly.js and react-plotly (npm uninstall), and I was able to access the front-end once more (the app works fine).

The problem is plotly.js is needed for the app, we cannot drop it!

I tried installing both deleted dependencies again, but the error persists.

Is there a way to fix this problem?

The warning I mentioned before states the following

Failed to parse source map from '../node_modules/@chevrotain/utils/lib/src/api.js.map'
file: Error: ENOENT: no such file or directory, open '../node_modules/@chevrotain/utils/lib/src/api.js.map'

Answer 1

I solve it using https://github.com/plotly/plotly-webpack and https://github.com/browserify/ify-loader

Basically you need to install

npm install --save ify-loader

And then include this in webpack.config.js

      module: {
      rules: [
          {
              test: /\.js$/,
              loader: 'ify-loader'
          }
      ]
  },

finally I'm not importing import Plotly from 'plotly.js'; but import Plotly from 'plotly.js/dist/plotly';