camera_stream.js parse failed in tfjs-react-native:0.2.3

To get help from the community, we encourage using Stack Overflow and the tensorflow.js tag.

TensorFlow.js version

@tensorflow/tfjs-react-native": "^0.2.3"

Browser version

Chrome 83.0.4103.61

Describe the problem or feature request

Run with expo start --web and camera_stream.js module parse failed as below.

/node_modules/@tensorflow/tfjs-react-native/dist/camera/camera_stream.js 288:12
Module parse failed: Unexpected token (288:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|             const cameraComp = (
|             //@ts-ignore see https://github.com/microsoft/TypeScript/issues/30650
>             <CameraComponent key='camera-with-tensor-camera-view' {...(cameraProps)} ref={(ref) => (this.camera = ref)}/>);
|             // Create the glView if the camera has mounted.
|             let glViewComponent = null;

[tafsiri]

@daoshengmu we currently don’t have any plans to support expo-web with tfjs-react-native (android and ios support only). We recommend just using regular tfjs for web applications (i.e. do not import the tfjs-react-native package when targeting browsers).

[TomasGonzalez]

I know that this thread is closed, but I came here and by the conclusion I thought there was no way out of it. But I just kept reading the readme and was able to fix it by adding the appropriate loaders:

To the webpack config (This is in the step 4 of the readme)

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

module.exports = async function(env, argv) {
  const config = await createExpoWebpackConfigAsync(
      {
        ...env,
        babel: {
          dangerouslyAddModulePathsToTranspile: [
            // Ensure that all packages starting with @tensorflow are
            // transpiled.
            '@tensorflow',
          ],
        },
      },
      argv);
  return config;
};