Fail to import package other than React VR itself.

[zzc-tongji]

Problem

I use react-vr init demo to create a React VR project. It works.

However, after using npm install --save mathjs and add it to the project:

import React from 'react';
import {
  AppRegistry,
  asset,
  Pano,
  Text,
  View,
} from 'react-vr';
import math from 'mathjs';

export default class gala360demo extends React.Component {
  render() {
    return (
      <View>
        <Pano source={asset('chess-world.jpg')}/>
        <Text
          style={{
            backgroundColor: '#777879',
            fontSize: 0.8,
            fontWeight: '400',
            layoutOrigin: [0.5, 0.5],
            paddingLeft: 0.2,
            paddingRight: 0.2,
            textAlign: 'center',
            textAlignVertical: 'center',
            transform: [{translate: [0, 0, -3]}],
          }}>
            {math.sin(1)}
        </Text>
      </View>
    );
  }
};

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

When I start it by using npm start and visit http://localhost:8081/vr/?hotreload by browser, I cannot see anything. The terminal says:

error: bundling failed: "TransformError: /(path)/demo/node_modules/escape-latex/dist/index.js: Couldn't find preset \"env\" relative to directory \"/(path)/demo/node_modules/escape-latex\""

In order to exclude bugs of React itself, I do the same thing on it: create project create-react-app hello-react, install package npm install --save mathjs and add it to the project:

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import math from 'mathjs';

class Index extends Component {
    render () {
        return(
            <div>
                {math.sin(1)}
            </div>
        )
    }
}

ReactDOM.render(
    <Index/>, document.getElementById('root')
);

It works.

So how to solve the problem of React VR? Is there a correct way to import package other than React VR itself?

Additional Information

• 'react-vr' package version: react-vr@2.0.0
• 'react-vr-web' package version: react-vr-web@2.0.0
• Operating System: MacOS
• Graphics Card: Intel
• Browser: Chrome
• VR Device: Out of VR

[andrewimm]

We use Metro, the bundler from React Native, to compile your React VR apps. The problem is that the package you are trying to import seems to have its own babel presets, and does not support being included in React Native projects. Unfortunately there's nothing we can do on our end to fix this, it's an issue with how the mathjs package is being delivered.

We will be performing a Metro upgrade soon, that may provide a way to work around this, but I cannot be certain.

[josdejong]

@zzc-tongji looking at the error:

error: bundling failed: "TransformError: /(path)/demo/node_modules/escape-latex/dist/index.js: 
    Couldn't find preset \"env\" relative to directory \"/(path)/demo/node_modules/escape-latex\""

It looks like it has to do with the escape-latex library used by mathjs. I guess escape-latex needs to provide a lib folder with ES5 code and point to that from within the main field in it's package.json file to solve this issue. @dangmai what do you think?

[dangmai]

I have no problem with changing escape-latex to accommodate this use case, however I'm not quite up-to-date with React Native bundler and how it expects escape-latex to be laid out so I'll need some help updating the library. I'll take a look at it in the next few days, but if anyone wants to open PR in the mean time it'll be appreciated.

[neilhighley]

Confirmed on latest create-react-native-app template also, MathJS cannot be used due to same env escape-latex transformer error.

[Fix] Using version 3.9.3 of MathJS fixes the issue with CRNA, was previously attempted with 4.2.1. this might work with VR

[dangmai]

@josdejong I've made some changes to escape-latex and publish version 1.0.3 that should hopefully fix this issue.

[josdejong]

Thanks @dangmai that's good news. I've just released mathjs@4.2.2 which contains escape-latex@1.0.3.

@zzc-tongji can you check whether this solves the issue?

[iffy]

I can't speak for react-360 or ReactVR, but in my own ReactNative project, upgrading mathjs from 4.0.1 to 4.2.2 resolved the escape-latex env error.

[josdejong]

Thanks for the feedback @iffy