title: React Native error Element type is invalid: expected a string
body: <p>I am using <strong>react-native-sass-transformer</strong> package with <strong>React Native</strong>, and I cannot get past the following error:</p>
  <pre><code>Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
  
  Check the render method of `App`.
  
  This error is located at:
  in RCTView (created by View)
  in View (created by ScrollView)
  in RCTScrollView (created by ScrollView)
  in ScrollView (created by ScrollView)
  in ScrollView (created by App)
  in App (created by ExpoRoot)
  in ExpoRoot
  in RCTView (created by View)
  in View (created by AppContainer)
  in RCTView (created by View)
  in View (created by AppContainer)
  in AppContainer
  at node_modules\react-native\Libraries\LogBox\LogBox.js:149:8 in registerError
  at node_modules\react-native\Libraries\LogBox\LogBox.js:60:8 in errorImpl
  at node_modules\react-native\Libraries\LogBox\LogBox.js:34:4 in console.error
  at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
  at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException
  at node_modules\react-native\Libraries\Core\ExceptionsManager.js:172:19 in handleException
  at node_modules\react-native\Libraries\Core\ReactFiberErrorDialog.js:43:2 in showErrorDialog
  at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15792:34 in logCapturedError
  at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15884:20 in update.callback
  at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:7199:2 in callCallback
  at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:7220:20 in commitUpdateQueue
  at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:16632:25 in commitLifeCycles
  at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19216:22 in commitLayoutEffects
  at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:93:4 in invokeGuardedCallbackProd
  at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:318:2 in invokeGuardedCallback
  at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18952:29 in commitRootImpl
  at node_modules\scheduler\cjs\scheduler.development.js:468:23 in unstable_runWithPriority
  at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18791:17 in commitRoot
  at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18192:12 in performSyncWorkOnRoot
  at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5911:33 in runWithPriority$argument_1
  at node_modules\scheduler\cjs\scheduler.development.js:468:23 in unstable_runWithPriority
  at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5906:23 in flushSyncCallbackQueueImpl
  at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5893:28 in flushSyncCallbackQueue
  at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17745:30 in scheduleUpdateOnFiber
  at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:21484:23 in updateContainer
  at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:22144:17 in render
  at node_modules\react-native\Libraries\ReactNative\renderApplication.js:58:4 in renderApplication        
  at node_modules\react-native\Libraries\ReactNative\AppRegistry.js:117:25 in runnables.appKey.run
  at node_modules\react-native\Libraries\ReactNative\AppRegistry.js:202:4 in runApplication
  at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:414:4 in __callFunction
  at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:113:6 in __guard$argument_0
  at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:365:10 in __guard
  at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112:4 in callFunctionReturnFlushedQueue
  </code></pre>
  <p>I have added the code inside <code>metro.config.js</code> and <code>app.json</code> as specified <a href="https://blog.logrocket.com/sass-react-native-guide/" rel="nofollow noreferrer">here</a>.</p>
  <p>My code inside <code>App.js</code>:</p>
  <pre><code>import { ScrollView, StyleSheet } from 'react-native';
  
  import LoginPage from './src/Components/Pages/LoginPage/LoginPage';
  
  export default function App() {
      return (
          &lt;ScrollView style={styles.container}&gt;
              &lt;LoginPage /&gt;
          &lt;/ScrollView&gt;
      );
  }
  
  const styles = StyleSheet.create({
      container: {
          flex: 1
      }
  });
  </code></pre>
  <p><code>LoginPage.jsx</code>:</p>
  <pre><code>import { View } from 'react-native';
  const LoginPage = () =&gt; {
      return (
          &lt;View&gt;&lt;/View&gt;
      );
  };
  
  export default LoginPage;
  </code></pre>
  <p>Even if I revert the changes made for <strong>react-native-sass-transformer</strong>, the error persists. I do not have any idea of what to try.</p>