React-360: Sample "WelcomeToVR" application not rendered.

[singhsamyak]

Description

Unable to view initial "hello" scene after following the instructions to create "Your First Application."

Expected behavior

Should see "hello" text and the "chess world."

Actual behavior

Page is blank (black background) and only the overlay widgets (compass, "view in VR" button, and fullscreen button) are visible.

Reproduction

Simply follow the instructions to setup "Your First Application" found in the developer site.

Additional Information

• react-vr package version: 0.1.1
• react-vr-web package version: 0.1.1
• Operating System: Mac OSX 10.11.6
• Graphics Card: NVIDIA GeForce GT 750M 2048 MB
• Browser: Chrome (v54.0.2840.98), Firefox (v50.0.2), and Safari (v9.1.2).
• VR Device: N/A

[UXVirtual]

Getting the same behavior with the following:

• react-vr package version: 0.1.1
• react-vr-web package version: 0.1.1
• Operating System: Mac OSX 10.11.6
• Graphics Card: Intel Iris GPU 1536MB
• Browser: Chrome (v55.0.2883.95)
• VR Device: N/A

EDIT: I also have the same problem using react-vr v0.1.0 and react-vr-web v0.1.0

[mikearmstrong001]

Would you mind providing the console.log output, this will be useful in breaking down the problem.

[singhsamyak]

These are the logs:

THREE.WebGLRenderer – "80" (client.bundle, line 22876)

Outdated version of Web Audio API detected. (client.bundle, line 50635)

["UIManager", Object, Array, [], []] (5) (client.bundle, line 1821)

["AndroidConstants", {name: "AndroidConstants", Version: 22}, [], [], []] (5) (client.bundle, line 1821)

["AsyncLocalStorage", {name: "AsyncLocalStorage"}, ["multiGet", "multiSet", "multiRemove", "clear", "getAllKeys"], [], []] (5) (client.bundle, line 1821)

["Networking", {name: "Networking"}, ["sendRequest"], [], []] (5) (client.bundle, line 1821)

["LinkingManager", {name: "LinkingManager"}, ["openURL", "canOpenURL"], [0, 1], []] (5) (client.bundle, line 1821)

["Timing", {name: "Timing"}, ["createTimer", "deleteTimer", "setSendIdleEvents", "frame", "idle"], [], []] (5) (client.bundle, line 1821)

["VideoModule", {name: "VideoModule"}, Array, [], []] (5) (client.bundle, line 1821)

["AudioModule", Object, Array, [], []] (5) (client.bundle, line 1821)

["WebSocketModule", {name: "WebSocketModule"}, ["connect", "send", "sendBinary", "ping", "close"], [], []] (5) (client.bundle, line 1821)

["ReactVRConstants", Object, [], [], []] (5) (client.bundle, line 1821)

["ExceptionsManager", {name: "ExceptionsManager", hadFatal: undefined}, ["displayStackAndMessage", "reportSoftException", "reportFatalException", "updateExceptionMessage", "reportUnhandledException"], [], []] (5) (client.bundle, line 1821)

["SourceCode", {name: "SourceCode", scriptURL: "http://localhost:8081/"}, ["getScriptText"], [], []] (5) (client.bundle, line 1821)

["ExternalAssets", {name: "ExternalAssets", assetRoot: "../static_assets/"}, [], [], []] (5) (client.bundle, line 1821)

These are the errors:

http://localhost:8081/index.vr.bundle?platform=vr&dev=true 
Failed to load resource: the server responded with a status of 500 (Internal Server Error)

http://localhost:8081/favicon.ico 
Failed to load resource: the server responded with a status of 404 (Not Found)

http://localhost:8081/index.vr.bundle?platform=vr&dev=true 
Failed to load resource: the server responded with a status of 500 (Internal Server Error)

[mikearmstrong001]

This indicates the runtime has initialised

Which directory did you run the package from? can you attach the layout (excluding contents of node_modules :) )

Guess: did you create the project in the preview directory?, you need to make sure you change into the project directory that is created before running npm start. Better yet is to create the project in a different directory outside of preview

react-vr init [project]
cd [project]
npm install
npm start

If the above doesn't help do you have any logs from the window you ran npm start from ?

Thanks we'll get there and use the steps to help make the docs more clear

[UXVirtual]

For me, install works fine, but when I cd into the project folder and run npm start I get errors similar to:

This warning is caused by a @providesModule declaration with the same name across two different files.
jest-haste-map: @providesModule naming collision:
  Duplicate module name: ReactNativeViewAttributes
  Paths: /Users/michael/Sites/react-vr-test/node_modules/react-vr/Libraries/VRReactOverrides/ReactNativeViewAttributes.vr.js collides with /Users/michael/Sites/react-vr-test/node_modules/react-native/Libraries/Components/View/ReactNativeViewAttributes.js

Below is the full log output:

error-log.txt

In the browser console I get the following errors output which matches what's reported by @singhsamyak:

Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8081/index.vr.bundle?platform=vr&dev=true Failed to load resource: the server responded with a status of 500 (Internal Server Error)
blob:http://localhost:8081/04fb11f3-c510-43eb-8733-9e79d7165d38:18 DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:8081/index.vr.bundle?platform=vr&dev=true' failed to load.
    at onmessage (blob:http://localhost:8081/04fb11f3-c510-43eb-8733-9e79d7165d38:15:7)
onmessage @ blob:http://localhost:8081/04fb11f3-c510-43eb-8733-9e79d7165d38:18
blob:http://localhost:8081/04fb11f3-c510-43eb-8733-9e79d7165d38:18 [object DOMException]
onmessage @ blob:http://localhost:8081/04fb11f3-c510-43eb-8733-9e79d7165d38:18
http://localhost:8081/index.vr.bundle?platform=vr&dev=true Failed to load resource: the server responded with a status of 500 (Internal Server Error)
blob:http://localhost:8081/04fb11f3-c510-43eb-8733-9e79d7165d38:43 {
  "type": "TransformError",
  "message": "SyntaxError /Users/michael/Sites/react-vr-test/index.vr.js: Unexpected token, expected { (11:11)",
  "snippet": [
    "   9 | } from 'react-vr';",
    "  10 | ",
    "> 11 | class react-vr-test extends React.Component {",
    "     |            ^",
    "  12 |   render() {",
    "  13 |     return (",
    "  14 |       <View>"
  ],
  "lineNumber": 11,
  "column": 11,
  "filename": "file:////Users/michael/Sites/react-vr-test/index.vr.js",
  "description": "/Users/michael/Sites/react-vr-test/index.vr.js: Unexpected token, expected { (11:11)",
  "errors": [
    {
      "description": "/Users/michael/Sites/react-vr-test/index.vr.js: Unexpected token, expected { (11:11)",
      "filename": "file:////Users/michael/Sites/react-vr-test/index.vr.js",
      "lineNumber": 11
    }
  ]
}
xmlhttp.onreadystatechange @ blob:http://localhost:8081/04fb11f3-c510-43eb-8733-9e79d7165d38:43
blob:http://localhost:8081/04fb11f3-c510-43eb-8733-9e79d7165d38:43 {
  "type": "TransformError",
  "message": "SyntaxError /Users/michael/Sites/react-vr-test/index.vr.js: Unexpected token, expected { (11:11)",
  "snippet": [
    "   9 | } from 'react-vr';",
    "  10 | ",
    "> 11 | class react-vr-test extends React.Component {",
    "     |            ^",
    "  12 |   render() {",
    "  13 |     return (",
    "  14 |       <View>"
  ],
  "lineNumber": 11,
  "column": 11,
  "filename": "file:////Users/michael/Sites/react-vr-test/index.vr.js",
  "description": "/Users/michael/Sites/react-vr-test/index.vr.js: Unexpected token, expected { (11:11)",
  "errors": [
    {
      "description": "/Users/michael/Sites/react-vr-test/index.vr.js: Unexpected token, expected { (11:11)",
      "filename": "file:////Users/michael/Sites/react-vr-test/index.vr.js",
      "lineNumber": 11
    }
  ]
}

If it helps, I'm running node v4.4.7 and npm v2.15.8.

[UXVirtual]

Upgrading node to v7.2.1 and npm to v3.10.9 seems to have resolved the Terminal error messages, however I'm still getting the following errors in the browser console:

Failed to load resource: the server responded with a status of 500 (Internal Server Error)
blob:http://localhost:8081/51396630-42f6-4f0a-8434-174923401b15:18 DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:8081/index.vr.bundle?platform=vr&dev=true' failed to load.
    at onmessage (blob:http://localhost:8081/51396630-42f6-4f0a-8434-174923401b15:15:7)
onmessage @ blob:http://localhost:8081/51396630-42f6-4f0a-8434-174923401b15:18
blob:http://localhost:8081/51396630-42f6-4f0a-8434-174923401b15:18 [object DOMException]
onmessage @ blob:http://localhost:8081/51396630-42f6-4f0a-8434-174923401b15:18
http://localhost:8081/index.vr.bundle?platform=vr&dev=true Failed to load resource: the server responded with a status of 500 (Internal Server Error)
blob:http://localhost:8081/51396630-42f6-4f0a-8434-174923401b15:43 {
  "type": "TransformError",
  "message": "SyntaxError /Users/michael/Sites/react-vr-test/index.vr.js: Unexpected token, expected { (11:11)",
  "snippet": [
    "   9 | } from 'react-vr';",
    "  10 | ",
    "> 11 | class react-vr-test extends React.Component {",
    "     |            ^",
    "  12 |   render() {",
    "  13 |     return (",
    "  14 |       <View>"
  ],
  "lineNumber": 11,
  "column": 11,
  "filename": "file:////Users/michael/Sites/react-vr-test/index.vr.js",
  "description": "/Users/michael/Sites/react-vr-test/index.vr.js: Unexpected token, expected { (11:11)",
  "errors": [
    {
      "description": "/Users/michael/Sites/react-vr-test/index.vr.js: Unexpected token, expected { (11:11)",
      "filename": "file:////Users/michael/Sites/react-vr-test/index.vr.js",
      "lineNumber": 11
    }
  ]
}
xmlhttp.onreadystatechange @ blob:http://localhost:8081/51396630-42f6-4f0a-8434-174923401b15:43
blob:http://localhost:8081/51396630-42f6-4f0a-8434-174923401b15:43 {
  "type": "TransformError",
  "message": "SyntaxError /Users/michael/Sites/react-vr-test/index.vr.js: Unexpected token, expected { (11:11)",
  "snippet": [
    "   9 | } from 'react-vr';",
    "  10 | ",
    "> 11 | class react-vr-test extends React.Component {",
    "     |            ^",
    "  12 |   render() {",
    "  13 |     return (",
    "  14 |       <View>"
  ],
  "lineNumber": 11,
  "column": 11,
  "filename": "file:////Users/michael/Sites/react-vr-test/index.vr.js",
  "description": "/Users/michael/Sites/react-vr-test/index.vr.js: Unexpected token, expected { (11:11)",
  "errors": [
    {
      "description": "/Users/michael/Sites/react-vr-test/index.vr.js: Unexpected token, expected { (11:11)",
      "filename": "file:////Users/michael/Sites/react-vr-test/index.vr.js",
      "lineNumber": 11
    }
  ]
}

[singhsamyak]

@mikearmstrong001 thank you for the tip!

Re-initialized project outside the directory which also had the "preview" directory, and now I can finally see the scene with the "chess world" and "hello" in my browser.

My previous directory structure (which didn't render) looked like this:

directoryFoo: 
-- preview
-- WelcomeToVR 

[UXVirtual]

I'm still having this issue, even after initialising the project inside my ~/Sites folder. Less Terminal errors this time:

jest-haste-map: @providesModule naming collision:
  Duplicate module name: View
  Paths: /Users/michael/Sites/reactvr-test/node_modules/react-vr/Libraries/Components/View/View.vr.js collides with /Users/michael/Sites/reactvr-test/node_modules/react-native/Libraries/Components/View/View.js

This warning is caused by a @providesModule declaration with the same name across two different files.
jest-haste-map: @providesModule naming collision:
  Duplicate module name: LayoutPropTypes
  Paths: /Users/michael/Sites/reactvr-test/node_modules/react-vr/Libraries/StyleSheet/LayoutPropTypes.vr.js collides with /Users/michael/Sites/reactvr-test/node_modules/react-native/Libraries/StyleSheet/LayoutPropTypes.js

This warning is caused by a @providesModule declaration with the same name across two different files.
jest-haste-map: @providesModule naming collision:
  Duplicate module name: NetworkOverlay
  Paths: /Users/michael/Sites/reactvr-test/node_modules/react-vr/Libraries/VRReactOverrides/NetworkOverlay.vr.js collides with /Users/michael/Sites/reactvr-test/node_modules/react-native/Libraries/Inspector/NetworkOverlay.js

This warning is caused by a @providesModule declaration with the same name across two different files.
jest-haste-map: @providesModule naming collision:
  Duplicate module name: AnimatedImplementation
  Paths: /Users/michael/Sites/reactvr-test/node_modules/react-vr/Libraries/VRReactOverrides/AnimatedImplementation.vr.js collides with /Users/michael/Sites/reactvr-test/node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js

This warning is caused by a @providesModule declaration with the same name across two different files.
jest-haste-map: @providesModule naming collision:
  Duplicate module name: NavigationExperimental
  Paths: /Users/michael/Sites/reactvr-test/node_modules/react-vr/Libraries/VRReactOverrides/PlatformSpecific/NavigationExperimental.vr.js collides with /Users/michael/Sites/reactvr-test/node_modules/react-native/Libraries/NavigationExperimental/NavigationExperimental.js

This warning is caused by a @providesModule declaration with the same name across two different files.
jest-haste-map: @providesModule naming collision:
  Duplicate module name: ReactNativeViewAttributes
  Paths: /Users/michael/Sites/reactvr-test/node_modules/react-vr/Libraries/VRReactOverrides/ReactNativeViewAttributes.vr.js collides with /Users/michael/Sites/reactvr-test/node_modules/react-native/Libraries/Components/View/ReactNativeViewAttributes.js

This warning is caused by a @providesModule declaration with the same name across two different files.
jest-haste-map: @providesModule naming collision:
  Duplicate module name: processTransform
  Paths: /Users/michael/Sites/reactvr-test/node_modules/react-vr/Libraries/VRReactOverrides/processTransform.vr.js collides with /Users/michael/Sites/reactvr-test/node_modules/react-native/Libraries/StyleSheet/processTransform.js

This warning is caused by a @providesModule declaration with the same name across two different files.
jest-haste-map: @providesModule naming collision:
  Duplicate module name: YellowBox
  Paths: /Users/michael/Sites/reactvr-test/node_modules/react-vr/Libraries/VRReactOverrides/YellowBox.vr.js collides with /Users/michael/Sites/reactvr-test/node_modules/react-native/Libraries/ReactNative/YellowBox.js

This warning is caused by a @providesModule declaration with the same name across two different files.
jest-haste-map: @providesModule naming collision:
  Duplicate module name: setupDevtools
  Paths: /Users/michael/Sites/reactvr-test/node_modules/react-vr/Libraries/VRReactOverrides/setupDevtools.vr.js collides with /Users/michael/Sites/reactvr-test/node_modules/react-native/Libraries/Core/Devtools/setupDevtools.js

This warning is caused by a @providesModule declaration with the same name across two different files.
jest-haste-map: @providesModule naming collision:
  Duplicate module name: TransformPropTypes
  Paths: /Users/michael/Sites/reactvr-test/node_modules/react-vr/Libraries/VRReactOverrides/TransformPropTypes.vr.js collides with /Users/michael/Sites/reactvr-test/node_modules/react-native/Libraries/StyleSheet/TransformPropTypes.js

[magnus-bergman]

The default generated class when initiating a project inherits its name from the project name. You're not allowed to use dashes in es6 classnames. class react-vr-test extends React.Component produces a syntax error. If you just change the name of the class it should work.

[mikearmstrong001]

As @magnus-bergman states, @andrewimm has a fix for the cli which will prevent this and this will go live very soon

[mikearmstrong001]

@HAZARDU5 those warnings are not ideal but are not unexpected and will be cleaned up, however they shouldn't prevent you running a project. Was there any further logs?

Did you change the project name for that run ? Would you mind use a project name that doesn't include dashes.

[UXVirtual]

Changing the class name to ReactVRTest allows it to work as expected. Thanks for the clarification!

[mikearmstrong001]

Thanks for confirming

@andrewimm has released 0.1.2 of react-vr-cli that will prevent the naming problems by checking the variable name is a valid JavaScript variable name.