tfjs: Import tfjs-react-native not working on EXPO CLI Project

Describe the problem or feature request

I’m getting this error when I try to run my React-Native program on the web or android. I followed the steps on the tfjs-react-native documentation but I’m still having issues with my program.

TensorFlow.js version

tfjs-react-native

Browser version

package.json Screen Shot 2020-02-23 at 12 15 50 AM

Code to reproduce the bug / link to feature request

This is the code causing the error Screen Shot 2020-02-23 at 12 17 50 AM

I even removed the tfjs-react native import and it compiles so I don’t know what to do

If you would like to get help from the community, we encourage using Stack Overflow and the tensorflow.js tag.

GitHub issues for this repository are tracked in the tfjs union repository.

Please file your issue there, following the guidance in that issue template.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 1
Comments: 19 (9 by maintainers)

Most upvoted comments

That compiled_api.ts file will be removed from the dist directory in the next tfjs release (with https://github.com/tensorflow/tfjs/commit/fb163f7f1f8cbb953a856f1621d8b1bad44afd04) as it shouldn’t even be there. For a quick fix, just delete that typescript file:

rm -f node_modules/@tensorflow/tfjs-converter/dist/src/data/compiled_api.ts

Then metro should stop complaining.

pvaneck on Feb 28, 2020

Doesn’t seem like fetch supports local afaik. Might have to use expo-file-system to load local images for now.

@motya770 Which error are you getting? I have a barebones TF.js typescript expo managed project that can load fine for me (https://github.com/pvaneck/tfjs-react-native-app) if you want to check that out.

pvaneck on Mar 13, 2020

@DanielOnye123 Were you getting this unexpected token error in your project only when doing yarn web (expo start --web)? Webpack is used for running react-native apps in the browser with expo. You shouldn’t be hitting this specific error when running on Android.

Try running expo customize:web in the root of the project, then select the webpack.config.js option to generate the webpack config file. Add the following to the webpack.config.js file and try re-running the app.

const createExpoWebpackConfigAsync = require('@expo/webpack-config');
const path = require('path');

module.exports = async function(env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  
  config.module.rules.push({
    test: /\.(js|jsx)$/,
    include: [path.resolve(__dirname, "node_modules/@tensorflow/tfjs-react-native")],
    use: {
      loader: 'babel-loader',
      options: {
        presets: [
          ['@babel/env', { modules: 'commonjs' }], 
        ],
      }
    }
  });
  return config;
};

I was able to get my managed Expo JS app working on the web with this.

pvaneck on Feb 27, 2020