fix: JS-0464 (#362)

apps/web/.eslintrc.json

@@ -21,6 +21,7 @@
     "react/prop-types": "off",
     "react/no-unescaped-entities": "off",
     "react/jsx-no-useless-fragment": 2,
+    "react/react-in-jsx-scope": "error",
     "no-use-before-define": ["error"],
     "no-unused-vars": "off",
     "unused-imports/no-unused-imports": "error",

apps/web/src/components/Channel/Activities/CollectedNFTs.tsx

@@ -3,6 +3,7 @@ import { Loader } from '@components/UIElements/Loader'
 import { NoDataFound } from '@components/UIElements/NoDataFound'
 import { POLYGON_CHAIN_ID, SCROLL_ROOT_MARGIN } from '@utils/constants'
 import type { FC } from 'react'
+import React from 'react'
 import { useInView } from 'react-cool-inview'
 import type { Nft, Profile } from 'src/types/lens'
 import { useProfileNfTsQuery } from 'src/types/lens'

apps/web/src/components/Channel/Activities/MirroredVideos.tsx

@@ -4,6 +4,7 @@ import { Loader } from '@components/UIElements/Loader'
 import { NoDataFound } from '@components/UIElements/NoDataFound'
 import { LENS_CUSTOM_FILTERS, SCROLL_ROOT_MARGIN } from '@utils/constants'
 import type { FC } from 'react'
+import React from 'react'
 import { useInView } from 'react-cool-inview'
 import type { Profile } from 'src/types/lens'
 import {

apps/web/src/components/Channel/Activities/index.tsx

@@ -3,6 +3,7 @@ import { Analytics, TRACK } from '@utils/analytics'
 import clsx from 'clsx'
 import { useRouter } from 'next/router'
 import type { FC } from 'react'
+import React from 'react'
 import {
   AiOutlineComment,
   AiOutlineInfoCircle,

apps/web/src/components/Channel/index.tsx

@@ -3,7 +3,7 @@ import ChannelShimmer from '@components/Shimmers/ChannelShimmer'
 import useAppStore from '@lib/store'
 import { Analytics, TRACK } from '@utils/analytics'
 import { useRouter } from 'next/router'
-import { useEffect } from 'react'
+import React, { useEffect } from 'react'
 import Custom404 from 'src/pages/404'
 import Custom500 from 'src/pages/500'
 import type { Profile } from 'src/types/lens'

apps/web/src/components/Common/Footer.tsx

@@ -8,6 +8,7 @@ import {
 } from '@utils/constants'
 import { DISCORD, PRIVACY } from '@utils/url-path'
 import Link from 'next/link'
+import React from 'react'
 
 const Footer = () => {
   return (

apps/web/src/components/Common/MobileBottomNav.tsx

@@ -2,6 +2,7 @@ import { BYTES, EXPLORE, FEED, HOME, UPLOAD } from '@utils/url-path'
 import clsx from 'clsx'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import React from 'react'
 
 import BytesOutline from './Icons/BytesOutline'
 import ExploreOutline from './Icons/ExploreOutline'

apps/web/src/components/Common/Players/PlayerContextMenu.tsx

@@ -2,7 +2,7 @@ import { LENSTUBE_URL } from '@utils/constants'
 import useCopyToClipboard from '@utils/hooks/useCopyToClipboard'
 import useOutsideClick from '@utils/hooks/useOutsideClick'
 import { useRouter } from 'next/router'
-import { forwardRef, useRef } from 'react'
+import React, { forwardRef, useRef } from 'react'
 import toast from 'react-hot-toast'
 import { AiOutlineLink } from 'react-icons/ai'
 import { MdOutlineLoop } from 'react-icons/md'

apps/web/src/components/Common/Search/GlobalSearchBar.tsx

@@ -11,7 +11,7 @@ import useDebounce from '@utils/hooks/useDebounce'
 import useOutsideClick from '@utils/hooks/useOutsideClick'
 import clsx from 'clsx'
 import type { FC } from 'react'
-import { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import type { Profile } from 'src/types/lens'
 import {
   SearchProfilesDocument,

apps/web/src/components/Common/Sidebar.tsx

@@ -6,6 +6,7 @@ import clsx from 'clsx'
 import dynamic from 'next/dynamic'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import React from 'react'
 
 import Footer from './Footer'
 import BytesOutline from './Icons/BytesOutline'

apps/web/src/components/Explore/index.tsx

@@ -1,6 +1,6 @@
 import MetaTags from '@components/Common/MetaTags'
 import { Analytics, TRACK } from '@utils/analytics'
-import { useEffect } from 'react'
+import React, { useEffect } from 'react'
 
 import ExploreFeed from './Feed'
 

apps/web/src/components/Feed/index.tsx

@@ -1,6 +1,7 @@
 import MetaTags from '@components/Common/MetaTags'
 import HomeFeed from '@components/Feed/Feed'
 import type { NextPage } from 'next'
+import React from 'react'
 
 const Feed: NextPage = () => {
   return (

apps/web/src/components/Home/index.tsx

@@ -2,7 +2,7 @@ import MetaTags from '@components/Common/MetaTags'
 import Curated from '@components/Home/Curated'
 import { Analytics, TRACK } from '@utils/analytics'
 import type { NextPage } from 'next'
-import { useEffect } from 'react'
+import React, { useEffect } from 'react'
 
 import BytesSection from './BytesSection'
 import DispatcherAlert from './DispatcherAlert'

apps/web/src/components/Settings/DangerZone.tsx

@@ -8,7 +8,7 @@ import { formatNumber } from '@utils/functions/formatNumber'
 import getProfilePicture from '@utils/functions/getProfilePicture'
 import omitKey from '@utils/functions/omitKey'
 import { utils } from 'ethers'
-import { useState } from 'react'
+import React, { useState } from 'react'
 import toast from 'react-hot-toast'
 import Custom404 from 'src/pages/404'
 import type { CreateBurnProfileBroadcastItemResult } from 'src/types/lens'

apps/web/src/components/Settings/Permissions/Modules/index.tsx

@@ -3,7 +3,7 @@ import { Loader } from '@components/UIElements/Loader'
 import useAppStore from '@lib/store'
 import { WMATIC_TOKEN_ADDRESS } from '@utils/constants'
 import { getCollectModuleConfig } from '@utils/functions/getCollectModule'
-import { useState } from 'react'
+import React, { useState } from 'react'
 import toast from 'react-hot-toast'
 import type { ApprovedAllowanceAmount, Erc20 } from 'src/types/lens'
 import {

apps/web/src/components/Settings/Permissions/index.tsx

@@ -1,3 +1,5 @@
+import React from 'react'
+
 import DispatcherPermissions from './Dispatcher'
 import ModulePermissions from './Modules'
 

apps/web/src/components/UIElements/DropMenu.tsx

@@ -2,6 +2,7 @@ import { Menu, Transition } from '@headlessui/react'
 import clsx from 'clsx'
 import Link from 'next/link'
 import type { FC, ReactElement, ReactNode } from 'react'
+import React from 'react'
 
 interface Props {
   trigger: ReactNode

apps/web/src/components/UIElements/Input.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx'
 import type { InputHTMLAttributes } from 'react'
-import { forwardRef, useId } from 'react'
+import React, { forwardRef, useId } from 'react'
 
 interface Props extends InputHTMLAttributes<HTMLInputElement> {
   label?: string

apps/web/src/components/UIElements/InputMentions.tsx

@@ -2,7 +2,7 @@ import { LENS_CUSTOM_FILTERS } from '@utils/constants'
 import getProfilePicture from '@utils/functions/getProfilePicture'
 import clsx from 'clsx'
 import type { ComponentProps, FC } from 'react'
-import { useId } from 'react'
+import React, { useId } from 'react'
 import type { SuggestionDataItem } from 'react-mentions'
 import { Mention, MentionsInput } from 'react-mentions'
 import type { Profile } from 'src/types/lens'

apps/web/src/components/UIElements/Modal.tsx

@@ -1,7 +1,7 @@
 import { Dialog, Transition } from '@headlessui/react'
 import clsx from 'clsx'
 import type { FC } from 'react'
-import { Fragment } from 'react'
+import React, { Fragment } from 'react'
 import { MdOutlineClose } from 'react-icons/md'
 
 type Props = {

apps/web/src/components/UIElements/TextArea.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx'
 import type { ComponentProps } from 'react'
-import { forwardRef, useId } from 'react'
+import React, { forwardRef, useId } from 'react'
 
 interface Props extends ComponentProps<'textarea'> {
   label?: string

apps/web/src/components/Upload/ChooseThumbnail.tsx

@@ -12,7 +12,7 @@ import uploadToIPFS from '@utils/functions/uploadToIPFS'
 import clsx from 'clsx'
 import * as nsfwjs from 'nsfwjs'
 import type { ChangeEvent, FC } from 'react'
-import { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { BiImageAdd } from 'react-icons/bi'
 import type { IPFSUploadResult } from 'src/types/local'
 

apps/web/src/components/Upload/index.tsx

@@ -1,4 +1,5 @@
 import useAppStore from '@lib/store'
+import React from 'react'
 
 import DropZone from './DropZone'
 import UploadSteps from './UploadSteps'

apps/web/src/pages/404.tsx

@@ -3,6 +3,7 @@ import { APP_NAME } from '@utils/constants'
 import { HOME } from '@utils/url-path'
 import Head from 'next/head'
 import Link from 'next/link'
+import React from 'react'
 
 export default function Custom404() {
   return (

apps/web/src/pages/500.tsx

@@ -2,6 +2,7 @@ import { Button } from '@components/UIElements/Button'
 import { HOME } from '@utils/url-path'
 import Head from 'next/head'
 import Link from 'next/link'
+import React from 'react'
 
 export default function Custom500() {
   return (

apps/web/src/pages/_app.tsx

@@ -9,7 +9,7 @@ import { AUTH_ROUTES } from '@utils/data/auth-routes'
 import { AUTH } from '@utils/url-path'
 import type { AppProps } from 'next/app'
 import { useRouter } from 'next/router'
-import { lazy, Suspense, useEffect } from 'react'
+import React, { lazy, Suspense, useEffect } from 'react'
 
 export { reportWebVitals } from 'next-axiom'
 

apps/web/src/pages/_document.tsx

@@ -1,5 +1,6 @@
 import { STATIC_ASSETS } from '@utils/constants'
 import Document, { Head, Html, Main, NextScript } from 'next/document'
+import React from 'react'
 
 class LenstubeDocument extends Document {
   render() {

apps/web/src/pages/auth.tsx

@@ -4,7 +4,7 @@ import usePersistStore from '@lib/store/persist'
 import { APP_NAME } from '@utils/constants'
 import { HOME } from '@utils/url-path'
 import { useRouter } from 'next/router'
-import { useEffect } from 'react'
+import React, { useEffect } from 'react'
 
 export default function AuthRequiredPage() {
   const selectedChannelId = usePersistStore((state) => state.selectedChannelId)

apps/web/src/pages/notifications.tsx

@@ -1,4 +1,5 @@
 import Notifications from '@components/Notifications'
+import React from 'react'
 
 const notifications = () => {
   return <Notifications />