Import React types properly

src/lib/components/ContentCollectionProvider.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { ReactNode, useContext } from 'react';
 
 import NeosContext from '../../utils/context';
 import { useContentCollection } from '../../utils/hooks';
@@ -11,8 +11,8 @@ type ContentCollectionProviderProps = {
     children,
   }: {
     collectionProps: Record<string, string | boolean | undefined>;
-    children: React.ReactNode;
-  }) => React.ReactNode;
+    children: ReactNode;
+  }) => ReactNode;
 };
 
 export default function ContentCollectionProvider({ nodeName, children }: ContentCollectionProviderProps) {

src/lib/components/ContentComponent.tsx

@@ -1,8 +1,10 @@
+import { ReactNode } from 'react';
+
 import { useContentComponent } from '../../utils/hooks';
 
 type ContentComponentProps = {
   as?: keyof JSX.IntrinsicElements;
-  children: React.ReactNode;
+  children: ReactNode;
   [x: string]: any;
 };
 

src/server/components/ContentCollection.tsx

@@ -1,5 +1,4 @@
 import { ContextProps } from '../../types';
-import { useInBackend } from '../utils/hooks';
 import ContentCollectionProvider from './ContentCollectionProvider';
 
 type ContentCollectionProps = {
@@ -10,7 +9,7 @@ type ContentCollectionProps = {
 };
 
 const ContentCollection = async ({ ctx, as = 'div', nodeName, ...rest }: ContentCollectionProps) => {
-  const inBackend = useInBackend(ctx);
+  const inBackend = ctx.inBackend;
 
   const { className, ...restAttributes } = rest;
   const Component = as;

src/server/components/ContentCollectionProvider.tsx

@@ -1,6 +1,7 @@
+import { ReactNode } from 'react';
+
 import { ContextProps } from '../../types';
-import { useInBackend } from '../utils/hooks';
-import { useContentCollection } from '../utils/hooks';
+import { withContentCollection } from '../utils/hooks';
 import ContentComponentIncludes from './client/ContentComponentIncludes';
 import NodeRenderer from './NodeRenderer';
 
@@ -12,13 +13,13 @@ type ContentCollectionProviderProps = {
     children,
   }: {
     collectionProps: Record<string, string | boolean | undefined>;
-    children: React.ReactNode;
-  }) => React.ReactNode;
+    children: ReactNode;
+  }) => ReactNode;
 };
 
 const ContentCollectionProvider = async ({ ctx, nodeName, children }: ContentCollectionProviderProps) => {
-  const inBackend = useInBackend(ctx);
-  const { collectionNode, collectionProps } = await useContentCollection(ctx, nodeName)();
+  const inBackend = ctx.inBackend;
+  const { collectionNode, collectionProps } = await withContentCollection(ctx, nodeName);
 
   if (!collectionNode) {
     return null;

src/server/components/ContentComponent.tsx

@@ -1,10 +1,12 @@
+import { ReactNode } from 'react';
+
 import { ContextProps } from '../../types';
 import ContentComponentProvider from './ContentComponentProvider';
 
 type ContentComponentProps = {
   ctx: ContextProps;
   as?: keyof JSX.IntrinsicElements;
-  children: React.ReactNode;
+  children: ReactNode;
   [x: string]: any;
 };
 

src/server/components/ContentComponentProvider.tsx

@@ -1,6 +1,7 @@
+import { ReactNode } from 'react';
+
 import { ContextProps } from '../../types';
-import { useInBackend } from '../utils/hooks';
-import { useContentComponent } from '../utils/hooks';
+import { withContentComponent } from '../utils/hooks';
 import ContentComponentIncludes from './client/ContentComponentIncludes';
 
 type ContentComponentProviderProps = {
@@ -10,13 +11,13 @@ type ContentComponentProviderProps = {
     includes,
   }: {
     componentProps: Record<string, string | boolean | undefined>;
-    includes: React.ReactNode;
-  }) => React.ReactNode;
+    includes: ReactNode;
+  }) => ReactNode;
 };
 
 const ContentComponentProvider = async ({ ctx, children }: ContentComponentProviderProps) => {
-  const inBackend = useInBackend(ctx);
-  const { componentNode, componentProps } = await useContentComponent(ctx)();
+  const inBackend = ctx.inBackend;
+  const { componentNode, componentProps } = await withContentComponent(ctx);
 
   if (!componentNode) {
     return null;

src/server/components/Editable.tsx

@@ -1,5 +1,5 @@
 import { ContextProps } from '../../types';
-import { useEditPreviewMode, useInBackend, useNode } from '../utils/hooks';
+import { withEditPreviewMode, withNode } from '../utils/hooks';
 
 type EditableProps = {
   ctx: ContextProps;
@@ -9,12 +9,10 @@ type EditableProps = {
 };
 
 const Editable = async ({ ctx, as = 'div', property, ...rest }: EditableProps) => {
-  const inBackend = useInBackend(ctx);
-  const loadNode = useNode(ctx);
-  const loadEditPreviewMode = useEditPreviewMode(ctx);
+  const inBackend = ctx.inBackend;
 
-  const node = await loadNode();
-  const editPreviewMode = await loadEditPreviewMode();
+  const node = await withNode(ctx);
+  const editPreviewMode = await withEditPreviewMode(ctx);
 
   if (!node) {
     return null;

src/server/utils/nodeTypes.ts

@@ -1,3 +1,5 @@
+import { FC } from 'react';
+
 import { ContextProps, NeosNodeTypes } from '../../types';
 
 let nodeTypes: NeosNodeTypes;
@@ -6,6 +8,6 @@ export function initNodeTypes(data: NeosNodeTypes) {
   nodeTypes = data;
 }
 
-export function getNodeType(nodeTypeName: string): React.FC<{ ctx: ContextProps }> | undefined {
+export function getNodeType(nodeTypeName: string): FC<{ ctx: ContextProps }> | undefined {
   return nodeTypes?.[nodeTypeName];
 }

src/types/index.ts

@@ -1,3 +1,5 @@
+import { FC } from 'react';
+
 declare global {
   interface Document {
     __isInitialized?: boolean;
@@ -80,7 +82,7 @@ export interface BackendEditPreviewMode {
   options: Record<string, any> | null;
 }
 
-export type NeosNodeTypes = Record<string, React.FC<{ ctx: ContextProps }>>;
+export type NeosNodeTypes = Record<string, FC<{ ctx: ContextProps }>>;
 
 export interface NeosContextProps {
   node: NeosContentNode;

tsconfig.json

@@ -15,11 +15,7 @@
     "skipDefaultLibCheck": true,
     "baseUrl": ".",
     "outDir": ".",
-    "rootDir": "src",
-    "paths": {
-      "next": ["node_modules/next"],
-      "react": ["node_modules/react"]
-    }
+    "rootDir": "src"
   },
   "include": ["src/**/*"],
   "exclude": ["./*.js", "./*.d.ts"]