Import errors trying to add LoginButton to a page

🐛 Bug Report

I'm running my app using expo, and when trying to run the app in a browser with the LoginButton I get the console errors:

 web  Compiled with warnings.
E:/Projects/beep/beep/node_modules/react-native-fbsdk/js/FBLoginButton.js
Attempted import error: 'requireNativeComponent' is not exported from 'react-native-web/dist/index'.

E:/Projects/beep/beep/node_modules/react-native-fbsdk/js/FBSendButton.js
Attempted import error: 'requireNativeComponent' is not exported from 'react-native-web/dist/index'.

E:/Projects/beep/beep/node_modules/react-native-fbsdk/js/FBShareButton.js
Attempted import error: 'requireNativeComponent' is not exported from 'react-native-web/dist/index'.

and in the browser:

I'm not really sure what I'm doing wrong, I've created a fresh react-native app and adding the login button is the first thing i'm trying to do. I'm somewhat new to react-native so bear with me, thanks.

To Reproduce

Follow https://reactnative.dev/docs/getting-started Then https://github.com/facebook/react-native-fbsdk (up to linking) Then follow https://developers.facebook.com/docs/react-native/login/ up until the LoginManager section

Expected Behavior

Just add a barebones FBLoginButton to a simple page

Code Example

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
const { FBLoginButton } = require('./components/FBLoginButton');

export default function App() {
  return (
    <div>
      <View style={styles.container}>
        <Text>Yo what's up it's beep.</Text>
      </View>
      <FBLoginButton />
    </div>
  );
}

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

FBLoginButton.js

import React, { Component } from 'react';
import { View } from 'react-native';
import { LoginButton } from 'react-native-fbsdk';

export default class FBLoginButton extends Component {
  render() {
    return (
      <View>
        <LoginButton
          publishPermissions={["email"]}
          onLoginFinished={
            (error, result) => {
              if (error) {
                alert("Login failed with error: " + error.message);
              } else if (result.isCancelled) {
                alert("Login was cancelled");
              } else {
                alert("Login was successful with permissions: " + result.grantedPermissions)
              }
            }
          }
          onLogoutFinished={() => alert("User logged out")}/>
      </View>
    );
  }
};

module.exports = FBLoginButton;

babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    sourceType: 'unambiguous',
  };
};

Repo

Environment

System: OS: Windows 10 10.0.18362 CPU: (8) x64 Intel(R) Core(TM) i7-4790 CPU @ 3.60GHz Memory: 2.37 GB / 7.94 GB Binaries: Node: 12.16.1 - C:\Program Files\nodejs\node.EXE npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD npmPackages: react: ~16.9.0 => 16.9.0 react-native: https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz => 0.61.4

facebookarchive / react-native-fbsdk