React-360: "Error: Unrecognized platform: vr" when following instructions

[vgrafe]

Description

Bug: Right after following install instructions, upon navigating to http://localhost:8081/vr/, nothing is displayed.

Browser log:

caught ReferenceError: ReactVR is not defined
    at (index):11

server log:

Error: Unrecognized platform: vr

Additional Information

• react-vr package version: 0.1.1
• react-vr-web package version: [FILL THIS OUT]
• Operating System: MacOS
• Graphics Card: AMD Radeon R9 M370X 2048 MB
• Browser: Chrome 55
• VR Device: out, browser

[andrewimm]

Until React Native 0.40 is stable, we have to manually add the "vr" platform to the packager configuration. When you created your project and it ran npm install, it should have patched a file to do this.

Can you paste the contents of node_modules/react-native/packager/defaults.js?

[vgrafe]

here it is:

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 *
 * @flow
 */
'use strict';

exports.assetExts =  [
  'bmp', 'gif', 'jpg', 'jpeg', 'png', 'psd', 'svg', 'webp', // Image formats
  'm4v', 'mov', 'mp4', 'mpeg', 'mpg', 'webm', // Video formats
  'aac', 'aiff', 'caf', 'm4a', 'mp3', 'wav', // Audio formats
  'html', 'pdf', // Document formats
];

exports.moduleSystem = require.resolve('./react-packager/src/Resolver/polyfills/require.js');

exports.platforms = ['ios', 'android', 'windows', 'web'];

exports.polyfills = [
  require.resolve('./react-packager/src/Resolver/polyfills/polyfills.js'),
  require.resolve('./react-packager/src/Resolver/polyfills/console.js'),
  require.resolve('./react-packager/src/Resolver/polyfills/error-guard.js'),
  require.resolve('./react-packager/src/Resolver/polyfills/Number.es6.js'),
  require.resolve('./react-packager/src/Resolver/polyfills/String.prototype.es6.js'),
  require.resolve('./react-packager/src/Resolver/polyfills/Array.prototype.es6.js'),
  require.resolve('./react-packager/src/Resolver/polyfills/Array.es6.js'),
  require.resolve('./react-packager/src/Resolver/polyfills/Object.es7.js'),
  require.resolve('./react-packager/src/Resolver/polyfills/babelHelpers.js'),
];

exports.providesModuleNodeModules = [
  'react-native',
  'react-native-windows',
  // Parse requires AsyncStorage. They will
  // change that to require('react-native') which
  // should work after this release and we can
  // remove it from here.
  'parse',
];

exports.runBeforeMainModule = [
  // Ensures essential globals are available and are patched correctly.
  'InitializeCore',
];

[andrewimm]

Seems that neither of the patches were applied. Can you run npm install again from within your project directory, and see if the contents of this file change after that completes?

Also, which version of npm are you running? You can find this with npm --version

[vgrafe]

npm -v is 3.7.3

npm i updated the file 🎉 !!

the app runs well now. Thank you!

[andrewimm]

Great! Though I'm still puzzled why it didn't run the first time around.

[tetreault]

Hi @andrewimm , I am running in to the same issue. I followed your instructions to the OP and it didn't resolve it on my end. Here's the file in react-native/packager/defaults.js

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 *
 * @flow
 */
'use strict';

exports.assetExts =  [
  'bmp', 'gif', 'jpg', 'jpeg', 'png', 'psd', 'svg', 'webp', // Image formats
  'm4v', 'mov', 'mp4', 'mpeg', 'mpg', 'webm', // Video formats
  'aac', 'aiff', 'caf', 'm4a', 'mp3', 'wav', // Audio formats
  'html', 'pdf', // Document formats
];

exports.moduleSystem = require.resolve('./react-packager/src/Resolver/polyfills/require.js');

exports.platforms = ['ios', 'android', 'vr', 'windows', 'web'];

exports.polyfills = [
  require.resolve('./react-packager/src/Resolver/polyfills/polyfills.js'),
  require.resolve('./react-packager/src/Resolver/polyfills/console.js'),
  require.resolve('./react-packager/src/Resolver/polyfills/error-guard.js'),
  require.resolve('./react-packager/src/Resolver/polyfills/Number.es6.js'),
  require.resolve('./react-packager/src/Resolver/polyfills/String.prototype.es6.js'),
  require.resolve('./react-packager/src/Resolver/polyfills/Array.prototype.es6.js'),
  require.resolve('./react-packager/src/Resolver/polyfills/Array.es6.js'),
  require.resolve('./react-packager/src/Resolver/polyfills/Object.es7.js'),
  require.resolve('./react-packager/src/Resolver/polyfills/babelHelpers.js'),
];

exports.providesModuleNodeModules = [
  'react-native',
  'react-native-windows',
  // Parse requires AsyncStorage. They will
  // change that to require('react-native') which
  // should work after this release and we can
  // remove it from here.
  'parse', 'react-vr',
];

exports.runBeforeMainModule = [
  // Ensures essential globals are available and are patched correctly.
  'InitializeCore',
];

My NPM version is 4.03, Node is 5.9.1, and Yarn is 0.15.1.

I've tried with both Yarn and NPM despite the fact that it most likely doesn't matter which is used.

Here's some output from the server:

[12/14/2016, 4:09:05 PM] <START> Transforming modules
Error: Unrecognized platform: vr
    at DependencyGraph._getRequestPlatform (/Users/stephen/Documents/git/react-vr-sandbox/HelloVR/node_modules/react-native/packager/react-packager/src/node-haste/index.js:280:13)
    at /Users/stephen/Documents/git/react-vr-sandbox/HelloVR/node_modules/react-native/packager/react-packager/src/node-haste/index.js:244:23
    at process._tickCallback (node.js:412:9)

[12/14/2016, 4:11:47 PM] <START> Requesting bundle  url: /vr/client.bundle?platform=vr  
Error: Unrecognized platform: vr
    at DependencyGraph._getRequestPlatform (/Users/stephen/Documents/git/react-vr-sandbox/HelloVR/node_modules/react-native/packager/react-packager/src/node-haste/index.js:280:13)
    at /Users/stephen/Documents/git/react-vr-sandbox/HelloVR/node_modules/react-native/packager/react-packager/src/node-haste/index.js:244:23
    at process._tickCallback (node.js:412:9)

Any advice is welcome, thanks for the help in advance!

[andrewimm]

exports.platforms contains the needed 'vr' string. Can you provide your full error message?

[tetreault]

Hi @andrewimm sorry, you might've seen me pinging you prior to updating my message with the error from the server. Here it is either way though, thanks for the help!

[12/14/2016, 4:09:05 PM] <START> Transforming modules
Error: Unrecognized platform: vr
    at DependencyGraph._getRequestPlatform (/Users/stephen/Documents/git/react-vr-sandbox/HelloVR/node_modules/react-native/packager/react-packager/src/node-haste/index.js:280:13)
    at /Users/stephen/Documents/git/react-vr-sandbox/HelloVR/node_modules/react-native/packager/react-packager/src/node-haste/index.js:244:23
    at process._tickCallback (node.js:412:9)

[12/14/2016, 4:11:47 PM] <START> Requesting bundle  url: /vr/client.bundle?platform=vr  
Error: Unrecognized platform: vr
    at DependencyGraph._getRequestPlatform (/Users/stephen/Documents/git/react-vr-sandbox/HelloVR/node_modules/react-native/packager/react-packager/src/node-haste/index.js:280:13)
    at /Users/stephen/Documents/git/react-vr-sandbox/HelloVR/node_modules/react-native/packager/react-packager/src/node-haste/index.js:244:23
    at process._tickCallback (node.js:412:9)

And in the inspector here's the error there too:

(index):11 Uncaught ReferenceError: ReactVR is not defined(…)

[andrewimm]

Can you let me know which version of react-native is installed? I'm trying to figure out why it's not getting proxied through to the haste resolver.

[tetreault]

@andrewimm here's what react-native -v spits out:

react-native-cli: 1.2.0
react-native: 0.37.0

And just in case its needed:

Browser: Chrome Version 54.0.2840.98
OS: OSX version 10.11.6
Graphics: AMD Radeon HD 6630M 256 MB

[RohanDamani]

Hi was this issue ever resolved? I'm getting the same error ReactVR is not defined. Its not creating client.bundle?platform=vr.

[tetreault]

I've since been occupied with other projects but would like to come back to this so would be interested in finding that out as well.

[andrewimm]

without more information, it's difficult for me to pinpoint the reason for this. I'd imagine there's something wrong with the installation process on your particular setup which is breaking the patches we apply to the underlying react-native code.

The good news is that we're about to release an update that moves the dependency on React Native up to 0.42, which contains a number of changes I wrote to support custom platforms like "vr" without any hacky patching. With that release, the installation process should be a lot more foolproof 🤞

[tetreault]

Sick thanks for the update and hard work @andrewimm! I plan on revisiting react VR after I shove away some other work.