Getting invalid react type error

Questions
1

Hello :),

I followed the react tutorial on framework7 and I always getting this strange error as soon as I want to use one of your react components.

The Error:

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Here my react version and the framework7 version which I use:

 "dependencies": {
    "@babel/runtime": "^7.0.0-beta.51",
    "framework7": "^3.0.1",
    "framework7-react": "^3.0.1",
    "meteor-node-stubs": "^0.4.1",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-meteor-data": "^0.2.11",
    "react-router-dom": "^4.3.1"
  },

Here the code:

import React, { Component } from 'react';
import {Page} from 'framework7-react';
 
// App component - represents the whole app
export default class App extends Component { 
  render() {

    let tPage = <Page></Page>;
    console.log(tPage);
  return (tPage); //("Hello World :).");
  }
}

Same when I am using your sample code from the tutorial:

// my-page.jsx

import React from 'react';

// Import F7 components you need
import { Page, Navbar, List, ListItem } from 'framework7-react';

```
export default () => (
  <Page>
    <Navbar title="My Page" />
    <List>
      <ListItem title="Item 1" />
      <ListItem title="Item 2" />
    </List>
  </Page>
);
```

Any idea what went wrong? Thanks in advance :).

2

I found out something interesting. I changed my code for testing purposes. Now I create two react elements, the first one is a framework7 react element, the second one a custom created react element of my own. When I print both into my browsers console I noticed, that the type of both elements differs. The Framework7 elements type is undefined. So I guess the import is not working well. What do I have to change in order to use it? Your example code of the tutorial shows no other ways of importing the modules.

import React, { Component } from 'react';
import ReactDOM from 'react-dom'

import Framework7React from 'framework7';
import {Framework7App} from 'framework7-react';
import Task from './Task';

// App component - represents the whole app
export default class App extends Component { 
render() {
    let t = <Framework7App routes={null} themeType="ios"></Framework7App>;
    let t2 = <Task></Task>;
    console.log(t);
    console.log(t2);
    return("");

    //return ("Hello World :).");
}
}

image
image.png685×797 41.1 KB

I found some other example project in the internet where they used framework7-react and everything worked well there but it was outdated, versions was framework7 1.5 and framework7-react 0.9. Here the github link: https://github.com/framework7io/framework7-react-app-template.git

I also noticed that there is no react template in your template section (or am I too stupid to find it :sweat_smile: ?)

3

I am quite sure it is about the import. When I log the component imports directly I got also a undefined. What is wrong with the import? I do it the same way as described in your tutorial.

image

import React, { Component } from 'react';
import ReactDOM from 'react-dom'

import framework7 from 'framework7';
import Framework7React from 'framework7-react';

//var Searchbar = require('framework7-react/components/searchbar.js');
import { Searchbar } from 'framework7-react';//'framework7-react/components/searchbar.js';
//import {Framework7App} from 'framework7-react';
import Task from './Task';

// App component - represents the whole app
export default class App extends Component { 
    render() {
        let t = <Searchbar></Searchbar>;
        let t2 = <Task></Task>;
        console.log(Searchbar);
        console.log(Task);
        console.log(t);
        console.log(t2);
        return("");

        //return ("Hello World :).");
    }
}
4

Pls improve your tutorials. There also mistakes like variable declarations that does not exist. For example f7params written in small letters and f7Params with a uppercase P.

Other problems are occuring with the imports that are not working with the react tutorial.