Using react-router and createContainer

help
1

I’m trying to use react-router to manage the application’s routes. It does work when I import a normal page, however it doesn’t work when I try to import a page using createContainer. It only shows a blank page with no errors. What am I missing here?

routes.jsx

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';

import { Page } from  '../../ui/pages/Page.js';
import { TestContainer } from '../../ui/containers/TestContainer.js';

Meteor.startup( () => {  
  render(
    <Router history={ browserHistory }>
      <Route path="/" component={ App }>
        <Route path="/page" component={ Page } />         //that works
        <Route path="/test" component={ TestContainer } />//that does not work
      </Route>
       <Route path="*" component={ NotFound } />
    </Router>,
    document.getElementById( 'render-target' )
  );
});

TestContainer.js

import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';
import Test from '../pages/test.jsx';

export default TestContainer = createContainer(({ params }) => {	
}, Test);

test.jsx

import React, { Component, PropTypes } from 'react';

export class Test extends Component { 
	render() {
		return (<h1>Test</h1>)
	}
}

Page.jsx

import React from 'react';

export const Page = () => <h3>Example Page</h3>;
2

change export class Test extends ... to export default class Test extends ...

3

When you are importing in your routes.jsx, remove the brackets from around the TestContainer import because you have it exported as default in TestContainer.js.

4

I tried it and it didn’t change anything. Thanks anyway.

5

When I tried this, the following error is presented:

Uncaught TypeError: Cannot convert undefined or null to object

6

Check all the exports and imports. If you export default you do not need the brackets when you import. If you don’t export default you do need the brackets for it when you import. Looks like your Test component is a regular export, but you are importing it without the brackets.

2 Likes
7

Agreed, the code snippet has a couple of import/export statement errors. These all need to be fixed.

8

Fix all of your import/export errors. Don’t use braces for export default. You’re getting this error because the arrow function () => {} does not actually return an object. The syntax is a bit confusing, I agree. The braces represent a code block, not an object. Instead, you should write () => {return {}}, to guarantee that you’re returning a valid object from createContainer.

export default TestContainer = createContainer(({ params }) => {return {}}, Test);
//or
export default TestContainer = createContainer(({ params }) => new Object, Test);
2 Likes
9

@townmulti and @streemo… thank you guys!

I lost 2 days because of this problem and thanks to you I am back on track again.

Just for the record, I will repeat what @townmulti said:

1 - If you export default you do not need the brackets when you import.
2 - If you don’t export default you do need the brackets for it when you import.

What I had to change:

routes.jsx

import TestContainer from '../../ui/containers/TestContainer.js'; // removed the brackets

TestContainer.js

import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';
import {Test} from '../pages/test.jsx'; // inserted the brackets

export default TestContainer = createContainer(({ params }) => {  // I had to fix this
	return {}}, Test);
1 Like