React App Error: Cannot find module 'react-error-overlay/middleware' - reactjs

Question

This is very frustrating. I've been dealing with this issue since yesterday morning. I have a React application I have not started up in over a year. This application ran perfectly last time I started it up. But I want to work on it locally, and using the exact same package.json when it ran just fine a year ago, is failed in the browser with the following error message:
TypeError: Cannot read property 'ReactCurrentOwner' of undefined
Since the package.json was a year old, today I ran npm update and when I try and run the program I receive the following error:
Error: Cannot find module 'react-error-overlay/middleware'
Old package.json
{
"name": "mazzo-react-test",
"version": "0.1.0",
"private": true,
"dependencies": {
"auth0-lock": "^10.24.3",
"autoprefixer": "7.1.2",
"babel-core": "6.25.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.1",
"babel-preset-react-app": "^3.1.2",
"babel-runtime": "6.23.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "^1.1.3",
"css-loader": "0.28.4",
"dotenv": "4.0.0",
"eslint": "4.4.1",
"eslint-config-react-app": "^2.1.0",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.35.0",
"eslint-plugin-import": "2.7.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.1.0",
"extract-text-webpack-plugin": "3.0.0",
"file-loader": "0.11.2",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"jest": "20.0.4",
"konva": "^1.7.6",
"material-ui": "^0.18.7",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.6",
"promise": "8.0.1",
"react": "^15.6.2",
"react-dev-utils": "^3.1.3",
"react-dom": "^15.6.2",
"react-error-overlay": "^1.0.10",
"react-konva": "^1.7.16",
"react-relay": "0.10.0",
"react-relay-network-layer": "1.3.9",
"react-router": "3.0.2",
"react-router-relay": "0.13.5",
"react-tap-event-plugin": "^2.0.1",
"relay-commit-mutation-promise": "^1.0.1",
"style-loader": "0.18.2",
"styled-components": "^2.4.1",
"sw-precache-webpack-plugin": "0.11.4",
"url-loader": "0.5.9",
"webpack": "3.5.1",
"webpack-dev-server": "2.7.1",
"webpack-manifest-plugin": "1.2.1",
"whatwg-fetch": "2.0.3"
},
"scripts": {
"start": "node scripts/start.js",
"build": "GRAPHQL_ENDPOINT=https://api.graph.cool/relay/v1/cj63i9kajpzhw0153segab1wa node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.js?(x)",
"<rootDir>/src/**/?(*.)(spec|test).js?(x)"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"js",
"json",
"web.jsx",
"jsx",
"node"
]
},
"babel": {
"plugins": [
"react-relay"
],
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": "react-app"
},
"devDependencies": {
"babel-plugin-react-relay": "^0.10.0"
}
}
New or updated package.json
{
"name": "mazzo-react-test",
"version": "0.1.0",
"private": true,
"dependencies": {
"auth0-lock": "^11.14.0",
"autoprefixer": "9.4.7",
"babel-core": "6.26.3",
"babel-eslint": "10.0.1",
"babel-jest": "24.1.0",
"babel-loader": "8.0.5",
"babel-preset-react-app": "^7.0.1",
"babel-runtime": "6.26.0",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"chalk": "^2.4.2",
"css-loader": "2.1.0",
"dotenv": "6.2.0",
"eslint": "5.14.0",
"eslint-config-react-app": "^3.0.7",
"eslint-loader": "2.1.2",
"eslint-plugin-flowtype": "3.4.2",
"eslint-plugin-import": "2.16.0",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-react": "7.12.4",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "3.0.1",
"fs-extra": "7.0.1",
"html-webpack-plugin": "3.2.0",
"jest": "24.1.0",
"konva": "^2.6.0",
"material-ui": "^0.20.2",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"promise": "8.0.2",
"react": "^16.8.2",
"react-dev-utils": "^7.0.3",
"react-dom": "^16.8.2",
"react-error-overlay": "^5.1.3",
"react-konva": "^16.8.2-0",
"react-relay": "2.0.0",
"react-relay-network-layer": "2.2.1",
"react-router": "4.3.1",
"react-router-relay": "0.14.0",
"react-tap-event-plugin": "^3.0.3",
"relay-commit-mutation-promise": "^1.0.0",
"style-loader": "0.23.1",
"styled-components": "^4.1.3",
"sw-precache-webpack-plugin": "0.11.5",
"url-loader": "1.1.2",
"webpack": "4.29.5",
"webpack-dev-server": "3.1.14",
"webpack-manifest-plugin": "2.0.4",
"whatwg-fetch": "3.0.0"
},
"scripts": {
"start": "node scripts/start.js",
"build": "GRAPHQL_ENDPOINT=https://api.graph.cool/relay/v1/cj63i9kajpzhw0153segab1wa node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.js?(x)",
"<rootDir>/src/**/?(*.)(spec|test).js?(x)"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"js",
"json",
"web.jsx",
"jsx",
"node"
]
},
"babel": {
"plugins": [
"react-relay"
],
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": "react-app"
},
"devDependencies": {
"babel-plugin-react-relay": "^0.10.0"
}
}
Why?

Answer 1

So what you're running into is the way that npm modules work - this issue that you're having isn't exclusive to react. We can't be expected to solve this for you - but I can try to point you in the right direction.
I'll use the dependency in your package.json as an example, the line:
"react-error-overlay": "^1.0.10" has a caret (^) next to the version number.
This means when you run npm install in most cases, or npm update then npm will go grab the most recent version of that package, above that version number.
If you compare the two different package.json files in your post you will notice that there are multiple major package versions skipped for quite a few of your dependencies. If you look up semantic versioning you'll find that a major version bump usually is due to a breaking change in the module.
E.g:
Old: "react-error-overlay": "^1.0.10"
New: "react-error-overlay": "^5.1.3"
In here you are jumping from major version 1.x.x to 5.x.x. That is over 4 breaking changes for just this module alone.
Basically, this means that the module does not work in the same way it did before. If you project worked a year or so ago - and you ran npm update - it most likely will fail now as you're pulling in new major package versions.
If you just want your project to work as it did before, here is what I recommend:
Take the original version of your package.json and remove the ^ carets in the version numbers.
Then clear out your node_modules folder in your project.
Then run npm install.
This should pull in the module versions very similar to what you were working with before. Try and see if it runs then. If it does, update your dependencies individually from there - and find which major version bumps cause your project to break.
Also:
As for the typeError you are getting - it stems from react-konva as noted in this issue thread:
https://github.com/konvajs/react-konva/issues/147#issuecomment-346217504
react-konva above version 1.1.6 is for react v16 and above
Target react v15 by using the version:
"react-konva": "1.1.6"