Error after installing Moralis V1

I am following this instructions https://v1docs.moralis.io/moralis-dapp/connect-the-sdk/connect-with-react, however, I’m getting error when I run my react project.

Compiled with problems:X

ERROR in ../../../../../node_modules/react-moralis/lib/index.esm.js 4:0-30

Module not found: Error: Can't resolve 'http' in '/Users/jomargozum/node_modules/react-moralis/lib'

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: { "http": require.resolve("stream-http") }'
	- install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "http": false }


ERROR in ../../../../../node_modules/react-moralis/lib/index.esm.js 5:0-31

Module not found: Error: Can't resolve 'https' in '/Users/jomargozum/node_modules/react-moralis/lib'

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/react-moralis/lib/index.esm.js 9:0-30

Module not found: Error: Can't resolve 'zlib' in '/Users/jomargozum/node_modules/react-moralis/lib'

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/xhr2-cookies/dist/xml-http-request.js 37:11-26

Module not found: Error: Can't resolve 'http' in '/Users/jomargozum/node_modules/xhr2-cookies/dist'

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: { "http": require.resolve("stream-http") }'
	- install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "http": false }


ERROR in ../../../../../node_modules/xhr2-cookies/dist/xml-http-request.js 39:12-28

Module not found: Error: Can't resolve 'https' in '/Users/jomargozum/node_modules/xhr2-cookies/dist'

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/xhr2-cookies/dist/xml-http-request.js 41:9-22

Module not found: Error: Can't resolve 'os' in '/Users/jomargozum/node_modules/xhr2-cookies/dist'

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 }

Here’s the error on the terminal whenever I install.

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"^18.2.0" from [email protected]
npm WARN   node_modules/react-dom
npm WARN     peer react-dom@">=17.0.0" from [email protected]
npm WARN     node_modules/react-moralis
npm WARN     1 more (the root project)
npm WARN   3 more (react-moralis, react-scripts, the root project)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.1" from [email protected]
npm WARN node_modules/react-moralis/node_modules/use-immer
npm WARN   use-immer@"^0.6.0" from [email protected]
npm WARN   node_modules/react-moralis
npm WARN 
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.1" from [email protected]
npm WARN   node_modules/react-moralis/node_modules/use-immer
npm WARN     use-immer@"^0.6.0" from [email protected]
npm WARN     node_modules/react-moralis

up to date, audited 1739 packages in 4s

259 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

Hello can you please read this on how to post code.

Which versions of moralis-v1 and react-moralis are you using?

You may need to use the older [email protected] and [email protected] in a new Create-React-App project.

Thanks Glad. I think I have a problem with my react version.

react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
render @ react-dom.development.js:29670
./src/index.tsx @ index.tsx:8
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
printWarning @ react.development.js:209
error @ react.development.js:183
resolveDispatcher @ react.development.js:1592
useState @ react.development.js:1621
MoralisProvider @ MoralisProvider.tsx:59
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26201
legacyCreateRootFromDOMContainer @ react-dom.development.js:29575
legacyRenderSubtreeIntoContainer @ react-dom.development.js:29601
render @ react-dom.development.js:29685
./src/index.tsx @ index.tsx:8
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
printWarning @ react.development.js:209
error @ react.development.js:183
resolveDispatcher @ react.development.js:1592
useState @ react.development.js:1621
MoralisProvider @ MoralisProvider.tsx:59
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26201
legacyCreateRootFromDOMContainer @ react-dom.development.js:29575
legacyRenderSubtreeIntoContainer @ react-dom.development.js:29601
render @ react-dom.development.js:29685
./src/index.tsx @ index.tsx:8
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
react.development.js:1622 Uncaught TypeError: Cannot read properties of null (reading 'useState')
    at useState (react.development.js:1622:1)
    at MoralisProvider (MoralisProvider.tsx:59:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
useState @ react.development.js:1622
MoralisProvider @ MoralisProvider.tsx:59
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26201
legacyCreateRootFromDOMContainer @ react-dom.development.js:29575
legacyRenderSubtreeIntoContainer @ react-dom.development.js:29601
render @ react-dom.development.js:29685
./src/index.tsx @ index.tsx:8
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
react-dom.development.js:18687 The above error occurred in the <MoralisProvider> component:

    at MoralisProvider (http://localhost:3000/static/js/bundle.js:194086:21)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
update.callback @ react-dom.development.js:18720
callCallback @ react-dom.development.js:13923
commitUpdateQueue @ react-dom.development.js:13944
commitLayoutEffectOnFiber @ react-dom.development.js:23391
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26201
legacyCreateRootFromDOMContainer @ react-dom.development.js:29575
legacyRenderSubtreeIntoContainer @ react-dom.development.js:29601
render @ react-dom.development.js:29685
./src/index.tsx @ index.tsx:8
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
react.development.js:1622 Uncaught TypeError: Cannot read properties of null (reading 'useState')
    at useState (react.development.js:1622:1)
    at MoralisProvider (MoralisProvider.tsx:59:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
    at renderRootSync (react-dom.development.js:26434:1)
    at performSyncWorkOnRoot (react-dom.development.js:26085:1)
useState @ react.development.js:1622
MoralisProvider @ MoralisProvider.tsx:59
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26201
legacyCreateRootFromDOMContainer @ react-dom.development.js:29575
legacyRenderSubtreeIntoContainer @ react-dom.development.js:29601
render @ react-dom.development.js:29685
./src/index.tsx @ index.tsx:8
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead.

Are you trying to migrate an existing project to a new React version? That would explain this warning. Make sure you update your index.js or app entry file.

Your other errors/warnings are more general:

Invalid hook call - this happens if you’re using hooks outside of another hook or a function component e.g. a component like <App />.

Cannot read properties of null (reading 'useState') - Check any use of useState and make sure you’ve imported it from react e.g. import { useState } from 'react';