'injection' of undefined issue.

sudhiryadav commented 6 years ago

The problem I am working on a 8 month old project, I did an update to the package file and then i started to get this issue when i use react-scripts start.

Error on console Uncaught TypeError: Cannot read property 'injection' of undefined at Object../node_modules/react-native-web/dist/exports/createElement/index.js (index.js:20) at webpack_require__ (bootstrap b90fa7f5720f81fc70c1:678) at fn (bootstrap b90fa7f5720f81fc70c1:88) at Object../node_modules/react-native-web/dist/exports/View/index.js (index.js:1) at webpack_require (bootstrap b90fa7f5720f81fc70c1:678) at fn (bootstrap b90fa7f5720f81fc70c1:88) at Object../node_modules/react-native-web/dist/modules/UnimplementedView/index.js (index.js:1) at __webpack_require (bootstrap b90fa7f5720f81fc70c1:678) at fn (bootstrap b90fa7f5720f81fc70c1:88) at Object../node_modules/react-native-web/dist/index.js (index.js:1) at webpack_require (bootstrap b90fa7f5720f81fc70c1:678) at fn (bootstrap b90fa7f5720f81fc70c1:88) at Object../src/app/app.js (index.js:621) at webpack_require (bootstrap b90fa7f5720f81fc70c1:678) at fn (bootstrap b90fa7f5720f81fc70c1:88) at Object../src/index.js (index.js:1) at webpack_require (bootstrap b90fa7f5720f81fc70c1:678) at fn (bootstrap b90fa7f5720f81fc70c1:88) at Object.0 (index.js:1) at webpack_require (bootstrap b90fa7f5720f81fc70c1:678) at bootstrap b90fa7f5720f81fc70c1:724 at bootstrap b90fa7f5720f81fc70c1:724

Error on browser displayed

How to reproduce Here is the package file. "dependencies": { "babel-polyfill": "^6.26.0", "class-autobind": "^0.1.4", "jquery": "^3.3.1", "lodash": "^4.17.10", "react": "^16.5.0", "react-art": "^16.5.0", "react-country-region-selector": "^1.2.3", "react-datepicker": "^1.2.2", "react-dom": "^16.5.0", "react-entypo": "^1.3.0", "react-google-maps": "^9.4.5", "react-native-web": "0.8.10", "react-navigation": "^2.13.0", "react-redux": "^5.0.7", "redux": "^4.0.0" }, "devDependencies": { "react-scripts": "1.1.5" },

Earlier i was able to start the project but now spent the entire day finding but no luck. Also earlier i didn't had to include react-art which i had to now.

necolas commented 6 years ago

See #1096. React 16.5 accidentally broke RNW. Use React 16.4 for now

necolas commented 6 years ago

Also you can read the RNW version release notes to understand what changes have been introduced since 8 months ago

sudhiryadav commented 6 years ago

Thanks @necolas, i had a hint from #1096 but then I was questioning how to get that fix which was merged. Anyway i will work with react 16.4 unless this is included in the stable release. Thanks for the co-operation

priya-unacademy commented 6 years ago

@necolas This is happening for me with react 16.4 as well ! react-native-web is 0.8.9. Any help ?

necolas commented 6 years ago

No help without an example

aecorredor commented 6 years ago

Same thing is happening on my project on react 16.4

Here's my package.json:

{
  "dependencies": {
    "ajv": "^6.4.0",
    "axios": "^0.18.0",
    "classnames": "^2.2.5",
    "deep-freeze": "0.0.1",
    "fuse.js": "^3.2.0",
    "js-cookie": "^2.2.0",
    "lodash": "^4.17.5",
    "moment": "^2.22.1",
    "node-sass-chokidar": "^1.2.2",
    "npm-run-all": "^4.1.2",
    "p-queue": "^2.4.0",
    "postal": "^2.0.5",
    "prop-types": "^15.6.1",
    "react": "^16.3.1",
    "react-art": "^16.4.1",
    "react-bulma-components": "^1.3.1",
    "react-circular-progressbar": "^0.8.0",
    "react-dom": "^16.3.1",
    "react-lazyload": "^2.3.0",
    "react-modal": "^3.4.4",
    "react-native-device-info": "^0.21.4",
    "react-native-web": "^0.8.3",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.1.4",
    "react-slick": "^0.23.1",
    "react-toastify": "^4.0.0-rc.4",
    "redux": "^3.7.2",
    "redux-mock-store": "^1.5.1",
    "redux-thunk": "^2.2.0",
    "video-react": "^0.10.4",
    "video.js": "^6.9.0",
    "videojs-contrib-hls": "^5.14.1"
  },
  "devDependencies": {
    "archiver": "^1.3.0",
    "babel-cli": "^6.26.0",
    "babel-polyfill": "^6.26.0",
    "fs-extra": "^2.0.0",
    "fstream": "^1.0.10",
    "pre-commit": "^1.2.2",
    "replace": "^0.3.0",
    "tar": "^2.2.1",
    "url-polyfill": "^1.0.14"
  },
}

and my package-lock.json's relevant parts:

    "react-native-web": {
      "version": "0.8.4",
      "requires": {
        "array-find-index": "^1.0.2",
        "create-react-class": "^15.6.2",
        "debounce": "^1.1.0",
        "deep-assign": "^2.0.0",
        "fbjs": "^0.8.16",
        "hyphenate-style-name": "^1.0.2",
        "inline-style-prefixer": "^4.0.2",
        "normalize-css-color": "^1.0.2",
        "prop-types": "^15.6.0",
        "react-timer-mixin": "^0.13.3"
      }
    },
"react-dom": {
      "version": "16.4.1",
      "requires": {
        "fbjs": "^0.8.16",
        "loose-envify": "^1.1.0",
        "object-assign": "^4.1.1",
        "prop-types": "^15.6.0"
      }
    },
    "react": {
      "version": "16.4.1",
      "requires": {
        "fbjs": "^0.8.16",
        "loose-envify": "^1.1.0",
        "object-assign": "^4.1.1",
        "prop-types": "^15.6.0"
      }
    },

necolas commented 6 years ago

If you can't provide a useful stack trace or an example of the problem running in codesandbox, there's nothing I can do to help. And if you can do either of those things please open a new issue

aecorredor commented 6 years ago

@necolas gotcha, will try to get a more detailed stack trace. It's basically just crashing on startup because it can't find EventPluginHub. Either way I'll create a new issue if anything. Thanks for the help.

jaredloson commented 6 years ago

Here's my stack trace if it's helpful. I'm getting the same error using React 16.3 and 16.4.

×
TypeError: Cannot read property 'injection' of undefined
./node_modules/react-native-web/dist/exports/createElement/index.js
node_modules/react-native-web/dist/exports/createElement/index.js:20
  17 | var EventPluginHub = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.EventPluginHub;
  18 | 
  19 | 
> 20 | EventPluginHub.injection.injectEventPluginsByName({
  21 |   ResponderEventPlugin: ResponderEventPlugin
  22 | });
  23 | 
View compiled
__webpack_require__
/Users/losonj/dermalogica-the-book/frontend/webpack/bootstrap 931480ef6693ad1e5eed:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
fn
/Users/losonj/dermalogica-the-book/frontend/webpack/bootstrap 931480ef6693ad1e5eed:88
  85 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 |      hotCurrentParents = [];
  87 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {
View compiled
./node_modules/react-native-web/dist/exports/View/index.js
node_modules/react-native-web/dist/exports/View/index.js:1
> 1 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  2 | 
  3 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
  4 | 
View compiled
__webpack_require__
/Users/losonj/dermalogica-the-book/frontend/webpack/bootstrap 931480ef6693ad1e5eed:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
fn
/Users/losonj/dermalogica-the-book/frontend/webpack/bootstrap 931480ef6693ad1e5eed:88
  85 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 |      hotCurrentParents = [];
  87 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {
View compiled
./node_modules/react-native-web/dist/modules/UnimplementedView/index.js
node_modules/react-native-web/dist/modules/UnimplementedView/index.js:1
> 1 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  2 | 
  3 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
  4 | 
View compiled
__webpack_require__
/Users/losonj/dermalogica-the-book/frontend/webpack/bootstrap 931480ef6693ad1e5eed:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
fn
/Users/losonj/dermalogica-the-book/frontend/webpack/bootstrap 931480ef6693ad1e5eed:88
  85 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 |      hotCurrentParents = [];
  87 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {
View compiled
./node_modules/react-native-web/dist/index.js
node_modules/react-native-web/dist/index.js:1
> 1 | import UnimplementedView from './modules/UnimplementedView';
  2 | 
  3 | import createElement from './exports/createElement';
  4 | import findNodeHandle from './exports/findNodeHandle';
View compiled
__webpack_require__
/Users/losonj/dermalogica-the-book/frontend/webpack/bootstrap 931480ef6693ad1e5eed:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
fn
/Users/losonj/dermalogica-the-book/frontend/webpack/bootstrap 931480ef6693ad1e5eed:88
  85 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 |      hotCurrentParents = [];
  87 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {
View compiled
./src/components/LayoutWrap/LayoutWrap.js
http://localhost:3000/static/js/bundle.js:90203:71
__webpack_require__
/Users/losonj/dermalogica-the-book/frontend/webpack/bootstrap 931480ef6693ad1e5eed:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
fn
/Users/losonj/dermalogica-the-book/frontend/webpack/bootstrap 931480ef6693ad1e5eed:88
  85 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 |      hotCurrentParents = [];
  87 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {
View compiled
./src/index.js
http://localhost:3000/static/js/bundle.js:95571:92
__webpack_require__
/Users/losonj/dermalogica-the-book/frontend/webpack/bootstrap 931480ef6693ad1e5eed:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
fn
/Users/losonj/dermalogica-the-book/frontend/webpack/bootstrap 931480ef6693ad1e5eed:88
  85 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  86 |      hotCurrentParents = [];
  87 |  }
> 88 |  return __webpack_require__(request);
  89 | };
  90 | var ObjectFactory = function ObjectFactory(name) {
  91 |  return {
View compiled
0
http://localhost:3000/static/js/bundle.js:96326:18
__webpack_require__
/Users/losonj/dermalogica-the-book/frontend/webpack/bootstrap 931480ef6693ad1e5eed:678
  675 | };
  676 | 
  677 | // Execute the module function
> 678 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  679 | 
  680 | // Flag the module as loaded
  681 | module.l = true;
View compiled
./node_modules/ansi-regex/index.js.module.exports
/Users/losonj/dermalogica-the-book/frontend/webpack/bootstrap 931480ef6693ad1e5eed:724
  721 | __webpack_require__.h = function() { return hotCurrentHash; };
  722 | 
  723 | // Load entry module and return exports
> 724 | return hotCreateRequire(0)(__webpack_require__.s = 0);
  725 | 
  726 | 
  727 | 
View compiled
(anonymous function)

empy92 commented 6 years ago

I have the same problem. I followed this startup guide: https://medium.com/@yannickdot/write-once-run-anywhere-with-create-react-native-app-and-react-native-web-ad40db63eed0

I tried switch to react 16.4 but without effect

tafarry commented 6 years ago

downgrading react, react-art and react-dom to 16.3.1 worked out for me

empy92 commented 6 years ago

Confirm @karache downgrading to 16.3.1 worked for me too

necolas commented 6 years ago

RNW 0.8 and React 16.4 are compatible. You might have some bundler cache issues

gagangoku commented 5 years ago

@karache 💯

This is what worked for me. Btw, do rm -rf node_modules/ and npm install again to clear all caches.

{
  "name": "native_plus_web",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "prepare": "patch-package",
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "run-web": "./node_modules/.bin/webpack-dev-server -d --config ./web/webpack.config.js --inline --hot --colors",
    "run-ios": "react-native run-ios",
    "run-android": "react-native run-android"
  },
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-plugin-react-native-web": "^0.4.0",
    "file-loader": "^1.1.6",
    "react": "16.3.1",
    "react-dom": "16.3.1",
    "react-art": "16.3.1",
    "react-native": "^0.53.0",
    "react-native-modal-selector": "^0.0.24",
    "react-native-web": "^0.8.9",
    "react-navigation": "^1.0.3"
  },
  "devDependencies": {
    "babel-jest": "22.2.2",
    "babel-loader": "^7.1.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-react-native": "4.0.0",
    "jest": "22.3.0",
    "patch-package": "^5.1.1",
    "postinstall-prepare": "^1.0.1",
    "react-test-renderer": "16.2.0",
    "url-loader": "^0.6.2",
    "webpack": "^3.11.0",
    "webpack-dev-server": "^2.11.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

necolas / react-native-web

'injection' of undefined issue. #1100