search

StephenGrider / ReactCasts

App by app code for Build Web Apps with React JS
586 stars 244 forks source link

Section 3 - Tooling - Target container is not a DOM element - ReactDOM #13

Closed jeremyvol closed 7 years ago

jeremyvol commented 8 years ago

Hello @StephenGrider and first of all, thank you for this great course

At the end of the gulp lesson, I had the "Target container is not a DOM element" error.

I could fix this by moving the <script src="main.js"></script> at the end of the <body> in index.html

also, I've kept the method ReactDOM.render() at the end of the app.jsx file. But this needs to require react-dom at the beginning of the file : var ReactDOM = require('react-dom');

but also to have it installed in the gulp modules: npm install --save react-dom

this cannot be allowed if you previously install react@0.13.3 which is an early stages react version which, i guess, includes react and react-dom altogether. So, long story short, if you have react@0.13.3 installed, uninstall it by using npm uninstall --save react

THEN install react AND react-dom npm install --save react react-dom

THEN require it in your app.jsx

var React = require('react');
var ReactDOM = require('react-dom');

THEN use the ReactDOM.render() method ReactDOM.render(element,document.querySelector('.target'));

Hope this can help you @StephenGrider to improve the lesson a bit and help you guys in the same situation I was into.

NB : the react references in the index.html are no longer necessary 

<script src="https://unpkg.com/react@15.3.1/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.1/dist/react-dom.js"></script>

can be removed

ghost commented 7 years ago

I also ran into an issue with ReactDOM and tried these same steps to fix the issue however I'm still getting an error message in the console saying 'ReactDOM.render is not a function)

jeremyvol commented 7 years ago

@Dysupes Can you double-check that you have required ReactDOM ?

var ReactDOM = require('react-dom');

ghost commented 7 years ago

Yep, triple-checked. Followed the instructions on here and I've used ReactDOM before. I was thinking it might be an issue with document.querySelector('container') instead of document.getElementById('container') however that does not seem to have an effect either.

ghost commented 7 years ago

var React = require('react'); var ReactDOM = require('react-dom'); var ThumbnailList = require('./thumbnail-list');

var options = { thumbnailData: [{ title: 'See Tutorials', number: 32, header: 'Learn React', description: 'React is a fantastic library for making fast, dynamic pages', imageUrl: 'https://tleunen.github.io/react-mdl/react.svg' },{ title: 'Show Courses', number: 25, header: 'Learn Gulp', description: 'Gulp will speed up your development workflow.', imageUrl: 'https://avatars0.githubusercontent.com/u/6200624?v=3&s=400' }] };

var element = React.createElement(ThumbnailList, options);

ReactDOM.render(element, document.querySelector('.container'));

jeremyvol commented 7 years ago

Nothing wrong in your code that I can see. can you copy-paste your package.json ?

ghost commented 7 years ago

{ "name": "thumbnail-gulp", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "browserify": "^13.1.0", "gulp": "^3.9.1", "gulp-concat": "^2.6.0", "gulp-react": "^3.1.0", "gulp-util": "^3.0.7", "react": "^0.13.3", "react-dom": "^15.3.2", "reactify": "^1.1.1", "vinyl-source-stream": "^1.1.0", "watchify": "^3.7.0" } }

ghost commented 7 years ago

I just changed the version of react to the proper version and am getting these errors now:

warning.js:36Warning: React.spread is deprecated and should not be used. Use Object.assign directly or another helper function with similar semantics. You may be seeing this warning due to your compiler. See https://fb.me/react-spread-deprecation for more details.printWarning @ warning.js:36warning @ warning.js:60spread @ React.js:44(anonymous function) @ thumbnail-list.jsx:7exports_render @ thumbnail-list.jsx:6(anonymous function) @ ReactCompositeComponent.js:793measureLifeCyclePerf @ ReactCompositeComponent.js:74_renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js:792_renderValidatedComponent @ ReactCompositeComponent.js:819performInitialMount @ ReactCompositeComponent.js:361mountComponent @ ReactCompositeComponent.js:257mountComponent @ ReactReconciler.js:47performInitialMount @ ReactCompositeComponent.js:370mountComponent @ ReactCompositeComponent.js:257mountComponent @ ReactReconciler.js:47mountComponentIntoNode @ ReactMount.js:105perform @ Transaction.js:138batchedMountComponentIntoNode @ ReactMount.js:127perform @ Transaction.js:138batchedUpdates @ ReactDefaultBatchingStrategy.js:63batchedUpdates @ ReactUpdates.js:98_renderNewRootComponent @ ReactMount.js:321_renderSubtreeIntoContainer @ ReactMount.js:402render @ ReactMount.js:423/home/dysupes/ReactJS_Firebase/thumbnail-gulp/src/app.jsx../thumbnail-list @ app.jsx:27s @ _prelude.js:1e @ _prelude.js:1(anonymous function) @ _prelude.js:1

invariant.js:38Uncaught Invariant Violation: exports.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.invariant @ invariant.js:38_renderValidatedComponent @ ReactCompositeComponent.js:828performInitialMount @ ReactCompositeComponent.js:361mountComponent @ ReactCompositeComponent.js:257mountComponent @ ReactReconciler.js:47performInitialMount @ ReactCompositeComponent.js:370mountComponent @ ReactCompositeComponent.js:257mountComponent @ ReactReconciler.js:47mountComponentIntoNode @ ReactMount.js:105perform @ Transaction.js:138batchedMountComponentIntoNode @ ReactMount.js:127perform @ Transaction.js:138batchedUpdates @ ReactDefaultBatchingStrategy.js:63batchedUpdates @ ReactUpdates.js:98_renderNewRootComponent @ ReactMount.js:321_renderSubtreeIntoContainer @ ReactMount.js:402render @ ReactMount.js:423/home/dysupes/ReactJS_Firebase/thumbnail-gulp/src/app.jsx../thumbnail-list @ app.jsx:27s @ _prelude.js:1e @ _prelude.js:1(anonymous function) @ _prelude.js:1

jeremyvol commented 7 years ago

your react and react-dom versions don't match. You should have "react": "^15.3.2", "react-dom": "^15.3.2",

instead of "react": "^0.13.3", "react-dom": "^15.3.2",

so i guess you haven't uninstalled react by using npm uninstall --save react or maybe just use npm uninstall react

and check your node-module folder and package.json file to ensure that react and react-dom have properly disappeared, before reinstall by using npm install --save react react-dom

and then check again node-modules and package.json

However I advice you, for your next questions, to open a topic directly in the lesson on udemy, this is way more active than here and most of the issues/questions have been answered already.

click on the "Browse Q&A" underneath the video and you'll see the topics appearing on the RHS

ghost commented 7 years ago

Is it perhaps the method of exporting the modules?

ghost commented 7 years ago

Great, thanks!

jeremyvol commented 7 years ago

Remember : uninstall react AND react-dom FIRST maybe my previous instructions were not clear npm uninstall --save react react-dom

however i'm not sure of the --save