Giters

meteor / simple-todos-react

A repository that follows the React tutorial step-by-step

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Tutorial not working

brunobl opened this issue · comments

commented

Tutorial doesn't work from this page:
https://www.meteor.com/tutorials/react/components

Compiles and start fine, but
Todo List
This is task 1
This is task 2
This is task 3

doesn't appear.

HTML/CSS code is displayed, but render function isn't called.

commented

From Stack overflow, this has worked:
Try removing Blaze
meteor remove blaze-html-templates
And add static-html
meteor add static-html
This should be added in the tutorial immediately after creating the project (I think it was at some point when I tried it the first time).
Question: is there a React project skeleton to use with meteor create that would have this by default?

commented

The tutorial tells you to remove a line of code that you absolutly need in order to have the expected result.
You need to keep import './main.html'; in main.js.

This needs to be fixed in the tutorial.

commented

In fact, keeping import './main.html' breaks the page- you can see this in branch Exercise 1 compared to the fixed branch, and the same problem happens whether the files are .js (as in this branch) or .jsx.

commented

The current tutorial code is working fine now. However the remove/add blaze step from madalinignisca is required in order for the react code to work properly.

commented

I agree with PhillippeChab I could not get mine to work until I put import './main.html' back in main.js

commented

Spent hours on this tonight. Here's what I eventually did that fixed it

  1. I removed blaze meteor remove blaze-html-templates
  2. Add static html meteor add static-html. Not doing this results in Uncaught Error: Target container is not a DOM element.
  3. Change Task.jsx so that it becomes and in App.js change the import statement to import Task from './Task.jsx';.
import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class Task extends Component {
 render() {
   return (
     <li>{this.props.task.text}</li>
   );
 }
}

Task.propTypes = {
    task: PropTypes.object.isRequired,
};
commented

I don't know if someone from Meteor is reading github issues or caring about fixing issues... How do they hope to attract customers if tutorials don't work? This doesn't look good for Meteor's future...

commented

I don't know if someone from Meteor is reading github issues or caring about fixing issues... How do they hope to attract customers if tutorials don't work? This doesn't look good for Meteor's future...

1000% percent, new to this and was about to give up when trying out their OFFICIAL tutorial didn't work. Thankful that I found this after HOURS spent pulling my hair. It's baffling. THANK for the responses here, you've helped me but I am not very confident I won't encounter VERY frustrating issues ahead if even the 101 into tutorial doesn't work. Again shout out to all the helpful answers in this thread!

BTW the way for me the fix was:
meteor remove blaze-html-templates
meteor add static-html

commented

Hi folks, sorry for the long delay on this.

I spent some time today updating the React tutorial. Although the updates involved some significant changes to this repository, you might not notice the changes just by running the simple-todos-react app, since it looks/works the same as before.

If you would like to give the new tutorial a look, I would be grateful for any feedback. We will probably push these changes to meteor.com on Monday, once my teammates have had a chance to review everything.

In the meantime, the best way to review the new content is to run the following commands:

git clone git@github.com:meteor/tutorial-viewer.git
cd tutorial-viewer
git submodule update --init --recursive
meteor npm install
meteor

The tutorial-viewer app doesn't have access to the same CSS that we use on https://meteor.com, so it's not styled in the same way, but you can compare the content of the following two URLs:

Note in particular the new In a hurry? section and the Replace blaze-html-templates with static-html section.

Again, I realize these updates were a long time coming, and I apologize to everyone who wasted time due to these preventable points of confusion.

commented

I'm having issues with this tutorial too. If an element is a 'React.Component' then it does not render. If it is a functional component, then it's good to go. Has anyone else run into this or am I just stupid? lol

I can't even get Hello world. lol

main.js

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import { App } from '/imports/ui/App';

Meteor.startup(() => {
  render(<App/>, document.getElementById('react-target'));
});

app.js

import React from 'react';

export default class App extends React.Component {
  render() {
    return (
      <h1>Hello World</h1>
    );
  }
}

modules.js?hash=ed6a1ae6daf54352bac39a3c8903e629959d4bae:27555 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at createFiberFromTypeAndProps (modules.js?hash=ed6a1ae6daf54352bac39a3c8903e629959d4bae:27555)
    at createFiberFromElement (modules.js?hash=ed6a1ae6daf54352bac39a3c8903e629959d4bae:27578)
    at reconcileSingleElement (modules.js?hash=ed6a1ae6daf54352bac39a3c8903e629959d4bae:17823)
    at reconcileChildFibers (modules.js?hash=ed6a1ae6daf54352bac39a3c8903e629959d4bae:17883)
    at reconcileChildren (modules.js?hash=ed6a1ae6daf54352bac39a3c8903e629959d4bae:20359)
    at updateHostRoot (modules.js?hash=ed6a1ae6daf54352bac39a3c8903e629959d4bae:20848)
    at beginWork (modules.js?hash=ed6a1ae6daf54352bac39a3c8903e629959d4bae:22214)
    at HTMLUnknownElement.callCallback (modules.js?hash=ed6a1ae6daf54352bac39a3c8903e629959d4bae:3778)
    at Object.invokeGuardedCallbackDev (modules.js?hash=ed6a1ae6daf54352bac39a3c8903e629959d4bae:3827)
    at invokeGuardedCallback (modules.js?hash=ed6a1ae6daf54352bac39a3c8903e629959d4bae:3882)
commented

@adamUpchurch I found out the issue. its the import line in your main.js import { App } from '/imports/ui/App'; change it to import App from '/imports/ui/App';. You're importing a "name export" instead of a default export.

For more info on name/default export