title: You May need an appropriate loader to handle this file type error when using React UseState
body: <p>Rightbar.jsx code snippet:</p>
  <pre><code>import &quot;./rightbar.css&quot;
  import {Users} from &quot;../../dummyData&quot;
  import Online from &quot;../online/Online&quot;;
  import { useEffect, useState, useContext } from 'react';
  import axios from 'axios';
  import { AuthContext } from &quot;../../context/AuthContext&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  import { Add, Remove } from &quot;@material-ui/icons&quot;;
  
  export default function Rightbar({ user }) {
    const PF = process.env.REACT_APP_PUBLIC_FOLDER;
    const [subscriptions, setSubscriptions] = useState([]);
    const { user: currentUser, dispatch } = useContext(AuthContext);
    const [followed, setFollowed] = useState(
      currentUser.followings.includes(user?.id)
    ); 
  </code></pre>
  <p>Error:<br />
  <img src="https://i.stack.imgur.com/PdqVi.png" alt="error" /></p>
  <p>I've seen similar issues on here and have tried various solutions with installing file-loader and creating a webpack.config.js file. Although none of the solutions have seemed to work. I'm using npm instead of yarn. Any help would be appreciated!</p>