Uncaught Error: Cannot find module 'dom-helpers/scrollbarSize

[shorif2000]

I am receiving this all of a sudden. If you webpack the following packages it will error.

{
    "name": "",
    "version": "",
    "private": true,
    "scripts": {
        "analyze": "source-map-explorer docs/*.js",
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env node_modules/.bin/webpack -p --mode=production",
        "lint": "eslint src/",
        "lint:fix": "eslint src/ --fix",
        "test": "node_modules/.bin/jest"
    },
    "dependencies": {
        "@babel/runtime": "^7.4.5",
        "@fortawesome/fontawesome-svg-core": "^1.2.25",
        "@fortawesome/free-regular-svg-icons": "^5.11.2",
        "@fortawesome/free-solid-svg-icons": "^5.11.2",
        "@fortawesome/react-fontawesome": "^0.1.7",
        "@ungap/url-search-params": "^0.1.2",
        "audit": "0.0.6",
        "axios": "^0.18.1",
        "body-parser": "^1.19.0",
        "bootstrap-fileinput": "^4.5.2",
        "braces": "^2.3.2",
        "console-polyfill": "^0.3.0",
        "core-js": "^2.6.9",
        "cors": "^2.8.5",
        "crypto-js": "^3.1.9-1",
        "cssnano": "^4.1.10",
        "dompurify": "^2.0.7",
        "es3ify": "^0.2.2",
        "es5-shim": "^4.5.13",
        "express": "^4.17.1",
        "extract-text-webpack-plugin": "^3.0.2",
        "file-loader": "^1.1.11",
        "file-saver": "^2.0.1",
        "font-awesome": "^4.7.0",
        "html-react-parser": "^0.4.7",
        "jquery": "^2.2.4",
        "jsx-to-string": "^1.4.0",
        "lodash": "^4.17.11",
        "lodash-webpack-plugin": "^0.11.5",
        "mini-css-extract-plugin": "^0.8.0",
        "moment": "^2.24.0",
        "node-sass": "^4.12.0",
        "npm": "^6.13.1",
        "npm-audit": "0.0.3",
        "postcss-cssnext": "^3.0.2",
        "postcss-import": "^11.1.0",
        "prop-types": "^15.7.2",
        "pusher": "^2.2.0",
        "pusher-js": "^4.4.0",
        "react": "^16.10.2",
        "react-bootstrap": "^0.32.4",
        "react-bootstrap-table": "^4.3.1",
        "react-bootstrap-table-next": "^0.1.15",
        "react-csv": "^1.1.2",
        "react-dates": "^17.2.0",
        "react-dom": "^16.10.2",
        "react-dropzone": "^4.3.0",
        "react-fontawesome": "^1.6.1",
        "react-ga": "^2.7.0",
        "react-html-parser": "^2.0.2",
        "react-moment": "^0.8.4",
        "react-quill": "^1.3.3",
        "react-redux": "^5.1.1",
        "react-router": "^4.3.1",
        "react-router-dom": "^4.3.1",
        "react-router-redux": "^4.0.8",
        "react-scripts": "^3.2.0",
        "react-select": "^1.3.0",
        "react-sortable-tree": "^2.6.0",
        "react-stringify": "^1.0.0",
        "react-table": "^6.9.2",
        "react-tooltip": "^3.10.0",
        "react-vis": "^1.11.6",
        "react-websocket": "^2.0.1",
        "react-widgets": "^4.4.10",
        "redux": "^3.7.2",
        "redux-file-upload": "0.0.19",
        "redux-form": "^7.4.2",
        "redux-listeners": "^0.4.1",
        "redux-logger": "^3.0.6",
        "redux-promise": "^0.5.3",
        "single-spa": "^4.3.5",
        "single-spa-react": "^2.10.2",
        "socket.io": "^2.2.0",
        "socket.io-client": "^2.2.0",
        "source-map-explorer": "^2.1.0",
        "sugarss": "^1.0.1",
        "supervisor": "^0.12.0",
        "url-search-params": "^0.10.2",
        "viz": "0.0.1"
    },
    "devDependencies": {
        "@babel/cli": "^7.4.4",
        "@babel/core": "^7.6.2",
        "@babel/plugin-proposal-class-properties": "^7.0.0",
        "@babel/plugin-proposal-decorators": "^7.0.0",
        "@babel/plugin-proposal-do-expressions": "^7.0.0",
        "@babel/plugin-proposal-export-default-from": "^7.0.0",
        "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
        "@babel/plugin-proposal-function-bind": "^7.2.0",
        "@babel/plugin-proposal-function-sent": "^7.0.0",
        "@babel/plugin-proposal-json-strings": "^7.0.0",
        "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
        "@babel/plugin-proposal-numeric-separator": "^7.0.0",
        "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
        "@babel/plugin-proposal-optional-chaining": "^7.0.0",
        "@babel/plugin-proposal-pipeline-operator": "^7.0.0",
        "@babel/plugin-proposal-throw-expressions": "^7.0.0",
        "@babel/plugin-syntax-dynamic-import": "^7.0.0",
        "@babel/plugin-syntax-import-meta": "^7.0.0",
        "@babel/plugin-transform-react-constant-elements": "^7.2.0",
        "@babel/plugin-transform-react-inline-elements": "^7.2.0",
        "@babel/plugin-transform-regenerator": "^7.4.5",
        "@babel/plugin-transform-runtime": "^7.6.2",
        "@babel/polyfill": "^7.4.4",
        "@babel/preset-env": "^7.4.5",
        "@babel/preset-es2015": "^7.0.0-beta.53",
        "@babel/preset-react": "^7.0.0",
        "@babel/register": "^7.6.2",
        "autoprefixer-loader": "^3.2.0",
        "axios-mock-adapter": "^1.16.0",
        "babel-core": "^7.0.0-bridge.0",
        "babel-jest": "^24.8.0",
        "babel-loader": "^8.0.6",
        "babel-plugin-lodash": "^3.3.4",
        "babel-plugin-transform-es2015-shorthand-properties": "^6.24.1",
        "bootstrap": "^3.3.7",
        "clean-webpack-plugin": "^3.0.0",
        "copy-webpack-plugin": "^4.6.0",
        "cross-env": "^5.1",
        "css-loader": "^2.1.1",
        "enzyme": "^3.10.0",
        "enzyme-adapter-react-16": "^1.15.1",
        "eslint": "^5.16.0",
        "eslint-config-airbnb": "^17.1.0",
        "eslint-config-rallycoding": "^3.2.0",
        "eslint-plugin-babel": "^5.3.0",
        "eslint-plugin-import": "^2.17.2",
        "eslint-plugin-jsx-a11y": "^6.2.1",
        "eslint-plugin-react": "^7.15.1",
        "expect": "^24.4.0",
        "fetch-mock": "^6.5.2",
        "html-loader": "^0.5.5",
        "html-webpack-plugin": "^3.2.0",
        "jest": "^24.9.0",
        "jest-html-reporter": "^2.5.0",
        "laravel-mix": "^4.0.15",
        "lodash": "^4.17.5",
        "optimize-css-assets-webpack-plugin": "^5.0.3",
        "popper.js": "^1.14.7",
        "prettier": "1.11.1",
        "react-addons-test-utils": "^15.6.2",
        "react-test-renderer": "^16.10.2",
        "redux-devtools-extension": "^2.13.8",
        "redux-mock-store": "^1.5.3",
        "resolve-url-loader": "^2.3.2",
        "riek": "^1.1.0",
        "sass": "^1.17.2",
        "sass-loader": "^7.3.1",
        "style-loader": "^0.23.1",
        "terser-webpack-plugin": "^2.2.1",
        "uglifyjs-webpack-plugin": "^1.3.0",
        "vue": "^2.6.8",
        "webpack": "^4.35.3",
        "webpack-bundle-analyzer": "^3.6.0"
    },
    "browserslist": [
        "last 1 version",
        "> 1%",
        "maintained node versions",
        "not dead"
    ]
}

[Rowadz]

I faced this issue today and wasted an hour trying to fix it by playing with the versions in the resolutions in package.json and I used npm-force-resolutions to force the correct version in all my dependencies.

unfortunately, I couldn't figure out a solution BUT I have a workaround if someone is using webpack

as you can see from the error message somewhere in your dependencies the code tries to import from dom-helpers/scrollbarSize but in dom-helpers the scrollbarSize is inside dom-helpers/uitl/scrollbarSize

so as a solution I added an alias for dom-helpers/scrollbarSize to point to the correct place

webpack.config.js

module.exports = {
  entry: {
     .....
  },
  output: {
      ...
  },
  module: {
    rules: [....]
  },
  resolve: {
    modules: [
      path.resolve('./node_modules')
    ],
    alias: {
      'dom-helpers/scrollbarSize': path.resolve(__dirname, 'node_modules', 'dom-helpers', 'util', 'scrollbarSize'),
      .....
    }
  },
  plugins: [...]
};

just a temp solution I guess

[glebmlk]

just a guess: there is a mock of dom-helpers/scrollbarSize in https://github.com/bvaughn/react-virtualized/blob/master/source/jest-setup.js I think you should try and import this file in your jest's setupTests.js file