Getting error with react-bootstrap while executing npm start

Question

I am working with react-js app Recently I am facing some issues while running the app No issues with npm install

Package version

react: "^16.10.2" react-bootstrap: "^1.0.0-beta.16"

Tried the following steps and it did not work out

Delete node_modules
npm cache clear --force
npm install

Full error :

ERROR in ./node_modules/react-bootstrap/esm/Modal.js
Module not found: Error: Can't resolve 'dom-helpers/addEventListener' in 'C:\Work\walmart\sams_leadership_insights\samsleadershipinsights-frontend-dev\node_modules\react-bootstrap\esm'
 @ ./node_modules/react-bootstrap/esm/Modal.js 5:0-60 116:6-22
 @ ./node_modules/react-bootstrap/esm/index.js
 @ ./src/components/landingPage/LandingPage.js
 @ ./src/App.js
 @ ./src/index.js
 @ multi @babel/polyfill ./src/index.js

ERROR in ./node_modules/react-bootstrap/esm/createWithBsPrefix.js
Module not found: Error: Can't resolve 'dom-helpers/camelize' in 'C:\Work\walmart\sams_leadership_insights\samsleadershipinsights-frontend-dev\node_modules\react-bootstrap\esm'
 @ ./node_modules/react-bootstrap/esm/createWithBsPrefix.js 4:0-44 9:32-40
 @ ./node_modules/react-bootstrap/esm/ToastBody.js
 @ ./node_modules/react-bootstrap/esm/index.js
 @ ./src/components/landingPage/LandingPage.js
 @ ./src/App.js
 @ ./src/index.js
 @ multi @babel/polyfill ./src/index.js

ERROR in ./node_modules/react-bootstrap/esm/Modal.js
Module not found: Error: Can't resolve 'dom-helpers/canUseDOM' in 'C:\Work\walmart\sams_leadership_insights\samsleadershipinsights-frontend-dev\node_modules\react-bootstrap\esm'
 @ ./node_modules/react-bootstrap/esm/Modal.js 6:0-46 158:9-18
 @ ./node_modules/react-bootstrap/esm/index.js
 @ ./src/components/landingPage/LandingPage.js
 @ ./src/App.js
 @ ./src/index.js
 @ multi @babel/polyfill ./src/index.js

ERROR in ./node_modules/react-bootstrap/esm/OverlayTrigger.js
Module not found: Error: Can't resolve 'dom-helpers/contains' in 'C:\Work\walmart\sams_leadership_insights\samsleadershipinsights-frontend-dev\node_modules\react-bootstrap\esm'
 @ ./node_modules/react-bootstrap/esm/OverlayTrigger.js 6:0-44 167:45-53
 @ ./node_modules/react-bootstrap/esm/index.js
 @ ./src/components/landingPage/LandingPage.js
 @ ./src/App.js
 @ ./src/index.js
 @ multi @babel/polyfill ./src/index.js

ERROR in ./node_modules/react-bootstrap/esm/BootstrapModalManager.js
Module not found: Error: Can't resolve 'dom-helpers/css' in 'C:\Work\walmart\sams_leadership_insights\samsleadershipinsights-frontend-dev\node_modules\react-bootstrap\esm'
 @ ./node_modules/react-bootstrap/esm/BootstrapModalManager.js 2:0-34 31:6-9 31:55-58 41:8-11
 @ ./node_modules/react-bootstrap/esm/Modal.js
 @ ./node_modules/react-bootstrap/esm/index.js
 @ ./src/components/landingPage/LandingPage.js
 @ ./src/App.js
 @ ./src/index.js
 @ multi @babel/polyfill ./src/index.js

ERROR in ./node_modules/react-bootstrap/esm/Collapse.js
Module not found: Error: Can't resolve 'dom-helpers/css' in 'C:\Work\walmart\sams_leadership_insights\samsleadershipinsights-frontend-dev\node_modules\react-bootstrap\esm'
 @ ./node_modules/react-bootstrap/esm/Collapse.js 8:0-34 23:26-29 23:64-67
 @ ./node_modules/react-bootstrap/esm/AccordionCollapse.js
 @ ./node_modules/react-bootstrap/esm/Accordion.js
 @ ./node_modules/react-bootstrap/esm/index.js
 @ ./src/components/landingPage/LandingPage.js
 @ ./src/App.js
 @ ./src/index.js
 @ multi @babel/polyfill ./src/index.js

ERROR in ./node_modules/react-bootstrap/esm/Carousel.js
Module not found: Error: Can't resolve 'dom-helpers/css' in 'C:\Work\walmart\sams_leadership_insights\samsleadershipinsights-frontend-dev\node_modules\react-bootstrap\esm'
 @ ./node_modules/react-bootstrap/esm/Carousel.js 5:0-37 124:52-58
 @ ./node_modules/react-bootstrap/esm/index.js
 @ ./src/components/landingPage/LandingPage.js
 @ ./src/App.js
 @ ./src/index.js
 @ multi @babel/polyfill ./src/index.js

ERROR in ./node_modules/react-bootstrap/esm/BootstrapModalManager.js
Module not found: Error: Can't resolve 'dom-helpers/querySelectorAll' in 'C:\Work\walmart\sams_leadership_insights\samsleadershipinsights-frontend-dev\node_modules\react-bootstrap\esm'
 @ ./node_modules/react-bootstrap/esm/BootstrapModalManager.js 3:0-47 57:4-7 60:4-7 63:4-7 73:4-7 76:4-7 79:4-7
 @ ./node_modules/react-bootstrap/esm/Modal.js
 @ ./node_modules/react-bootstrap/esm/index.js
 @ ./src/components/landingPage/LandingPage.js
 @ ./src/App.js
 @ ./src/index.js
 @ multi @babel/polyfill ./src/index.js

ERROR in ./node_modules/react-bootstrap/esm/AbstractNav.js
Module not found: Error: Can't resolve 'dom-helpers/querySelectorAll' in 'C:\Work\walmart\sams_leadership_insights\samsleadershipinsights-frontend-dev\node_modules\react-bootstrap\esm'
 @ ./node_modules/react-bootstrap/esm/AbstractNav.js 3:0-47 41:16-19
 @ ./node_modules/react-bootstrap/esm/Nav.js
 @ ./node_modules/react-bootstrap/esm/Tabs.js
 @ ./node_modules/react-bootstrap/esm/index.js
 @ ./src/components/landingPage/LandingPage.js
 @ ./src/App.js
 @ ./src/index.js
 @ multi @babel/polyfill ./src/index.js

ERROR in ./node_modules/react-bootstrap/esm/Modal.js
Module not found: Error: Can't resolve 'dom-helpers/removeEventListener' in 'C:\Work\walmart\sams_leadership_insights\samsleadershipinsights-frontend-dev\node_modules\react-bootstrap\esm'
 @ ./node_modules/react-bootstrap/esm/Modal.js 8:0-66 130:6-25 154:4-23
 @ ./node_modules/react-bootstrap/esm/index.js
 @ ./src/components/landingPage/LandingPage.js
 @ ./src/App.js
 @ ./src/index.js
 @ multi @babel/polyfill ./src/index.js

ERROR in ./node_modules/react-bootstrap/esm/Modal.js
Module not found: Error: Can't resolve 'dom-helpers/scrollbarSize' in 'C:\Work\walmart\sams_leadership_insights\samsleadershipinsights-frontend-dev\node_modules\react-bootstrap\esm'
 @ ./node_modules/react-bootstrap/esm/Modal.js 9:0-57 164:70-86 165:69-85
 @ ./node_modules/react-bootstrap/esm/index.js
 @ ./src/components/landingPage/LandingPage.js
 @ ./src/App.js
 @ ./src/index.js
 @ multi @babel/polyfill ./src/index.js

ERROR in ./node_modules/react-bootstrap/esm/BootstrapModalManager.js
Module not found: Error: Can't resolve 'dom-helpers/scrollbarSize' in 'C:\Work\walmart\sams_leadership_insights\samsleadershipinsights-frontend-dev\node_modules\react-bootstrap\esm'
 @ ./node_modules/react-bootstrap/esm/BootstrapModalManager.js 4:0-57 56:15-31
 @ ./node_modules/react-bootstrap/esm/Modal.js
 @ ./node_modules/react-bootstrap/esm/index.js
 @ ./src/components/landingPage/LandingPage.js
 @ ./src/App.js
 @ ./src/index.js
 @ multi @babel/polyfill ./src/index.js

ERROR in ./node_modules/react-bootstrap/esm/Carousel.js
Module not found: Error: Can't resolve 'dom-helpers/transitionEnd' in 'C:\Work\walmart\sams_leadership_insights\samsleadershipinsights-frontend-dev\node_modules\react-bootstrap\esm'
 @ ./node_modules/react-bootstrap/esm/Carousel.js 6:0-54 229:15-28
 @ ./node_modules/react-bootstrap/esm/index.js
 @ ./src/components/landingPage/LandingPage.js
 @ ./src/App.js
 @ ./src/index.js
 @ multi @babel/polyfill ./src/index.js

ERROR in ./node_modules/react-bootstrap/esm/Collapse.js
Module not found: Error: Can't resolve 'dom-helpers/transitionEnd' in 'C:\Work\walmart\sams_leadership_insights\samsleadershipinsights-frontend-dev\node_modules\react-bootstrap\esm'
 @ ./node_modules/react-bootstrap/esm/Collapse.js 9:0-54 114:22-35
 @ ./node_modules/react-bootstrap/esm/AccordionCollapse.js
 @ ./node_modules/react-bootstrap/esm/Accordion.js
 @ ./node_modules/react-bootstrap/esm/index.js
 @ ./src/components/landingPage/LandingPage.js
 @ ./src/App.js
 @ ./src/index.js
 @ multi @babel/polyfill ./src/index.js

ERROR in ./node_modules/react-bootstrap/esm/Fade.js
Module not found: Error: Can't resolve 'dom-helpers/transitionEnd' in 'C:\Work\walmart\sams_leadership_insights\samsleadershipinsights-frontend-dev\node_modules\react-bootstrap\esm'
 @ ./node_modules/react-bootstrap/esm/Fade.js 7:0-54 30:20-33
 @ ./node_modules/react-bootstrap/esm/Toast.js
 @ ./node_modules/react-bootstrap/esm/index.js
 @ ./src/components/landingPage/LandingPage.js
 @ ./src/App.js
 @ ./src/index.js
 @ multi @babel/polyfill ./src/index.js

What is causing this error?

Adding Package.json

{
  "name": "trading",
  "version": "1.0.66",
  "description": "trading",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config webpack.config.js --env.NODE_ENV=development --disable-host-check",
    "build": "webpack --config webpack.config.js --env.NODE_ENV=production",
    "analyze": "npm start -- --env.analyze",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage --colors",
    "test:u": "echo \"updating snapshots...\" && jest -u --colors",
    "eslint": "eslint src/*.js src/**/*.js src/components/**/*.js --quiet --fix --ignore-pattern dist/",
    "pretty": "prettier --write src/*.js src/**/*.js"
  },
  "keywords": [
    "webpack",
    "react",
    "npm"
  ],
  "author": "Walmart",
  "license": "MIT",
  "devDependencies": {
    "@babel/cli": "^7.6.4",
    "@babel/core": "^7.6.4",
    "@babel/plugin-proposal-class-properties": "^7.3.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.2.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
    "@babel/plugin-proposal-throw-expressions": "^7.2.0",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-transform-async-to-generator": "^7.3.4",
    "@babel/plugin-transform-classes": "^7.3.4",
    "@babel/plugin-transform-modules-commonjs": "^7.2.0",
    "@babel/plugin-transform-spread": "^7.2.2",
    "@babel/preset-env": "^7.6.3",
    "@babel/preset-react": "^7.6.3",
    "babel-loader": "^8.0.5",
    "cache-loader": "^2.0.1",
    "clean-webpack-plugin": "^1.0.1",
    "css-loader": "^2.1.0",
    "dom-helpers": "^3.4.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "raw-loader": "^1.0.0",
    "react-hot-loader": "^4.12.15",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "terser-webpack-plugin": "^1.2.2",
    "thread-loader": "^2.1.2",
    "url-loader": "^1.1.2",
    "webpack": "^4.41.2",
    "webpack-bundle-analyzer": "^3.6.0",
    "webpack-cli": "^3.2.3"
  },
  "dependencies": {
    "@babel/polyfill": "^7.2.5",
    "axios": "^0.18.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.8.0",
    "bootstrap": "^4.3.1",
    "connected-react-router": "^6.4.0",
    "d3": "^5.12.0",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.15.1",
    "enzyme-to-json": "^3.3.5",
    "eslint": "^5.16.0",
    "eslint-config-standard-react": "^7.0.2",
    "eslint-plugin-extra-rules": "^0.0.0-development",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.16.0",
    "history": "^4.10.1",
    "husky": "^3.0.9",
    "jest": "^24.8.0",
    "jquery": "^3.4.1",
    "moment": "^2.24.0",
    "node-sass": "^4.13.1",
    "prettier": "^1.17.0",
    "pretty-quick": "^1.10.0",
    "react": "^16.10.2",
    "react-bootstrap": "^1.0.0-beta.14",
    "react-data-table-component": "^6.2.1",
    "react-dom": "^16.10.2",
    "react-google-charts": "^3.0.15",
    "react-icons": "^3.7.0",
    "react-loadable": "^5.5.0",
    "react-loader-spinner": "^3.1.5",
    "react-loading": "^2.0.3",
    "react-moment": "^0.9.6",
    "react-overlays": "^1.2.0",
    "react-redux": "^7.0.3",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.0.0",
    "react-router-redux": "^4.0.8",
    "react-svg-pan-zoom": "^3.7.1",
    "react-test-renderer": "^16.10.2",
    "redux": "^4.0.1",
    "redux-saga": "^1.0.2",
    "redux-thunk": "^2.3.0",
    "regenerator-runtime": "^0.13.1",
    "scheduler": "^0.16.1",
    "styled-components": "^4.4.0",
    "true-case-path": "^2.2.1",
    "types": "^0.1.1",
    "uncontrollable": "^6.2.3",
    "webpack-dev-server": "^3.9.0"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "husky": {
    "hooks": {
      "pre-commit": "npm eslint && pretty-quick --staged",
      "pre-push": "npm eslint"
    }
  }
}

you have followed all steps of react-bootstrap.github.io/getting-started/introduction ?? — Prakash Karena
– Prakash Karena, Commented Jan 17, 2020 at 9:59
@prakash karena: Yes.. I have followed all these steps.. the app was running previous day.. it stopped working today only — Sarath Sasi
– Sarath Sasi, Commented Jan 17, 2020 at 10:19

Bijay Sharma · Accepted Answer · 2021-03-29 02:45:00Z

5

uninstall react-bootstrap then install it again on v1.0.1 or v1.0.0

npm uninstall react-bootstrap

npm install [email protected]

answered Mar 29, 2021 at 2:45

Bijay Sharma

4615 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Getting error with react-bootstrap while executing npm start

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related