React: Issue with using googleapis and React togethe

Question

So I was getting two errors:

ERROR in ./src/index.js 8:0-24Module not found: Error: Can't resolve './App' in 'C:\Users\neevk\StudyConnect\main\ap-practice\src' Did you mean 'App.js'? BREAKING CHANGE: The request './App' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request. ERROR in ./src/index.js 9:0-48

Module not found: Error: Can't resolve './reportWebVitals' in 'C:\Users\neevk\StudyConnect\main\ap-practice\src' Did you mean 'reportWebVitals.js'? BREAKING CHANGE: The request './reportWebVitals' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request.

So as the error requested, I added the .js tag to my index.js file.
Index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals.js';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: (stack overflow won't let me put the link here)
reportWebVitals();

However when I turned ./App to ./App.js, I got 20 errors:

ERROR in ./node_modules/gaxios/build/src/gaxios.js 25:16-32 Module not found: Error: Can't resolve 'https' in 'C:\Users\neevk\StudyConnect\main\ap-practice\node_modules\gaxios\build\src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:

• add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'
• install 'https-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "https": false } ERROR in ./node_modules/gcp-metadata/build/src/gcp-residency.js 22:13-26 Module not found: Error: Can't resolve 'fs' in 'C:\Users\neevk\StudyConnect\main\ap-practice\node_modules\gcp-metadata\build\src' ERROR in ./node_modules/gcp-metadata/build/src/gcp-residency.js 23:13-26 Module not found: Error: Can't resolve 'os' in 'C:\Users\neevk\StudyConnect\main\ap-practice\node_modules\gcp-metadata\build\src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:

• add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
• install 'os-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "os": false } ERROR in ./node_modules/google-auth-library/build/src/auth/googleauth.js 20:24-48 Module not found: Error: Can't resolve 'child_process' in 'C:\Users\neevk\StudyConnect\main\ap-practice\node_modules\google-auth-library\build\src\auth' ERROR in ./node_modules/google-auth-library/build/src/auth/googleauth.js 21:11-24 Module not found: Error: Can't resolve 'fs' in 'C:\Users\neevk\StudyConnect\main\ap-practice\node_modules\google-auth-library\build\src\auth' ERROR in ./node_modules/google-auth-library/build/src/auth/googleauth.js 23:11-24 Module not found: Error: Can't resolve 'os' in 'C:\Users\neevk\StudyConnect\main\ap-practice\node_modules\google-auth-library\build\src\auth'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:

• add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
• install 'os-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "os": false } ERROR in ./node_modules/google-auth-library/build/src/auth/identitypoolclient.js 21:11-24 Module not found: Error: Can't resolve 'fs' in 'C:\Users\neevk\StudyConnect\main\ap-practice\node_modules\google-auth-library\build\src\auth' ERROR in ./node_modules/google-auth-library/build/src/auth/pluggable-auth-handler.js 22:21-45 Module not found: Error: Can't resolve 'child_process' in 'C:\Users\neevk\StudyConnect\main\ap-practice\node_modules\google-auth-library\build\src\auth' ERROR in ./node_modules/google-auth-library/build/src/auth/pluggable-auth-handler.js 23:11-24 Module not found: Error: Can't resolve 'fs' in 'C:\Users\neevk\StudyConnect\main\ap-practice\node_modules\google-auth-library\build\src\auth' ERROR in ./node_modules/google-auth-library/build/src/crypto/node/crypto.js 20:15-32 Module not found: Error: Can't resolve 'crypto' in 'C:\Users\neevk\StudyConnect\main\ap-practice\node_modules\google-auth-library\build\src\crypto\node' Did you mean './crypto'? Requests that should resolve in the current directory need to start with './'. Requests that start with a name are treated as module requests and resolve within module directories (node_modules, C:\Users\neevk\StudyConnect\main\ap-practice\node_modules). If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:

• add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
• install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "crypto": false } ERROR in ./node_modules/google-p12-pem/build/src/index.js 13:11-24 Module not found: Error: Can't resolve 'fs' in 'C:\Users\neevk\StudyConnect\main\ap-practice\node_modules\google-p12-pem\build\src' ERROR in ./node_modules/googleapis-common/build/src/discovery.js 19:11-24 Module not found: Error: Can't resolve 'fs' in 'C:\Users\neevk\StudyConnect\main\ap-practice\node_modules\googleapis-common\build\src' ERROR in ./node_modules/googleapis-common/build/src/http2.js 19:14-30 Module not found: Error: Can't resolve 'http2' in 'C:\Users\neevk\StudyConnect\main\ap-practice\node_modules\googleapis-common\build\src' Did you mean './http2'? Requests that should resolve in the current directory need to start with './'. Requests that start with a name are treated as module requests and resolve within module directories (node_modules, C:\Users\neevk\StudyConnect\main\ap-practice\node_modules). If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too. ERROR in ./node_modules/googleapis-common/build/src/http2.js 20:13-28 Module not found: Error: Can't resolve 'zlib' in 'C:\Users\neevk\StudyConnect\main\ap-practice\node_modules\googleapis-common\build\src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:

• add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
• install 'browserify-zlib' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "zlib": false } ERROR in ./node_modules/gtoken/build/src/index.js 13:11-24 Module not found: Error: Can't resolve 'fs' in 'C:\Users\neevk\StudyConnect\main\ap-practice\node_modules\gtoken\build\src' ERROR in ./node_modules/https-proxy-agent/dist/agent.js 38:30-44 Module not found: Error: Can't resolve 'net' in 'C:\Users\neevk\StudyConnect\main\ap-practice\node_modules\https-proxy-agent\dist' ERROR in ./node_modules/https-proxy-agent/dist/agent.js 39:30-44 Module not found: Error: Can't resolve 'tls' in 'C:\Users\neevk\StudyConnect\main\ap-practice\node_modules\https-proxy-agent\dist' ERROR in ./node_modules/jwa/index.js 3:13-30 Module not found: Error: Can't resolve 'crypto' in 'C:\Users\neevk\StudyConnect\main\ap-practice\node_modules\jwa'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:

• add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
• install 'crypto-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "crypto": false } ERROR in ./src/App.js 6:0-41 Module not found: Error: Can't resolve './components/auth' in 'C:\Users\neevk\StudyConnect\main\ap-practice\src' Did you mean 'auth.js'? BREAKING CHANGE: The request './components/auth' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request. ERROR in ./src/App.js 7:0-46 Module not found: Error: Can't resolve './config/firebase-config' in 'C:\Users\neevk\StudyConnect\main\ap-practice\src' Did you mean 'firebase-config.js'? BREAKING CHANGE: The request './config/firebase-config' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request.

So no matter what I do, I will always have an error.

App.js

import './App.css';
import { Auth } from './components/auth';
import { db } from './config/firebase-config';
import { useEffect, useState } from 'react';
import { GoogleAuthProvider, getAuth, signInWithPopup, signInWithEmailAndPassword, createUserWithEmailAndPassword, signOut, sendPasswordResetEmail } from "firebase/auth";
import { getFirestore, query, getDocs, collection, where, addDoc } from "firebase/firestore";
import React from 'react';
import { AiQuestionComponent } from './questionai2.js';
import ReactDOM from 'react-dom/client';

const App = () => {
  return (
    <div className='container'>
      <div className='auth'>
        <Auth />
      </div>
      <div>
        <AiQuestionComponent />
      </div>
    </div>
  );
};

export default App;

I think it is probably something with the imports, as I did not have these errors before.

Any help would be appreciated, thanks!