Create-react-native-app: console.log prints imported functions as null

[florianpeninon]

Description

I can't import functions from another file, they are assigned the value null

Expected Behavior

I started with a clean CRNA install, tweaked App.js to this:

import React from 'react';
import { View } from 'react-native';

import { 
  testFunction,
  testFunction2,
  testVar,
  testObj
} from './Home.js'

export default class App extends React.Component {
  render() {
    console.log(testFunction, testFunction2, testVar, testObj)

    return (
      <View>
      </View>
    );
  }
}

And created a second file named Home.js in the same folder:

export const testFunction = () => {
  return 'String'
}

export function testFunction2() {
  return 'String2'
}

export const testVar = 'String3'

export const testObj = { a : 2 }

The expected result of my console.log should be:
Function.., Function.., String3, {"a":2}

Observed Behavior

The result I get is:
null, null, String3, {"a":2}

Environment

• npm ls react-native-scripts: [email protected]
• npm ls react-native: [email protected]
• npm ls expo: [email protected]
• node -v: v7.4.0
• npm -v: 4.0.5
• yarn --version: 0.23.2
• watchman version: 4.7.0

Also specify:

1. Operating system: macOS

Reproducible Demo

See Expected Behavior

[anp]

I believe this is due to us using JSON.stringify to get console.log'd objects back to your terminal. For an example of this behavior:

$ node
> const testFunction = () => {
... return 'String';
... }
undefined
> testFunction()
'String'
> JSON.stringify(testFunction)
undefined
> console.log(JSON.stringify(testFunction))
undefined
undefined
> JSON.stringify(() => {})
undefined
> () => {}
[Function]

cc @brentvatne who may correct me here.

[brentvatne]

That is correct @dikaiosune -- @florianpnn, see https://github.com/expo/expo-sdk/blob/249bf19c155dee32b822f97942ba740934a25e30/src/Logs.js#L113-L149 for how we handle logging.

We should definitely improve this. I put together a quick example here to show how we could provide better logging for functions: https://snack.expo.io/SkqWpWE0x

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

// From: https://davidwalsh.name/javascript-arguments
function getFunctionArgs(func) {
  // First match everything inside the function argument parens.
  var args = func.toString().match(/function\s.*?\(([^)]*)\)/)[1];

  // Split the arguments string into an array comma delimited.
  return args.split(',').map(function(arg) {
    // Ensure no inline comments are parsed and trim the whitespace.
    return arg.replace(/\/\*.*\*\//, '').trim();
  }).filter(function(arg) {
    // Ensure no undefined values are added.
    return arg;
  });
}

function functionToString(func) {
  return `function ${func.name}(${getFunctionArgs(func).join(', ')}) {}`;
}

function prepareLog(obj) {
  let message;

  if (typeof obj === 'function') {
    message = functionToString(obj);
  } else {
    message = obj;
  }

  return message;
}

function lol(a, b, c) {
  console.log('hi', a, b, c);
}

export default class App extends React.Component {
  render() {
    console.log(JSON.stringify(prepareLog(lol)));

    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

This will log: "function lol(a, b, c) {}"

Any interest in sending a pull request to do something like this in XDL (linked to above)?

[florianpeninon]

@dikaiosune @brentvatne Thanks for the explanation guys!

It would be worth to handle this case, I thought it was broken when I could import random variable but no functions.

I would help but I'm afraid this is a bit beyond my level 😅

[brentvatne]

Moved this into the xdl repo https://github.com/expo/xdl/issues/9

[tetreault]

Really, really can't wait till this is resolved. Love expo so far, but this part is making me sad :( :( :( :(

[brentvatne]

@tetreault - it will be resolved in the next Expo release, SDK18

[ryanvanderpol]

Wow. I thought I was crazy. I actually gave up on using Redux and have been really frustrated with other libraries because none of the functions seemed to be passed into my props. I was doing a console.log to see if they were there and all I saw was null. Definitely not a great experience for me.

[brentvatne]

@ryanvanderpol - sorry that it wasn't a great experience for you! Expo is a big project and we're doing our best to rapidly improve our tooling, our release later today will fix this and we will update CRNA to the new version by the end of the week.

[tetreault]

glad to hear you're still working on this @brentvatne. I shelved my RN project for the time being (not because of this) but it was a pretty sour user experience for me as well. definitely looking forward to this being updated when I get to return to my RN project :) thanks for the hard work man.

[brentvatne]

it's fixed