React-360: Can't render an entity

[eyaleizenberg]

Description

I am following the docs and trying to add my first entity from an obj + mtl file but getting the following errors:

index.bundle?platform=vr&dev=true:12715 Warning: React.createElement: 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.

Check your code at index.js:36.
    in Hello360 (at renderApplication.js:35)
    in RCTView (at View.vr.js:543)
    in View (at AppContainer.js:102)
    in RCTView (at View.vr.js:543)
    in View (at AppContainer.js:126)
    in AppContainer (at renderApplication.js:34)
reactConsoleErrorHandler @ index.bundle?platform=vr&dev=true:12715
printWarning @ index.bundle?platform=vr&dev=true:2953
warning @ index.bundle?platform=vr&dev=true:2974
createElement @ index.bundle?platform=vr&dev=true:2551
render @ index.bundle?platform=vr&dev=true:1386
proxiedMethod @ index.bundle?platform=vr&dev=true:5450
finishClassComponent @ index.bundle?platform=vr&dev=true:9445
updateClassComponent @ index.bundle?platform=vr&dev=true:9438
beginWork @ index.bundle?platform=vr&dev=true:9544
performUnitOfWork @ index.bundle?platform=vr&dev=true:10455
workLoop @ index.bundle?platform=vr&dev=true:10474
_invokeGuardedCallback @ index.bundle?platform=vr&dev=true:7567
invokeGuardedCallback @ index.bundle?platform=vr&dev=true:7541
performWork @ index.bundle?platform=vr&dev=true:10510
scheduleUpdateImpl @ index.bundle?platform=vr&dev=true:10631
scheduleUpdate @ index.bundle?platform=vr&dev=true:10619
scheduleTopLevelUpdate @ index.bundle?platform=vr&dev=true:10954
updateContainer @ index.bundle?platform=vr&dev=true:10964
render @ index.bundle?platform=vr&dev=true:12559
renderApplication @ index.bundle?platform=vr&dev=true:57573
run @ index.bundle?platform=vr&dev=true:57313
runApplication @ index.bundle?platform=vr&dev=true:57358
__callFunction @ index.bundle?platform=vr&dev=true:13130
(anonymous) @ index.bundle?platform=vr&dev=true:12946
__guard @ index.bundle?platform=vr&dev=true:13101
MessageQueue.callFunctionReturnFlushedQueue @ index.bundle?platform=vr&dev=true:12945
onmessage @ blob:http://localhost:8081/d559c202-3e5e-469f-8966-3355bfd463be:63
index.bundle?platform=vr&dev=true:12707 Invariant Violation: 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.

Check the render method of `Hello360`.

This error is located at:
    in RCTView (at View.vr.js:543)
    in View (at index.js:28)
    in Hello360 (at renderApplication.js:35)
    in RCTView (at View.vr.js:543)
    in View (at AppContainer.js:102)
    in RCTView (at View.vr.js:543)
    in View (at AppContainer.js:126)
    in AppContainer (at renderApplication.js:34)
handleException @ index.bundle?platform=vr&dev=true:12707
ReactNativeFiberErrorDialog @ index.bundle?platform=vr&dev=true:7765
logCapturedError @ index.bundle?platform=vr&dev=true:7507
captureError @ index.bundle?platform=vr&dev=true:10562
performWork @ index.bundle?platform=vr&dev=true:10517
scheduleUpdateImpl @ index.bundle?platform=vr&dev=true:10631
scheduleUpdate @ index.bundle?platform=vr&dev=true:10619
scheduleTopLevelUpdate @ index.bundle?platform=vr&dev=true:10954
updateContainer @ index.bundle?platform=vr&dev=true:10964
render @ index.bundle?platform=vr&dev=true:12559
renderApplication @ index.bundle?platform=vr&dev=true:57573
run @ index.bundle?platform=vr&dev=true:57313
runApplication @ index.bundle?platform=vr&dev=true:57358
__callFunction @ index.bundle?platform=vr&dev=true:13130
(anonymous) @ index.bundle?platform=vr&dev=true:12946
__guard @ index.bundle?platform=vr&dev=true:13101
MessageQueue.callFunctionReturnFlushedQueue @ index.bundle?platform=vr&dev=true:12945
onmessage @ blob:http://localhost:8081/d559c202-3e5e-469f-8966-3355bfd463be:63
index.bundle?platform=vr&dev=true:12707 Invariant Violation: 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.

Check the render method of `Hello360`.

This error is located at:
    in RCTView (at View.vr.js:543)
    in View (at index.js:28)
    in Hello360 (at renderApplication.js:35)
    in RCTView (at View.vr.js:543)
    in View (at AppContainer.js:102)
    in RCTView (at View.vr.js:543)
    in View (at AppContainer.js:126)
    in AppContainer (at renderApplication.js:34)
handleException @ index.bundle?platform=vr&dev=true:12707
handleError @ index.bundle?platform=vr&dev=true:14732
reportFatalError @ index.bundle?platform=vr&dev=true:697
__guard @ index.bundle?platform=vr&dev=true:13103
MessageQueue.callFunctionReturnFlushedQueue @ index.bundle?platform=vr&dev=true:12945
onmessage @ blob:http://localhost:8081/d559c202-3e5e-469f-8966-3355bfd463be:63
client.bundle?platform=vr:64696 
-----
> beginWork@http://localhost:8081/index.bundle?platform=vr&dev=true 9550:28
> updateHostComponent@http://localhost:8081/index.bundle?platform=vr&dev=true 9469:393
> reconcileChildren@http://localhost:8081/index.bundle?platform=vr&dev=true 9411:13
> reconcileChildrenAtPriority@http://localhost:8081/index.bundle?platform=vr&dev=true 9414:55
> reconcileChildFibers@http://localhost:8081/index.bundle?platform=vr&dev=true 9189:43
> reconcileChildrenArray@http://localhost:8081/index.bundle?platform=vr&dev=true 9034:37
> createChild@http://localhost:8081/index.bundle?platform=vr&dev=true 8927:40
> createFiberFromElement@http://localhost:8081/index.bundle?platform=vr&dev=true 8649:21
> createFiberFromElementType@http://localhost:8081/index.bundle?platform=vr&dev=true 8666:91
-----
Invariant Violation: 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.

Check the render method of `Hello360`.

This error is located at:
    in RCTView (at View.vr.js:543)
    in View (at index.js:28)
    in Hello360 (at renderApplication.js:35)
    in RCTView (at View.vr.js:543)
    in View (at AppContainer.js:102)
    in RCTView (at View.vr.js:543)
    in View (at AppContainer.js:126)
    in AppContainer (at renderApplication.js:34)
displayStackAndMessage @ client.bundle?platform=vr:64696
reportSoftException @ client.bundle?platform=vr:64706
frame @ client.bundle?platform=vr:1981
frame @ client.bundle?platform=vr:69087
frame @ client.bundle?platform=vr:65144
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
client.bundle?platform=vr:64696 
-----
> beginWork@http://localhost:8081/index.bundle?platform=vr&dev=true 9550:28
> updateHostComponent@http://localhost:8081/index.bundle?platform=vr&dev=true 9469:393
> reconcileChildren@http://localhost:8081/index.bundle?platform=vr&dev=true 9411:13
> reconcileChildrenAtPriority@http://localhost:8081/index.bundle?platform=vr&dev=true 9414:55
> reconcileChildFibers@http://localhost:8081/index.bundle?platform=vr&dev=true 9189:43
> reconcileChildrenArray@http://localhost:8081/index.bundle?platform=vr&dev=true 9034:37
> createChild@http://localhost:8081/index.bundle?platform=vr&dev=true 8927:40
> createFiberFromElement@http://localhost:8081/index.bundle?platform=vr&dev=true 8649:21
> createFiberFromElementType@http://localhost:8081/index.bundle?platform=vr&dev=true 8666:91
-----
Invariant Violation: 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.

Check the render method of `Hello360`.

This error is located at:
    in RCTView (at View.vr.js:543)
    in View (at index.js:28)
    in Hello360 (at renderApplication.js:35)
    in RCTView (at View.vr.js:543)
    in View (at AppContainer.js:102)
    in RCTView (at View.vr.js:543)
    in View (at AppContainer.js:126)
    in AppContainer (at renderApplication.js:34)
displayStackAndMessage @ client.bundle?platform=vr:64696
reportFatalException @ client.bundle?platform=vr:64716
frame @ client.bundle?platform=vr:1981
frame @ client.bundle?platform=vr:69087
frame @ client.bundle?platform=vr:65144
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
requestAnimationFrame (async)
frame @ client.bundle?platform=vr:65196
client.bundle?platform=vr:64696 
-----
> beginWork@file:////Users/eyale/dev/Hello360/node_modules/react-native/Libraries/Renderer/ReactNativeFiber-dev.js 1839:23
> updateHostComponent@file:////Users/eyale/dev/Hello360/node_modules/react-native/Libraries/Renderer/ReactNativeFiber-dev.js 1752:21
> reconcileChildren@file:////Users/eyale/dev/Hello360/node_modules/react-native/Libraries/Renderer/ReactNativeFiber-dev.js 1685:12
> reconcileChildrenAtPriority@file:////Users/eyale/dev/Hello360/node_modules/react-native/Libraries/Renderer/ReactNativeFiber-dev.js 1688:54
> reconcileChildFibers@file:////Users/eyale/dev/Hello360/node_modules/react-native/Libraries/Renderer/ReactNativeFiber-dev.js 1531:42
> reconcileChildrenArray@file:////Users/eyale/dev/Hello360/node_modules/react-native/Libraries/Renderer/ReactNativeFiber-dev.js 1359:36
> createChild@file:////Users/eyale/dev/Hello360/node_modules/react-native/Libraries/Renderer/ReactNativeFiber-dev.js 1245:35
> createFiberFromElement@file:////Users/eyale/dev/Hello360/node_modules/react-native/Libraries/Renderer/ReactNativeFiber-dev.js 996:20
> createFiberFromElementType@file:////Users/eyale/dev/Hello360/node_modules/react-native/Libraries/Renderer/ReactNativeFiber-dev.js 1016:90
-----
Invariant Violation: 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.

Check the render method of `Hello360`.

This error is located at:
    in RCTView (at View.vr.js:543)
    in View (at index.js:28)
    in Hello360 (at renderApplication.js:35)
    in RCTView (at View.vr.js:543)
    in View (at AppContainer.js:102)
    in RCTView (at View.vr.js:543)
    in View (at AppContainer.js:126)
    in AppContainer (at renderApplication.js:34)

This is the source code:

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  VrButton,
  Entity,
  asset
} from 'react-360';

export default class Hello360 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    }
  }

  increment = () => {
    this.setState({
      counter: this.state.counter + 1
    });
  }

  render() {
    return (
      <View>
        <View style={styles.panel}>
          <VrButton style={styles.greetingBox} onClick={this.increment}>
            <Text style={styles.greeting}>
        {`Hello World: ${this.state.counter}`}
            </Text>
          </VrButton>
        </View>
    <Entity source={{obj: asset('BoxesOBJ.obj'), mtl: asset('BoxesOBJ.mtl')}} />
      </View>
    );
  }
};

const styles = StyleSheet.create({
  panel: {
    // Fill the entire surface
    width: 1000,
    height: 600,
    backgroundColor: 'rgba(255, 255, 255, 0.4)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  greetingBox: {
    padding: 20,
    backgroundColor: '#000000',
    borderColor: '#639dda',
    borderWidth: 2,
  },
  greeting: {
    fontSize: 30,
  },
});

AppRegistry.registerComponent('Hello360', () => Hello360);

Is this a Bug or a Feature Request?
For a Bug please explain below what you did, what you expected to happen, and what actually happens.

Expected behavior

Display the box

Actual behavior

See error log above

Reproduction

List all the steps required to encounter the issue you're reporting. These steps should be clear and concise.

An example of your code that reliably reproduces the issue is ideal.

Solution

What needs to be done to address this issue? Ideally, provide a pull request with a fix.

Additional Information

• 'react-360' package version: [FILL THIS OUT: get this by running npm list react-360]
  [email protected]

• 'react-360-web' package version: [FILL THIS OUT: get this by running npm list react-360-web]
  [email protected]

• Operating System: [FILL THIS OUT: MacOS, Linux, or Windows?]
  Mac OS

• Browser: [FILL THIS OUT: Oculus Browser, Chrome, Edge, Safari? Which version?]
  Chrome

• VR Device: [FILL THIS OUT: In or Out of VR? Headset? ]
  none

[andrewimm]

Try import Entity from 'Entity' instead of from 'react-360'. Looks like it isn't currently exported by the top-level; this can be fixed in the next patch release.

[ghost]

Same problem over here. However I get no errors on the terminal just the model not showing up. If I render text loads just fine. But If I add a following Entity both things won't load.

[vineethariharan]

Entities are supposed to be rendered to a location where as text could be rendered to a surface. Check your client.js file

[ghost]

Found a solution. Got to import "asset" too. Example:

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  VrButton,
  asset,
} from 'react-360';

import Entity from 'Entity';

The model files should be in static_assets folder.

<Entity
        source={{ obj: asset('cilinder.obj'),
        mtl: asset('cilinder.mtl') }}
        />

I think this should be specified in the docs. There's an example of how to define 3D models, but it doesn't say anything about dependancies.

[ghost]

@eyaleizenberg here's a working updated example project https://github.com/rafalfaro18/react-vr-example/tree/608c8fac270b1692d0abbee8286b5c79f4efa275

[ghost]

It seems some mtl files are not supported so the ambient light won't hit the object and it will render totally black.

[ghost]

Hi I don't know where to put this i'm adding it here as a comment in case someone has the same problem. Maya 3D exports the mtl file without Kd values this produces a BLACK object. You have to add manually Kd values to the mtl file. Example:

newmtl blinn1SG
illum 4
Kd 0.00 0.00 0.00
Ka 0.00 0.00 0.00
Tf 1.00 1.00 1.00
map_Kd abstract-art-background-207300.jpg
Ni 1.86
Ks 0.50 0.50 0.50

Change to:

newmtl blinn1SG
illum 4
Kd 0.50 0.50 0.50
Ka 0.00 0.00 0.00
Tf 1.00 1.00 1.00
map_Kd abstract-art-background-207300.jpg
Ni 1.86
Ks 0.50 0.50 0.50

I fought with this problem for days. I think blender should export materials with those values. FYI.