implements babel transpilation of config, removes customComponents logic

2020-09-21 17:31:19 -04:00
parent 9c28086ba4
commit fe99952561
64 changed files with 550 additions and 443 deletions
--- a/src/client/components/Routes.js
+++ b/src/client/components/Routes.js
@@ -2,9 +2,9 @@ import React, { useState, useEffect } from 'react';
 import {
  Route, Switch, withRouter, Redirect, useHistory,
 } from 'react-router-dom';
-import config from 'payload/config';
+import { useConfig } from './providers/Config';
 import List from './views/collections/List';
-import { useUser } from './data/User';
+import { useAuthentication } from './providers/Authentication';
 import DefaultTemplate from './templates/Default';
 import Dashboard from './views/Dashboard';
 import ForgotPassword from './views/ForgotPassword';
@@ -20,14 +20,14 @@ import Unauthorized from './views/Unauthorized';
 import Account from './views/Account';
 import Loading from './elements/Loading';

-const {
-  admin: { user: userSlug }, routes, collections, globals,
-} = config;
-
 const Routes = () => {
  const history = useHistory();
  const [initialized, setInitialized] = useState(null);
-  const { user, permissions, permissions: { canAccessAdmin } } = useUser();
+  const { user, permissions, permissions: { canAccessAdmin } } = useAuthentication();
+
+  const {
+    admin: { user: userSlug }, routes, collections, globals,
+  } = useConfig();

  useEffect(() => {
    requests.get(`${routes.api}/${userSlug}/init`).then((res) => res.json().then((data) => {
@@ -35,7 +35,7 @@ const Routes = () => {
        setInitialized(data.initialized);
      }
    }));
-  }, []);
+  }, [routes, userSlug]);

  useEffect(() => {
    history.replace();
--- a/src/client/components/elements/DeleteDocument/index.js
+++ b/src/client/components/elements/DeleteDocument/index.js
@@ -1,8 +1,8 @@
 import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import config from 'payload/config';
 import { useHistory } from 'react-router-dom';
 import { Modal, useModal } from '@faceless-ui/modal';
+import { useConfig } from '../../providers/Config';
 import Button from '../Button';
 import MinimalTemplate from '../../templates/Minimal';
 import useTitle from '../../../hooks/useTitle';
@@ -11,8 +11,6 @@ import { useStatusList } from '../Status';

 import './index.scss';

-const { serverURL, routes: { api, admin } } = config;
-
 const baseClass = 'delete-document';

 const DeleteDocument = (props) => {
@@ -30,6 +28,7 @@ const DeleteDocument = (props) => {
    } = {},
  } = props;

+  const { serverURL, routes: { api, admin } } = useConfig();
  const { replaceStatus } = useStatusList();
  const [deleting, setDeleting] = useState(false);
  const { closeAll, toggle } = useModal();
@@ -78,7 +77,7 @@ const DeleteDocument = (props) => {
        return addDefaultError();
      }
    });
-  }, [addDefaultError, closeAll, history, id, replaceStatus, singular, slug, title]);
+  }, [addDefaultError, closeAll, history, id, replaceStatus, singular, slug, title, admin, api, serverURL]);

  if (id) {
    return (
--- a/src/client/components/elements/DuplicateDocument/index.js
+++ b/src/client/components/elements/DuplicateDocument/index.js
@@ -1,19 +1,18 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
-import config from 'payload/config';
+import { useConfig } from '../../providers/Config';
 import Button from '../Button';
 import { useForm } from '../../forms/Form/context';

 import './index.scss';

-const { routes: { admin } } = config;
-
 const baseClass = 'duplicate';

 const Duplicate = ({ slug }) => {
  const { push } = useHistory();
  const { getData } = useForm();
+  const { routes: { admin } } = useConfig();

  const handleClick = useCallback(() => {
    const data = getData();
@@ -24,7 +23,7 @@ const Duplicate = ({ slug }) => {
        data,
      },
    });
-  }, [push, getData, slug]);
+  }, [push, getData, slug, admin]);

  return (
    <Button
--- a/src/client/components/elements/FileDetails/Meta/index.js
+++ b/src/client/components/elements/FileDetails/Meta/index.js
@@ -1,13 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import config from '../../../../config';
+import { useConfig } from '../../../providers/Config';
 import CopyToClipboard from '../../CopyToClipboard';
 import formatFilesize from '../../../../../uploads/formatFilesize';

 import './index.scss';

-const { serverURL } = config;
-
 const baseClass = 'file-meta';

 const Meta = (props) => {
@@ -15,6 +13,8 @@ const Meta = (props) => {
    filename, filesize, width, height, mimeType, staticURL,
  } = props;

+  const { serverURL } = useConfig();
+
  const fileURL = `${serverURL}${staticURL}/${filename}`;

  return (
@@ -35,18 +35,18 @@ const Meta = (props) => {
      <div className={`${baseClass}__size-type`}>
        {formatFilesize(filesize)}
        {(width && height) && (
-          <>
+          <React.Fragment>
            &nbsp;-&nbsp;
            {width}
            x
            {height}
-          </>
+          </React.Fragment>
        )}
        {mimeType && (
-          <>
+          <React.Fragment>
            &nbsp;-&nbsp;
            {mimeType}
-          </>
+          </React.Fragment>
        )}
      </div>
    </div>
--- a/src/client/components/elements/Localizer/index.js
+++ b/src/client/components/elements/Localizer/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import qs from 'qs';
-import config from 'payload/config';
+import { useConfig } from '../../providers/Config';
 import { useLocale } from '../../utilities/Locale';
 import { useSearchParams } from '../../utilities/SearchParams';
 import Popup from '../Popup';
@@ -10,9 +10,8 @@ import './index.scss';

 const baseClass = 'localizer';

-const { localization } = config;
-
 const Localizer = () => {
+  const { localization } = useConfig();
  const locale = useLocale();
  const searchParams = useSearchParams();

@@ -24,48 +23,46 @@ const Localizer = () => {
        <Popup
          align="left"
          button={locale}
-          render={({ close }) => {
-            return (
-              <div>
-                <span>Locales</span>
-                <ul>
-                  {locales.map((localeOption) => {
-                    const baseLocaleClass = `${baseClass}__locale`;
+          render={({ close }) => (
+            <div>
+              <span>Locales</span>
+              <ul>
+                {locales.map((localeOption) => {
+                  const baseLocaleClass = `${baseClass}__locale`;

-                    const localeClasses = [
-                      baseLocaleClass,
-                      locale === localeOption && `${baseLocaleClass}--active`,
-                    ];
+                  const localeClasses = [
+                    baseLocaleClass,
+                    locale === localeOption && `${baseLocaleClass}--active`,
+                  ];

-                    const newParams = {
-                      ...searchParams,
-                      locale: localeOption,
-                    };
+                  const newParams = {
+                    ...searchParams,
+                    locale: localeOption,
+                  };

-                    const search = qs.stringify(newParams);
+                  const search = qs.stringify(newParams);

-                    if (localeOption !== locale) {
-                      return (
-                        <li
-                          key={localeOption}
-                          className={localeClasses}
+                  if (localeOption !== locale) {
+                    return (
+                      <li
+                        key={localeOption}
+                        className={localeClasses}
+                      >
+                        <Link
+                          to={{ search }}
+                          onClick={close}
                        >
-                          <Link
-                            to={{ search }}
-                            onClick={close}
-                          >
-                            {localeOption}
-                          </Link>
-                        </li>
-                      );
-                    }
+                          {localeOption}
+                        </Link>
+                      </li>
+                    );
+                  }

-                    return null;
-                  })}
-                </ul>
-              </div>
-            );
-          }}
+                  return null;
+                })}
+              </ul>
+            </div>
+          )}
        />
      </div>
    );
--- a/src/client/components/elements/Nav/index.js
+++ b/src/client/components/elements/Nav/index.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { NavLink, Link, useHistory } from 'react-router-dom';
-import config from 'payload/config';
-import { useUser } from '../../data/User';
+import { useConfig } from '../../providers/Config';
+import { useAuthentication } from '../../providers/Authentication';
 import Chevron from '../../icons/Chevron';
 import LogOut from '../../icons/LogOut';
 import Menu from '../../icons/Menu';
@@ -14,18 +14,17 @@ import './index.scss';

 const baseClass = 'nav';

-const {
-  collections,
-  globals,
-  routes: {
-    admin,
-  },
-} = config;
-
 const Nav = () => {
-  const { permissions } = useUser();
+  const { permissions } = useAuthentication();
  const [menuActive, setMenuActive] = useState(false);
  const history = useHistory();
+  const {
+    collections,
+    globals,
+    routes: {
+      admin,
+    },
+  } = useConfig();

  const classes = [
    baseClass,
@@ -34,7 +33,7 @@ const Nav = () => {

  useEffect(() => history.listen(() => {
    setMenuActive(false);
-  }), []);
+  }), [history]);

  return (
    <aside className={classes}>
--- a/src/client/components/elements/PreviewButton/index.js
+++ b/src/client/components/elements/PreviewButton/index.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useForm } from '../../forms/Form/context';
-import { useUser } from '../../data/User';
+import { useAuthentication } from '../../providers/Authentication';
 import Button from '../Button';

 const baseClass = 'preview-btn';

 const PreviewButton = ({ generatePreviewURL }) => {
-  const { token } = useUser();
+  const { token } = useAuthentication();
  const { getFields } = useForm();
  const fields = getFields();

--- a/src/client/components/elements/Thumbnail/index.js
+++ b/src/client/components/elements/Thumbnail/index.js
@@ -1,13 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import config from '../../../config';
+import { useConfig } from '../../providers/Config';
 import FileGraphic from '../../graphics/File';
 import getThumbnail from '../../../../uploads/getThumbnail';

 import './index.scss';

-const { serverURL } = config;
-
 const baseClass = 'thumbnail';

 const Thumbnail = (props) => {
@@ -15,6 +13,8 @@ const Thumbnail = (props) => {
    filename, mimeType, staticURL, sizes, adminThumbnail, size,
  } = props;

+  const { serverURL } = useConfig();
+
  const thumbnail = getThumbnail(mimeType, staticURL, filename, sizes, adminThumbnail);

  const classes = [
--- a/src/client/components/elements/WhereBuilder/Condition/index.js
+++ b/src/client/components/elements/WhereBuilder/Condition/index.js
@@ -25,7 +25,6 @@ const Condition = (props) => {
    value,
    orIndex,
    andIndex,
-    collectionSlug,
  } = props;

  const [activeField, setActiveField] = useState({ operators: [] });
@@ -33,7 +32,7 @@ const Condition = (props) => {
  const debouncedValue = useDebounce(internalValue, 300);

  useEffect(() => {
-    const newActiveField = fields.find(field => value.field === field.value);
+    const newActiveField = fields.find((field) => value.field === field.value);

    if (newActiveField) {
      setActiveField(newActiveField);
@@ -57,9 +56,9 @@ const Condition = (props) => {
        <div className={`${baseClass}__inputs`}>
          <div className={`${baseClass}__field`}>
            <ReactSelect
-              value={fields.find(field => value.field === field.value)}
+              value={fields.find((field) => value.field === field.value)}
              options={fields}
-              onChange={field => dispatch({
+              onChange={(field) => dispatch({
                type: 'update',
                orIndex,
                andIndex,
@@ -69,9 +68,9 @@ const Condition = (props) => {
          </div>
          <div className={`${baseClass}__operator`}>
            <ReactSelect
-              value={activeField.operators.find(operator => value.operator === operator.value)}
+              value={activeField.operators.find((operator) => value.operator === operator.value)}
              options={activeField.operators}
-              onChange={operator => dispatch({
+              onChange={(operator) => dispatch({
                type: 'update',
                orIndex,
                andIndex,
@@ -81,7 +80,7 @@ const Condition = (props) => {
          </div>
          <div className={`${baseClass}__value`}>
            <RenderCustomComponent
-              path={`${collectionSlug}.fields.${activeField.value}.filter`}
+              CustomComponent={activeField?.props?.admin?.components?.filter}
              DefaultComponent={ValueComponent}
              componentProps={{
                ...activeField.props,
@@ -144,7 +143,6 @@ Condition.propTypes = {
  dispatch: PropTypes.func.isRequired,
  orIndex: PropTypes.number.isRequired,
  andIndex: PropTypes.number.isRequired,
-  collectionSlug: PropTypes.string.isRequired,
 };

 export default Condition;
--- a/src/client/components/elements/WhereBuilder/index.js
+++ b/src/client/components/elements/WhereBuilder/index.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useReducer } from 'react';
+import React, { useState, useReducer } from 'react';
 import PropTypes from 'prop-types';
 import useThrottledEffect from '../../../hooks/useThrottledEffect';
 import Button from '../Button';
@@ -43,7 +43,6 @@ const WhereBuilder = (props) => {
  const {
    collection,
    collection: {
-      slug,
      labels: {
        plural,
      } = {},
@@ -114,7 +113,6 @@ const WhereBuilder = (props) => {
                        </div>
                      )}
                      <Condition
-                        collectionSlug={slug}
                        value={where[orIndex][andIndex]}
                        orIndex={orIndex}
                        andIndex={andIndex}
@@ -162,7 +160,6 @@ const WhereBuilder = (props) => {
 WhereBuilder.propTypes = {
  handleChange: PropTypes.func.isRequired,
  collection: PropTypes.shape({
-    slug: PropTypes.string,
    fields: PropTypes.arrayOf(
      PropTypes.shape({}),
    ),
--- a/src/client/components/forms/DraggableSection/index.js
+++ b/src/client/components/forms/DraggableSection/index.js
@@ -27,7 +27,6 @@ const DraggableSection = (props) => {
    singularLabel,
    blockType,
    fieldTypes,
-    customComponentsPath,
    toggleRowCollapse,
    id,
    positionPanelVerticalAlignment,
@@ -100,7 +99,6 @@ const DraggableSection = (props) => {
              >
                <RenderFields
                  readOnly={readOnly}
-                  customComponentsPath={customComponentsPath}
                  fieldTypes={fieldTypes}
                  key={rowIndex}
                  permissions={permissions}
@@ -142,7 +140,6 @@ DraggableSection.defaultProps = {
  initialData: undefined,
  singularLabel: '',
  blockType: '',
-  customComponentsPath: '',
  isOpen: true,
  positionPanelVerticalAlignment: 'sticky',
  actionPanelVerticalAlignment: 'sticky',
@@ -164,7 +161,6 @@ DraggableSection.propTypes = {
  isOpen: PropTypes.bool,
  blockType: PropTypes.string,
  fieldTypes: PropTypes.shape({}).isRequired,
-  customComponentsPath: PropTypes.string,
  id: PropTypes.string.isRequired,
  positionPanelVerticalAlignment: PropTypes.oneOf(['top', 'center', 'sticky']),
  actionPanelVerticalAlignment: PropTypes.oneOf(['top', 'center', 'sticky']),
--- a/src/client/components/forms/Form/index.js
+++ b/src/client/components/forms/Form/index.js
@@ -8,7 +8,7 @@ import { useLocale } from '../../utilities/Locale';
 import { useStatusList } from '../../elements/Status';
 import { requests } from '../../../api';
 import useThrottledEffect from '../../../hooks/useThrottledEffect';
-import { useUser } from '../../data/User';
+import { useAuthentication } from '../../providers/Authentication';
 import fieldReducer from './fieldReducer';
 import initContextState from './initContextState';
 import reduceFieldsToValues from './reduceFieldsToValues';
@@ -39,7 +39,7 @@ const Form = (props) => {
  const history = useHistory();
  const locale = useLocale();
  const { replaceStatus, addStatus, clearStatus } = useStatusList();
-  const { refreshCookie } = useUser();
+  const { refreshCookie } = useAuthentication();

  const [modified, setModified] = useState(false);
  const [processing, setProcessing] = useState(false);
--- a/src/client/components/forms/RenderFields/index.js
+++ b/src/client/components/forms/RenderFields/index.js
@@ -16,7 +16,6 @@ export const useRenderedFields = () => useContext(RenderedFieldContext);
 const RenderFields = (props) => {
  const {
    fieldSchema,
-    customComponentsPath: customComponentsPathFromProps,
    fieldTypes,
    filter,
    permissions,
@@ -29,22 +28,19 @@ const RenderFields = (props) => {
  const [intersectionRef, entry] = useIntersect(intersectionObserverOptions);
  const isIntersecting = Boolean(entry?.isIntersecting);

-  const { customComponentsPath: customComponentsPathFromContext, operation: operationFromContext } = useRenderedFields();
+  const { operation: operationFromContext } = useRenderedFields();

  const operation = operationFromProps || operationFromContext;
-  const customComponentsPath = customComponentsPathFromProps || customComponentsPathFromContext;

  const [contextValue, setContextValue] = useState({
    operation,
-    customComponentsPath,
  });

  useEffect(() => {
    setContextValue({
      operation,
-      customComponentsPath,
    });
-  }, [operation, customComponentsPath]);
+  }, [operation]);

  useEffect(() => {
    if (isIntersecting && !hasIntersected) {
@@ -87,16 +83,13 @@ const RenderFields = (props) => {
                      readOnly = true;
                    }

-                    const customComponentPath = `${customComponentsPath}${field.name ? `${field.name}` : ''}`;
-
                    if (FieldComponent) {
                      return (
                        <RenderCustomComponent
                          key={i}
-                          path={`${customComponentPath}.field`}
+                          CustomComponent={field?.admin?.components?.field}
                          DefaultComponent={FieldComponent}
                          componentProps={{
-                            customComponentPath,
                            ...field,
                            path: field.path || field.name,
                            fieldTypes,
@@ -140,7 +133,6 @@ const RenderFields = (props) => {
 };

 RenderFields.defaultProps = {
-  customComponentsPath: '',
  filter: null,
  readOnly: false,
  permissions: {},
@@ -152,7 +144,6 @@ RenderFields.propTypes = {
  fieldSchema: PropTypes.arrayOf(
    PropTypes.shape({}),
  ).isRequired,
-  customComponentsPath: PropTypes.string,
  fieldTypes: PropTypes.shape({
    hidden: PropTypes.function,
  }).isRequired,
--- a/src/client/components/forms/field-types/Array/Array.js
+++ b/src/client/components/forms/field-types/Array/Array.js
@@ -6,7 +6,6 @@ import withCondition from '../../withCondition';
 import Button from '../../../elements/Button';
 import DraggableSection from '../../DraggableSection';
 import reducer from '../rowReducer';
-import { useRenderedFields } from '../../RenderFields';
 import { useForm } from '../../Form/context';
 import useFieldType from '../../useFieldType';
 import Error from '../../Error';
@@ -36,7 +35,6 @@ const ArrayFieldType = (props) => {
  } = props;

  const [rows, dispatchRows] = useReducer(reducer, []);
-  const { customComponentsPath } = useRenderedFields();
  const { initialState, dispatchFields } = useForm();

  const path = pathFromProps || name;
@@ -111,7 +109,6 @@ const ArrayFieldType = (props) => {
      removeRow={removeRow}
      moveRow={moveRow}
      path={path}
-      customComponentsPath={customComponentsPath}
      name={name}
      fieldTypes={fieldTypes}
      fields={fields}
@@ -166,8 +163,6 @@ const RenderArray = React.memo((props) => {
    removeRow,
    moveRow,
    path,
-    customComponentsPath,
-    name,
    fieldTypes,
    fields,
    permissions,
@@ -206,7 +201,6 @@ const RenderArray = React.memo((props) => {
                  moveRow={moveRow}
                  parentPath={path}
                  initNull={row.initNull}
-                  customComponentsPath={`${customComponentsPath}${name}.fields.`}
                  fieldTypes={fieldTypes}
                  fieldSchema={fields}
                  permissions={permissions.fields}
@@ -241,7 +235,6 @@ RenderArray.defaultProps = {
  rows: [],
  singularLabel: 'Row',
  path: '',
-  customComponentsPath: undefined,
  value: undefined,
  readOnly: false,
 };
@@ -255,7 +248,6 @@ RenderArray.propTypes = {
  ),
  singularLabel: PropTypes.string,
  path: PropTypes.string,
-  customComponentsPath: PropTypes.string,
  name: PropTypes.string.isRequired,
  value: PropTypes.number,
  onDragEnd: PropTypes.func.isRequired,
--- a/src/client/components/forms/field-types/Blocks/Blocks.js
+++ b/src/client/components/forms/field-types/Blocks/Blocks.js
@@ -9,7 +9,6 @@ import Button from '../../../elements/Button';
 import reducer from '../rowReducer';
 import { useForm } from '../../Form/context';
 import DraggableSection from '../../DraggableSection';
-import { useRenderedFields } from '../../RenderFields';
 import Error from '../../Error';
 import useFieldType from '../../useFieldType';
 import Popup from '../../../elements/Popup';
@@ -42,7 +41,6 @@ const Blocks = (props) => {
  const path = pathFromProps || name;

  const [rows, dispatchRows] = useReducer(reducer, []);
-  const { customComponentsPath } = useRenderedFields();
  const { initialState, dispatchFields } = useForm();

  const memoizedValidate = useCallback((value) => {
@@ -127,7 +125,6 @@ const Blocks = (props) => {
      removeRow={removeRow}
      moveRow={moveRow}
      path={path}
-      customComponentsPath={customComponentsPath}
      name={name}
      fieldTypes={fieldTypes}
      toggleCollapse={toggleCollapse}
@@ -183,8 +180,6 @@ const RenderBlocks = React.memo((props) => {
    removeRow,
    moveRow,
    path,
-    customComponentsPath,
-    name,
    fieldTypes,
    permissions,
    value,
@@ -235,7 +230,6 @@ const RenderBlocks = React.memo((props) => {
                      moveRow={moveRow}
                      toggleRowCollapse={() => toggleCollapse(i)}
                      parentPath={path}
-                      customComponentsPath={`${customComponentsPath}${name}.fields.`}
                      fieldTypes={fieldTypes}
                      permissions={permissions.fields}
                      fieldSchema={[
@@ -296,7 +290,6 @@ RenderBlocks.defaultProps = {
  rows: [],
  singularLabel: 'Row',
  path: '',
-  customComponentsPath: undefined,
  value: undefined,
  readOnly: false,
 };
@@ -310,7 +303,6 @@ RenderBlocks.propTypes = {
  ),
  singularLabel: PropTypes.string,
  path: PropTypes.string,
-  customComponentsPath: PropTypes.string,
  name: PropTypes.string.isRequired,
  value: PropTypes.number,
  onDragEnd: PropTypes.func.isRequired,
--- a/src/client/components/forms/field-types/Group/index.js
+++ b/src/client/components/forms/field-types/Group/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import RenderFields, { useRenderedFields } from '../../RenderFields';
+import RenderFields from '../../RenderFields';
 import withCondition from '../../withCondition';
 import FieldTypeGutter from '../../FieldTypeGutter';

@@ -22,8 +22,6 @@ const Group = (props) => {

  const path = pathFromProps || name;

-  const { customComponentsPath } = useRenderedFields();
-
  return (
    <div className="field-type group">
      <FieldTypeGutter />
@@ -36,7 +34,6 @@ const Group = (props) => {
          <RenderFields
            readOnly={readOnly}
            fieldTypes={fieldTypes}
-            customComponentsPath={`${customComponentsPath}${name}.fields.`}
            fieldSchema={fields.map((subField) => ({
              ...subField,
              path: `${path}${subField.name ? `.${subField.name}` : ''}`,
--- a/src/client/components/forms/field-types/Relationship/index.js
+++ b/src/client/components/forms/field-types/Relationship/index.js
@@ -3,7 +3,7 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 import some from 'async-some';
-import config from 'payload/config';
+import { useConfig } from '../../../providers/Config';
 import withCondition from '../../withCondition';
 import ReactSelect from '../../../elements/ReactSelect';
 import useFieldType from '../../useFieldType';
@@ -13,10 +13,6 @@ import { relationship } from '../../../../../fields/validations';

 import './index.scss';

-const {
-  serverURL, routes: { api }, collections,
-} = config;
-
 const maxResultsPerRequest = 10;

 const baseClass = 'relationship';
@@ -56,6 +52,7 @@ class Relationship extends Component {
  }

  getNextOptions = (params = {}) => {
+    const { config: { serverURL, routes: { api }, collections } } = this.props;
    const { errorLoading } = this.state;
    const { clear } = params;

@@ -165,7 +162,7 @@ class Relationship extends Component {
  }

  addOptions = (data, relation) => {
-    const { hasMultipleRelations } = this.props;
+    const { hasMultipleRelations, config: { collections } } = this.props;
    const { options, loadedIDs } = this.state;
    const collection = collections.find((coll) => coll.slug === relation);

@@ -263,6 +260,7 @@ class Relationship extends Component {
  }

  addOptionByID = async (id, relation) => {
+    const { config: { serverURL, routes: { api } } } = this.props;
    const { errorLoading } = this.state;
    if (!errorLoading) {
      const response = await fetch(`${serverURL}${api}/${relation}/${id}`);
@@ -377,9 +375,9 @@ Relationship.defaultProps = {

 Relationship.propTypes = {
  relationTo: PropTypes.oneOfType([
-    PropTypes.oneOf(Object.keys(collections).map((key) => collections[key].slug)),
+    PropTypes.string,
    PropTypes.arrayOf(
-      PropTypes.oneOf(Object.keys(collections).map((key) => collections[key].slug)),
+      PropTypes.string,
    ),
  ]).isRequired,
  required: PropTypes.bool,
@@ -401,6 +399,22 @@ Relationship.propTypes = {
    PropTypes.array,
    PropTypes.shape({}),
  ]),
+  config: PropTypes.shape({
+    serverURL: PropTypes.string,
+    routes: PropTypes.shape({
+      admin: PropTypes.string,
+      api: PropTypes.string,
+    }),
+    collections: PropTypes.arrayOf(
+      PropTypes.shape({
+        slug: PropTypes.string,
+        labels: PropTypes.shape({
+          singular: PropTypes.string,
+          plural: PropTypes.string,
+        }),
+      }),
+    ),
+  }).isRequired,
 };

 const RelationshipFieldType = (props) => {
@@ -408,6 +422,8 @@ const RelationshipFieldType = (props) => {
    relationTo, validate, path, name, required,
  } = props;

+  const config = useConfig;
+
  const hasMultipleRelations = Array.isArray(relationTo);

  const memoizedValidate = useCallback((value) => {
@@ -423,6 +439,7 @@ const RelationshipFieldType = (props) => {

  return (
    <Relationship
+      config={config}
      {...props}
      {...fieldType}
      hasMultipleRelations={hasMultipleRelations}
--- a/src/client/components/forms/field-types/Upload/Add/index.js
+++ b/src/client/components/forms/field-types/Upload/Add/index.js
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { Modal, useModal } from '@faceless-ui/modal';
-import config from '../../../../../config';
+import { useConfig } from '../../../../providers/Config';
 import MinimalTemplate from '../../../../templates/Minimal';
 import Form from '../../../Form';
 import Button from '../../../../elements/Button';
@@ -11,8 +11,6 @@ import Upload from '../../../../views/collections/Edit/Upload';

 import './index.scss';

-const { serverURL, routes: { api } } = config;
-
 const baseClass = 'add-upload-modal';

 const AddUploadModal = (props) => {
@@ -23,6 +21,7 @@ const AddUploadModal = (props) => {
    setValue,
  } = props;

+  const { serverURL, routes: { api } } = useConfig();
  const { closeAll } = useModal();

  const onSuccess = useCallback((json) => {
@@ -69,7 +68,6 @@ const AddUploadModal = (props) => {
            filter={(field) => (!field.position || (field.position && field.position !== 'sidebar'))}
            fieldTypes={fieldTypes}
            fieldSchema={collection.fields}
-            customComponentsPath={`${collection.slug}.fields.`}
          />
        </Form>
      </MinimalTemplate>
--- a/src/client/components/forms/field-types/Upload/SelectExisting/index.js
+++ b/src/client/components/forms/field-types/Upload/SelectExisting/index.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Modal, useModal } from '@faceless-ui/modal';
-import config from '../../../../../config';
+import { useConfig } from '../../../../providers/Config';
 import MinimalTemplate from '../../../../templates/Minimal';
 import Button from '../../../../elements/Button';
 import formatFields from '../../../../views/collections/List/formatFields';
@@ -12,8 +12,6 @@ import UploadGallery from '../../../../elements/UploadGallery';

 import './index.scss';

-const { serverURL, routes: { api } } = config;
-
 const baseClass = 'select-existing-upload-modal';

 const SelectExistingUploadModal = (props) => {
@@ -26,6 +24,7 @@ const SelectExistingUploadModal = (props) => {
    slug: modalSlug,
  } = props;

+  const { serverURL, routes: { api } } = useConfig();
  const { closeAll } = useModal();
  const [fields, setFields] = useState(collection.fields);
  const [listControls, setListControls] = useState({});
--- a/src/client/components/forms/field-types/Upload/index.js
+++ b/src/client/components/forms/field-types/Upload/index.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useModal } from '@faceless-ui/modal';
-import config from '../../../../config';
+import { useConfig } from '../../../providers/Config';
 import useFieldType from '../../useFieldType';
 import withCondition from '../../withCondition';
 import Button from '../../../elements/Button';
@@ -14,13 +14,12 @@ import SelectExistingModal from './SelectExisting';

 import './index.scss';

-const { collections, serverURL, routes: { api } } = config;
-
 const baseClass = 'upload';

 const Upload = (props) => {
  const { toggle } = useModal();
  const [internalValue, setInternalValue] = useState(undefined);
+  const { collections, serverURL, routes: { api } } = useConfig();

  const {
    path: pathFromProps,
--- a/src/client/components/graphics/Icon/index.js
+++ b/src/client/components/graphics/Icon/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import RenderCustomComponent from '../../utilities/RenderCustomComponent';
+import { useConfig } from '../../providers/Config';

 const PayloadIcon = () => (
  <svg
@@ -19,11 +20,24 @@ const PayloadIcon = () => (
  </svg>
 );

-const Icon = () => (
-  <RenderCustomComponent
-    path="graphics.Icon"
-    DefaultComponent={PayloadIcon}
-  />
-);
+const Icon = () => {
+  const {
+    admin: {
+      components: {
+        graphics: {
+          icon: CustomIcon,
+        } = {},
+      } = {},
+    } = {},
+  } = useConfig();
+
+  return (
+    <RenderCustomComponent
+      CustomComponent={CustomIcon}
+      path="graphics.Icon"
+      DefaultComponent={PayloadIcon}
+    />
+  );
+};

 export default Icon;
--- a/src/client/components/graphics/Logo/index.js
+++ b/src/client/components/graphics/Logo/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import RenderCustomComponent from '../../utilities/RenderCustomComponent';
+import { useConfig } from '../../providers/Config';

 const PayloadLogo = () => (
  <svg
@@ -49,11 +50,23 @@ const PayloadLogo = () => (
  </svg>
 );

-const Logo = () => (
-  <RenderCustomComponent
-    path="graphics.Logo"
-    DefaultComponent={PayloadLogo}
-  />
-);
+const Logo = () => {
+  const {
+    admin: {
+      components: {
+        graphics: {
+          Logo: CustomLogo,
+        } = {},
+      } = {},
+    } = {},
+  } = useConfig();
+
+  return (
+    <RenderCustomComponent
+      CustomComponent={CustomLogo}
+      DefaultComponent={PayloadLogo}
+    />
+  );
+};

 export default Logo;
--- a/src/client/components/index.js
+++ b/src/client/components/index.js
@@ -7,9 +7,10 @@ import { ModalProvider, ModalContainer } from '@faceless-ui/modal';
 import { SearchParamsProvider } from './utilities/SearchParams';
 import { LocaleProvider } from './utilities/Locale';
 import StatusList, { StatusListProvider } from './elements/Status';
-import { UserProvider } from './data/User';
+import { AuthenticationProvider } from './providers/Authentication';
 import Routes from './Routes';
 import getCSSVariable from '../../utilities/getCSSVariable';
+import ConfigProvider from './providers/Config/Provider';

 import '../scss/app.scss';

@@ -24,28 +25,30 @@ const Index = () => {
  };

  return (
-    <WindowInfoProvider {...windowInfoProps}>
-      <ScrollInfoProvider>
-        <Router>
-          <ModalProvider
-            classPrefix="payload"
-            zIndex={parseInt(getCSSVariable('z-modal'), 10)}
-          >
-            <UserProvider>
-              <StatusListProvider>
-                <SearchParamsProvider>
-                  <LocaleProvider>
-                    <StatusList />
-                    <Routes />
-                  </LocaleProvider>
-                </SearchParamsProvider>
-              </StatusListProvider>
-              <ModalContainer />
-            </UserProvider>
-          </ModalProvider>
-        </Router>
-      </ScrollInfoProvider>
-    </WindowInfoProvider>
+    <ConfigProvider>
+      <WindowInfoProvider {...windowInfoProps}>
+        <ScrollInfoProvider>
+          <Router>
+            <ModalProvider
+              classPrefix="payload"
+              zIndex={parseInt(getCSSVariable('z-modal'), 10)}
+            >
+              <AuthenticationProvider>
+                <StatusListProvider>
+                  <SearchParamsProvider>
+                    <LocaleProvider>
+                      <StatusList />
+                      <Routes />
+                    </LocaleProvider>
+                  </SearchParamsProvider>
+                </StatusListProvider>
+                <ModalContainer />
+              </AuthenticationProvider>
+            </ModalProvider>
+          </Router>
+        </ScrollInfoProvider>
+      </WindowInfoProvider>
+    </ConfigProvider>
  );
 };

--- a/src/client/components/modals/LeaveWithoutSaving/index.js
+++ b/src/client/components/modals/LeaveWithoutSaving/index.js
@@ -3,7 +3,7 @@ import NavigationPrompt from 'react-router-navigation-prompt';
 import { useFormModified } from '../../forms/Form/context';
 import MinimalTemplate from '../../templates/Minimal';
 import Button from '../../elements/Button';
-import { useUser } from '../../data/User';
+import { useAuthentication } from '../../providers/Authentication';

 import './index.scss';

@@ -11,7 +11,7 @@ const modalSlug = 'leave-without-saving';

 const LeaveWithoutSaving = () => {
  const modified = useFormModified();
-  const { user } = useUser();
+  const { user } = useAuthentication();

  return (
    <NavigationPrompt when={modified && user}>
--- a/src/client/components/modals/StayLoggedIn/index.js
+++ b/src/client/components/modals/StayLoggedIn/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import { useModal, Modal } from '@faceless-ui/modal';
-import config from 'payload/config';
+import { useConfig } from '../../providers/Config';
 import MinimalTemplate from '../../templates/Minimal';
 import Button from '../../elements/Button';

@@ -10,11 +10,10 @@ import './index.scss';

 const baseClass = 'stay-logged-in';

-const { routes: { admin } } = config;
-
 const StayLoggedInModal = (props) => {
  const { refreshCookie } = props;
  const history = useHistory();
+  const { routes: { admin } } = useConfig();
  const { closeAll: closeAllModals } = useModal();

  return (
--- a/src/client/components/providers/Authentication.js
+++ b/src/client/components/providers/Authentication.js
@@ -4,28 +4,29 @@ import React, {
 import jwt from 'jsonwebtoken';
 import { useLocation, useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import config from 'payload/config';
 import { useModal } from '@faceless-ui/modal';
+import { useConfig } from './Config';
 import { requests } from '../../api';
 import StayLoggedInModal from '../modals/StayLoggedIn';
 import useDebounce from '../../hooks/useDebounce';

-const {
-  admin: {
-    user: userSlug,
-  },
-  serverURL,
-  routes: {
-    admin,
-    api,
-  },
-} = config;
-
 const Context = createContext({});

-const UserProvider = ({ children }) => {
+const AuthenticationProvider = ({ children }) => {
  const [user, setUser] = useState(undefined);
  const [tokenInMemory, setTokenInMemory] = useState(null);
+
+  const {
+    admin: {
+      user: userSlug,
+    },
+    serverURL,
+    routes: {
+      admin,
+      api,
+    },
+  } = useConfig();
+
  const exp = user?.exp;

  const [permissions, setPermissions] = useState({ canAccessAdmin: null });
@@ -54,7 +55,7 @@ const UserProvider = ({ children }) => {
        }
      }, 1000);
    }
-  }, [setUser, history, exp]);
+  }, [setUser, history, exp, admin, api, serverURL, userSlug]);

  const setToken = useCallback((token) => {
    const decoded = jwt.decode(token);
@@ -112,7 +113,7 @@ const UserProvider = ({ children }) => {
    if (email) {
      getPermissions();
    }
-  }, [email]);
+  }, [email, api, serverURL]);

  useEffect(() => {
    let reminder = false;
@@ -145,7 +146,7 @@ const UserProvider = ({ children }) => {
    return () => {
      if (forceLogOut) clearTimeout(forceLogOut);
    };
-  }, [exp, history, closeAllModals]);
+  }, [exp, history, closeAllModals, admin]);

  return (
    <Context.Provider value={{
@@ -163,16 +164,16 @@ const UserProvider = ({ children }) => {
  );
 };

-UserProvider.propTypes = {
+AuthenticationProvider.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node,
  ]).isRequired,
 };

-const useUser = () => useContext(Context);
+const useAuthentication = () => useContext(Context);

 export {
-  UserProvider,
-  useUser,
+  AuthenticationProvider,
+  useAuthentication,
 };
--- a/src/client/components/providers/Config/Provider.js
+++ b/src/client/components/providers/Config/Provider.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import unsanitizedConfig from 'payload/unsanitizedConfig';
+import sanitizeConfig from '../../../../utilities/sanitizeConfig';
+import Context from './context';
+
+const sanitizedConfig = sanitizeConfig(unsanitizedConfig);
+
+const ConfigProvider = ({ children }) => (
+  <Context.Provider value={sanitizedConfig}>
+    {children}
+  </Context.Provider>
+);
+
+ConfigProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default ConfigProvider;
--- a/src/client/components/providers/Config/context.js
+++ b/src/client/components/providers/Config/context.js
@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const Context = createContext({});
+
+export default Context;
--- a/src/client/components/providers/Config/index.js
+++ b/src/client/components/providers/Config/index.js
@@ -0,0 +1 @@
+export { default as useConfig } from './useConfig';
--- a/src/client/components/providers/Config/useConfig.js
+++ b/src/client/components/providers/Config/useConfig.js
@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import Context from './context';
+
+const useConfig = () => useContext(Context);
+
+export default useConfig;
--- a/src/client/components/utilities/Locale/index.js
+++ b/src/client/components/utilities/Locale/index.js
@@ -2,22 +2,21 @@ import React, {
  createContext, useContext, useState, useEffect,
 } from 'react';
 import PropTypes from 'prop-types';
-import config from 'payload/config';
+import { useConfig } from '../../providers/Config';
 import { useSearchParams } from '../SearchParams';

-const { localization } = config;
-
-const defaultLocale = (localization && localization.defaultLocale) ? localization.defaultLocale : 'en';
 const Context = createContext({});

 export const LocaleProvider = ({ children }) => {
+  const { localization } = useConfig();
+  const defaultLocale = (localization && localization.defaultLocale) ? localization.defaultLocale : 'en';
  const [locale, setLocale] = useState(defaultLocale);
  const searchParams = useSearchParams();
  const localeFromParams = searchParams.locale;

  useEffect(() => {
    if (localeFromParams && localization.locales.indexOf(localeFromParams) > -1) setLocale(localeFromParams);
-  }, [localeFromParams]);
+  }, [localeFromParams, localization]);

  return (
    <Context.Provider value={locale}>
--- a/src/client/components/utilities/Meta/index.js
+++ b/src/client/components/utilities/Meta/index.js
@@ -1,14 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
-import config from 'payload/config';
+import { useConfig } from '../../providers/Config';
 import payloadFavicon from '../../../assets/images/favicon.svg';
 import payloadOgImage from '../../../assets/images/og-image.png';

 function Meta({ description, lang, meta, title, keywords }) {
+  const config = useConfig();
  const titleSuffix = config?.admin?.meta?.titleSuffix ?? '- Payload';
  const favicon = config?.admin?.meta?.favicon ?? payloadFavicon;
  const ogImage = config?.admin?.meta?.ogImage ?? payloadOgImage;
+
  return (
    <Helmet
      htmlAttributes={{
--- a/src/client/components/utilities/RenderCustomComponent/index.js
+++ b/src/client/components/utilities/RenderCustomComponent/index.js
@@ -1,35 +1,13 @@
-import React, { Suspense } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import customComponents from '../../customComponents';
-import Loading from '../../elements/Loading';

 const RenderCustomComponent = (props) => {
-  const { path, DefaultComponent, componentProps } = props;
+  const { CustomComponent, DefaultComponent, componentProps } = props;

-  if (path) {
-    const customComponentImport = path.split('.').reduce((res, prop) => {
-      const potentialRowIndex = parseInt(prop, 10);
-
-      if (!Number.isNaN(potentialRowIndex) && res.fields) {
-        return res.fields;
-      }
-
-      if (res) {
-        return res[prop];
-      }
-
-      return false;
-    }, customComponents);
-
-    if (customComponentImport) {
-      const CustomComponent = React.lazy(customComponentImport);
-
-      return (
-        <Suspense fallback={<Loading />}>
-          <CustomComponent {...componentProps} />
-        </Suspense>
-      );
-    }
+  if (CustomComponent) {
+    return (
+      <CustomComponent {...componentProps} />
+    );
  }

  return (
@@ -40,6 +18,7 @@ const RenderCustomComponent = (props) => {
 RenderCustomComponent.defaultProps = {
  path: undefined,
  componentProps: {},
+  CustomComponent: null,
 };

 RenderCustomComponent.propTypes = {
@@ -50,6 +29,7 @@ RenderCustomComponent.propTypes = {
    PropTypes.node,
    PropTypes.element,
  ]).isRequired,
+  CustomComponent: PropTypes.func,
  componentProps: PropTypes.shape({}),
 };

--- a/src/client/components/views/Account/Default.js
+++ b/src/client/components/views/Account/Default.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import format from 'date-fns/format';
-import config from 'payload/config';
+import { useConfig } from '../../providers/Config';
 import Eyebrow from '../../elements/Eyebrow';
 import Form from '../../forms/Form';
 import PreviewButton from '../../elements/PreviewButton';
@@ -18,8 +18,6 @@ import Loading from '../../elements/Loading';

 import './index.scss';

-const { serverURL, routes: { api, admin } } = config;
-
 const baseClass = 'account';

 const DefaultAccount = (props) => {
@@ -44,6 +42,8 @@ const DefaultAccount = (props) => {
    auth,
  } = collection;

+  const { serverURL, routes: { api, admin } } = useConfig();
+
  const classes = [
    baseClass,
  ].filter(Boolean).join(' ');
@@ -84,7 +84,6 @@ const DefaultAccount = (props) => {
                  filter={(field) => (!field.position || field?.admin?.position !== 'sidebar')}
                  fieldTypes={fieldTypes}
                  fieldSchema={fields}
-                  customComponentsPath={`${slug}.fields.`}
                />
              </React.Fragment>
            )}
@@ -127,7 +126,6 @@ const DefaultAccount = (props) => {
              position="sidebar"
              fieldTypes={fieldTypes}
              fieldSchema={fields}
-              customComponentsPath={`${slug}.fields.`}
            />
          </div>
          <ul className={`${baseClass}__meta`}>
--- a/src/client/components/views/Account/index.js
+++ b/src/client/components/views/Account/index.js
@@ -1,21 +1,29 @@
 import React, { useState, useEffect } from 'react';
-import config from 'payload/config';
 import { useLocation } from 'react-router-dom';
+import { useConfig } from '../../providers/Config';
 import { useStepNav } from '../../elements/StepNav';
-import { useUser } from '../../data/User';
+import { useAuthentication } from '../../providers/Authentication';
 import usePayloadAPI from '../../../hooks/usePayloadAPI';
 import DefaultAccount from './Default';
 import buildStateFromSchema from '../../forms/Form/buildStateFromSchema';

 import RenderCustomComponent from '../../utilities/RenderCustomComponent';

-const { serverURL, routes: { api }, collections } = config;
-
 const AccountView = () => {
  const { state: locationState } = useLocation();
  const { setStepNav } = useStepNav();
-  const { user, permissions } = useUser();
+  const { user, permissions } = useAuthentication();
  const [initialState, setInitialState] = useState({});
+  const {
+    serverURL,
+    routes: { api },
+    collections,
+    admin: {
+      components: {
+        account: CustomAccount,
+      } = {},
+    } = {},
+  } = useConfig();

  const collection = collections.find((coll) => coll.slug === user.collection);

@@ -52,7 +60,7 @@ const AccountView = () => {
  return (
    <RenderCustomComponent
      DefaultComponent={DefaultAccount}
-      path="account"
+      CustomComponent={CustomAccount}
      componentProps={{
        data,
        collection,
--- a/src/client/components/views/CreateFirstUser/index.js
+++ b/src/client/components/views/CreateFirstUser/index.js
@@ -1,27 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import config from 'payload/config';
+import { useConfig } from '../../providers/Config';
 import MinimalTemplate from '../../templates/Minimal';
 import Meta from '../../utilities/Meta';
 import Form from '../../forms/Form';
 import RenderFields from '../../forms/RenderFields';
 import fieldTypes from '../../forms/field-types';
 import FormSubmit from '../../forms/Submit';
-import { useUser } from '../../data/User';
+import { useAuthentication } from '../../providers/Authentication';

 import './index.scss';

-const {
-  admin: { user: userSlug }, collections, serverURL, routes: { admin, api },
-} = config;
-
-const userConfig = collections.find((collection) => collection.slug === userSlug);
-
 const baseClass = 'create-first-user';

 const CreateFirstUser = (props) => {
  const { setInitialized } = props;
-  const { setToken } = useUser();
+  const { setToken } = useAuthentication();
+  const {
+    admin: { user: userSlug }, collections, serverURL, routes: { admin, api },
+  } = useConfig();
+
+  const userConfig = collections.find((collection) => collection.slug === userSlug);

  const onSuccess = (json) => {
    if (json?.user?.token) {
--- a/src/client/components/views/Dashboard/Default.js
+++ b/src/client/components/views/Dashboard/Default.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
-import config from 'payload/config';
+import { useConfig } from '../../providers/Config';

 import Eyebrow from '../../elements/Eyebrow';
 import Card from '../../elements/Card';
@@ -9,12 +9,6 @@ import Button from '../../elements/Button';

 import './index.scss';

-const {
-  routes: {
-    admin,
-  },
-} = config;
-
 const baseClass = 'dashboard';

 const Dashboard = (props) => {
@@ -26,6 +20,12 @@ const Dashboard = (props) => {

  const { push } = useHistory();

+  const {
+    routes: {
+      admin,
+    },
+  } = useConfig();
+
  return (
    <div className={baseClass}>
      <Eyebrow />
--- a/src/client/components/views/Dashboard/index.js
+++ b/src/client/components/views/Dashboard/index.js
@@ -1,25 +1,30 @@
 import React, { useState, useEffect } from 'react';
-import config from 'payload/config';
-import { useUser } from '../../data/User';
+import { useConfig } from '../../providers/Config';
+import { useAuthentication } from '../../providers/Authentication';
 import { useStepNav } from '../../elements/StepNav';
 import RenderCustomComponent from '../../utilities/RenderCustomComponent';
 import DefaultDashboard from './Default';

-const {
-  collections,
-  globals,
-} = config;
-
 const Dashboard = () => {
-  const { permissions } = useUser();
+  const { permissions } = useAuthentication();
  const { setStepNav } = useStepNav();
  const [filteredGlobals, setFilteredGlobals] = useState([]);

+  const {
+    collections,
+    globals,
+    admin: {
+      components: {
+        dashboard: CustomDashboard,
+      } = {},
+    } = {},
+  } = useConfig();
+
  useEffect(() => {
    setFilteredGlobals(
      globals.filter((global) => permissions?.[global.slug]?.read?.permission),
    );
-  }, [permissions]);
+  }, [permissions, globals]);

  useEffect(() => {
    setStepNav([]);
@@ -28,7 +33,7 @@ const Dashboard = () => {
  return (
    <RenderCustomComponent
      DefaultComponent={DefaultDashboard}
-      path="views.List"
+      CustomComponent={CustomDashboard}
      componentProps={{
        globals: filteredGlobals,
        collections: collections.filter((collection) => permissions?.[collection.slug]?.read?.permission),
--- a/src/client/components/views/ForgotPassword/index.js
+++ b/src/client/components/views/ForgotPassword/index.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
-import config from 'payload/config';
+import { useConfig } from '../../providers/Config';
 import MinimalTemplate from '../../templates/Minimal';
 import StatusList, { useStatusList } from '../../elements/Status';
 import Form from '../../forms/Form';
@@ -8,25 +8,24 @@ import Email from '../../forms/field-types/Email';
 import FormSubmit from '../../forms/Submit';
 import Button from '../../elements/Button';
 import Meta from '../../utilities/Meta';
-import { useUser } from '../../data/User';
+import { useAuthentication } from '../../providers/Authentication';

 import './index.scss';

 const baseClass = 'forgot-password';

-const {
-  admin: { user: userSlug },
-  serverURL,
-  routes: {
-    admin,
-    api,
-  },
-} = config;
-
 const ForgotPassword = () => {
  const { addStatus } = useStatusList();
  const [hasSubmitted, setHasSubmitted] = useState(false);
-  const { user } = useUser();
+  const { user } = useAuthentication();
+  const {
+    admin: { user: userSlug },
+    serverURL,
+    routes: {
+      admin,
+      api,
+    },
+  } = useConfig();

  const handleResponse = (res) => {
    res.json()
--- a/src/client/components/views/Global/Default.js
+++ b/src/client/components/views/Global/Default.js
@@ -62,7 +62,6 @@ const DefaultGlobalView = (props) => {
              filter={(field) => (!field.position || (field.position && field.position !== 'sidebar'))}
              fieldTypes={fieldTypes}
              fieldSchema={fields}
-              customComponentsPath={`${slug}.fields.`}
            />
          </div>
        </div>
@@ -98,7 +97,6 @@ const DefaultGlobalView = (props) => {
              position="sidebar"
              fieldTypes={fieldTypes}
              fieldSchema={fields}
-              customComponentsPath={`${slug}.fields.`}
            />
          </div>
          {data && (
--- a/src/client/components/views/Global/index.js
+++ b/src/client/components/views/Global/index.js
@@ -1,32 +1,45 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useHistory, useLocation } from 'react-router-dom';
-import config from 'payload/config';
+import { useConfig } from '../../providers/Config';
 import { useStepNav } from '../../elements/StepNav';
 import usePayloadAPI from '../../../hooks/usePayloadAPI';
-import { useUser } from '../../data/User';
+import { useAuthentication } from '../../providers/Authentication';
 import { useLocale } from '../../utilities/Locale';

 import RenderCustomComponent from '../../utilities/RenderCustomComponent';
 import DefaultGlobal from './Default';
 import buildStateFromSchema from '../../forms/Form/buildStateFromSchema';

-const { serverURL, routes: { admin, api } } = config;
-
 const GlobalView = (props) => {
  const { state: locationState } = useLocation();
  const history = useHistory();
  const locale = useLocale();
  const { setStepNav } = useStepNav();
-  const { permissions } = useUser();
+  const { permissions } = useAuthentication();
  const [initialState, setInitialState] = useState({});

+  const {
+    serverURL,
+    routes: {
+      admin,
+      api,
+    },
+  } = useConfig();
+
  const { global } = props;

  const {
    slug,
    label,
    fields,
+    admin: {
+      components: {
+        views: {
+          edit: CustomEdit,
+        } = {},
+      } = {},
+    } = {},
  } = global;

  const onSave = (json) => {
@@ -68,7 +81,7 @@ const GlobalView = (props) => {
  return (
    <RenderCustomComponent
      DefaultComponent={DefaultGlobal}
-      path={`${slug}.views.Edit`}
+      CustomComponent={CustomEdit}
      componentProps={{
        data: dataToRender,
        permissions: globalPermissions,
--- a/src/client/components/views/Login/index.js
+++ b/src/client/components/views/Login/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link, useHistory } from 'react-router-dom';
-import config from 'payload/config';
+import { useConfig } from '../../providers/Config';
 import Logo from '../../graphics/Logo';
 import MinimalTemplate from '../../templates/Minimal';
 import Form from '../../forms/Form';
@@ -9,17 +9,16 @@ import Password from '../../forms/field-types/Password';
 import FormSubmit from '../../forms/Submit';
 import Button from '../../elements/Button';
 import Meta from '../../utilities/Meta';
-import { useUser } from '../../data/User';
+import { useAuthentication } from '../../providers/Authentication';

 import './index.scss';

 const baseClass = 'login';

-const { admin: { user: userSlug }, serverURL, routes: { admin, api } } = config;
-
 const Login = () => {
  const history = useHistory();
-  const { user, setToken } = useUser();
+  const { user, setToken } = useAuthentication();
+  const { admin: { user: userSlug }, serverURL, routes: { admin, api } } = useConfig();

  const onSuccess = (data) => {
    if (data.token) {
--- a/src/client/components/views/Logout/index.js
+++ b/src/client/components/views/Logout/index.js
@@ -1,21 +1,20 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import config from 'payload/config';
-import { useUser } from '../../data/User';
+import { useConfig } from '../../providers/Config';
+import { useAuthentication } from '../../providers/Authentication';
 import Minimal from '../../templates/Minimal';
 import Button from '../../elements/Button';
 import Meta from '../../utilities/Meta';

 import './index.scss';

-const { routes: { admin } } = config;
-
 const baseClass = 'logout';

 const Logout = (props) => {
  const { inactivity } = props;

-  const { logOut } = useUser();
+  const { logOut } = useAuthentication();
+  const { routes: { admin } } = useConfig();

  useEffect(() => {
    logOut();
--- a/src/client/components/views/NotFound/index.js
+++ b/src/client/components/views/NotFound/index.js
@@ -1,14 +1,13 @@
 import React, { useEffect } from 'react';
-import config from 'payload/config';
+import { useConfig } from '../../providers/Config';
 import Eyebrow from '../../elements/Eyebrow';
 import { useStepNav } from '../../elements/StepNav';
 import Button from '../../elements/Button';
 import Meta from '../../utilities/Meta';

-const { routes: { admin } } = config;
-
 const NotFound = () => {
  const { setStepNav } = useStepNav();
+  const { routes: { admin } } = useConfig;

  useEffect(() => {
    setStepNav([{
--- a/src/client/components/views/ResetPassword/index.js
+++ b/src/client/components/views/ResetPassword/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link, useHistory, useParams } from 'react-router-dom';
-import config from 'payload/config';
+import { useConfig } from '../../providers/Config';
 import MinimalTemplate from '../../templates/Minimal';
 import Form from '../../forms/Form';
 import Password from '../../forms/field-types/Password';
@@ -8,19 +8,18 @@ import ConfirmPassword from '../../forms/field-types/ConfirmPassword';
 import FormSubmit from '../../forms/Submit';
 import Button from '../../elements/Button';
 import Meta from '../../utilities/Meta';
-import { useUser } from '../../data/User';
+import { useAuthentication } from '../../providers/Authentication';

 import './index.scss';
 import HiddenInput from '../../forms/field-types/HiddenInput';

 const baseClass = 'reset-password';

-const { admin: { user: userSlug }, serverURL, routes: { admin, api } } = config;
-
 const ResetPassword = () => {
+  const { admin: { user: userSlug }, serverURL, routes: { admin, api } } = useConfig();
  const { token } = useParams();
  const history = useHistory();
-  const { user, setToken } = useUser();
+  const { user, setToken } = useAuthentication();

  const onSuccess = (data) => {
    if (data.token) {
--- a/src/client/components/views/Unauthorized/index.js
+++ b/src/client/components/views/Unauthorized/index.js
@@ -1,26 +1,29 @@
 import React from 'react';
-import config from 'payload/config';
+import { useConfig } from '../../providers/Config';
 import Button from '../../elements/Button';
 import Meta from '../../utilities/Meta';
 import MinimalTemplate from '../../templates/Minimal';

-const { routes: { admin } } = config;
+const Unauthorized = () => {
+  const { routes: { admin } } = useConfig();
+
+  return (
+    <MinimalTemplate className="unauthorized">
+      <Meta
+        title="Unauthorized"
+        description="Unauthorized"
+        keywords="Unauthorized, Payload, CMS"
+      />
+      <p>You are not allowed to access this page.</p>
+      <br />
+      <Button
+        el="link"
+        to={`${admin}/logout`}
+      >
+        Log out
+      </Button>
+    </MinimalTemplate>
+  );
+};

-const Unauthorized = () => (
-  <MinimalTemplate className="unauthorized">
-    <Meta
-      title="Unauthorized"
-      description="Unauthorized"
-      keywords="Unauthorized, Payload, CMS"
-    />
-    <p>You are not allowed to access this page.</p>
-    <br />
-    <Button
-      el="link"
-      to={`${admin}/logout`}
-    >
-      Log out
-    </Button>
-  </MinimalTemplate>
-);
 export default Unauthorized;
--- a/src/client/components/views/collections/Edit/Default.js
+++ b/src/client/components/views/collections/Edit/Default.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link, useRouteMatch } from 'react-router-dom';
 import format from 'date-fns/format';
-import config from 'payload/config';
+import { useConfig } from '../../../providers/Config';
 import Eyebrow from '../../../elements/Eyebrow';
 import Form from '../../../forms/Form';
 import Loading from '../../../elements/Loading';
@@ -21,12 +21,11 @@ import Upload from './Upload';

 import './index.scss';

-const { routes: { admin } } = config;
-
 const baseClass = 'collection-edit';

 const DefaultEditView = (props) => {
  const { params: { id } = {} } = useRouteMatch();
+  const { routes: { admin } } = useConfig();

  const {
    collection,
@@ -108,7 +107,6 @@ const DefaultEditView = (props) => {
                  filter={(field) => (!field?.admin?.position || (field?.admin?.position !== 'sidebar'))}
                  fieldTypes={fieldTypes}
                  fieldSchema={fields}
-                  customComponentsPath={`${slug}.fields.`}
                />
              </React.Fragment>
            )}
@@ -171,7 +169,6 @@ const DefaultEditView = (props) => {
                    position="sidebar"
                    fieldTypes={fieldTypes}
                    fieldSchema={fields}
-                    customComponentsPath={`${slug}.fields.`}
                  />
                </div>
                {isEditing && (
--- a/src/client/components/views/collections/Edit/index.js
+++ b/src/client/components/views/collections/Edit/index.js
@@ -1,17 +1,15 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Redirect, useRouteMatch, useHistory, useLocation } from 'react-router-dom';
-import config from 'payload/config';
+import { useConfig } from '../../../providers/Config';
 import { useStepNav } from '../../../elements/StepNav';
 import usePayloadAPI from '../../../../hooks/usePayloadAPI';
-import { useUser } from '../../../data/User';
+import { useAuthentication } from '../../../providers/Authentication';

 import RenderCustomComponent from '../../../utilities/RenderCustomComponent';
 import DefaultEdit from './Default';
 import buildStateFromSchema from '../../../forms/Form/buildStateFromSchema';

-const { serverURL, routes: { admin, api } } = config;
-
 const EditView = (props) => {
  const { collection, isEditing } = props;

@@ -22,16 +20,22 @@ const EditView = (props) => {
    },
    admin: {
      useAsTitle,
+      components: {
+        views: {
+          edit: CustomEdit,
+        } = {},
+      } = {},
    },
    fields,
  } = collection;

+  const { serverURL, routes: { admin, api } } = useConfig();
  const { params: { id } = {} } = useRouteMatch();
  const { state: locationState } = useLocation();
  const history = useHistory();
  const { setStepNav } = useStepNav();
  const [initialState, setInitialState] = useState({});
-  const { permissions } = useUser();
+  const { permissions } = useAuthentication();

  const onSave = (json) => {
    history.push(`${admin}/collections/${collection.slug}/${json?.doc?.id}`, {
@@ -95,7 +99,7 @@ const EditView = (props) => {
  return (
    <RenderCustomComponent
      DefaultComponent={DefaultEdit}
-      path={`${slug}.views.Edit`}
+      CustomComponent={CustomEdit}
      componentProps={{
        isLoading,
        data: dataToRender,
--- a/src/client/components/views/collections/List/Cell/Relationship/index.js
+++ b/src/client/components/views/collections/List/Cell/Relationship/index.js
@@ -1,13 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import config from 'payload/config';
-
-const { collections } = config;
+import { useConfig } from '../../../../../providers/Config';

 const RelationshipCell = (props) => {
  const { field, cellData } = props;
  const { relationTo } = field;
-
+  const { collections } = useConfig();
  const [data, setData] = useState();

  useEffect(() => {
--- a/src/client/components/views/collections/List/Cell/index.js
+++ b/src/client/components/views/collections/List/Cell/index.js
@@ -2,13 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import format from 'date-fns/format';
-import config from 'payload/config';
+import { useConfig } from '../../../../providers/Config';
 import RenderCustomComponent from '../../../../utilities/RenderCustomComponent';
 import Thumbnail from '../../../../elements/Thumbnail';
 import Relationship from './Relationship';

-const { routes: { admin } } = config;
-
 const DefaultCell = (props) => {
  const {
    field,
@@ -29,6 +27,8 @@ const DefaultCell = (props) => {
    } = {},
  } = props;

+  const { routes: { admin } } = useConfig();
+
  let WrapElement = 'span';

  const wrapElementProps = {};
@@ -89,14 +89,15 @@ const Cell = (props) => {
  const {
    colIndex,
    collection,
-    collection: {
-      slug,
-    },
    cellData,
    rowData,
    field,
    field: {
-      name,
+      admin: {
+        components: {
+          cell: CustomCell,
+        } = {},
+      } = {},
    },
  } = props;

@@ -109,7 +110,7 @@ const Cell = (props) => {
        collection,
        field,
      }}
-      path={`${slug}.fields.${name}.cell`}
+      CustomComponent={CustomCell}
      DefaultComponent={DefaultCell}
    />
  );
@@ -141,6 +142,11 @@ const propTypes = {
  field: PropTypes.shape({
    name: PropTypes.string,
    type: PropTypes.string,
+    admin: PropTypes.shape({
+      components: PropTypes.shape({
+        cell: PropTypes.func,
+      }),
+    }),
  }).isRequired,
 };

--- a/src/client/components/views/collections/List/Default.js
+++ b/src/client/components/views/collections/List/Default.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import config from 'payload/config';
+import { useConfig } from '../../../providers/Config';
 import UploadGallery from '../../../elements/UploadGallery';
 import Eyebrow from '../../../elements/Eyebrow';
 import Paginator from '../../../elements/Paginator';
@@ -13,8 +13,6 @@ import Meta from '../../../utilities/Meta';

 import './index.scss';

-const { routes: { admin } } = config;
-
 const baseClass = 'collection-list';

 const DefaultList = (props) => {
@@ -35,6 +33,7 @@ const DefaultList = (props) => {
    hasCreatePermission,
  } = props;

+  const { routes: { admin } } = useConfig();
  const history = useHistory();

  return (
--- a/src/client/components/views/collections/List/index.js
+++ b/src/client/components/views/collections/List/index.js
@@ -2,8 +2,8 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import queryString from 'qs';
 import { useLocation } from 'react-router-dom';
-import config from 'payload/config';
-import { useUser } from '../../../data/User';
+import { useConfig } from '../../../providers/Config';
+import { useAuthentication } from '../../../providers/Authentication';
 import usePayloadAPI from '../../../../hooks/usePayloadAPI';
 import DefaultList from './Default';
 import RenderCustomComponent from '../../../utilities/RenderCustomComponent';
@@ -11,8 +11,6 @@ import { useStepNav } from '../../../elements/StepNav';
 import formatFields from './formatFields';
 import buildColumns from './buildColumns';

-const { serverURL, routes: { api, admin } } = config;
-
 const ListView = (props) => {
  const {
    collection,
@@ -24,7 +22,8 @@ const ListView = (props) => {
    },
  } = props;

-  const { permissions } = useUser();
+  const { serverURL, routes: { api, admin } } = useConfig();
+  const { permissions } = useAuthentication();
  const location = useLocation();
  const { setStepNav } = useStepNav();

--- a/src/client/config.js
+++ b/src/client/config.js
@@ -1,6 +0,0 @@
-import config from 'payload/unsanitizedConfig';
-import sanitizeConfig from '../utilities/sanitizeConfig';
-
-const sanitizedConfig = sanitizeConfig(config);
-
-export default sanitizedConfig;
--- a/src/utilities/getConfig.js
+++ b/src/utilities/getConfig.js
@@ -1,7 +1,42 @@
-const findConfig = require('./findConfig');
-
 /* eslint-disable import/no-dynamic-require */
 /* eslint-disable global-require */
+const findConfig = require('./findConfig');
+
+const configPath = findConfig();
+
+require('ignore-styles');
+require('@babel/register')({
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: [
+          'defaults',
+          'not IE 11',
+          'not IE_Mob 11',
+          'maintained node versions',
+        ],
+      },
+    ],
+    '@babel/preset-react',
+  ],
+  plugins: [
+    ['module-resolver', {
+      alias: {
+        'payload/unsanitizedConfig': configPath,
+        '@payloadcms/payload$': '../',
+      },
+    }],
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-proposal-optional-chaining',
+    'add-module-exports',
+  ],
+  ignore: [
+    '*.scss',
+    '*.css',
+    'node_modules',
+  ],
+});

 const getConfig = (options = {}) => {
  if (!options.secret) {
@@ -12,7 +47,6 @@ const getConfig = (options = {}) => {
    throw new Error('Error: missing MongoDB connection URL.');
  }

-  const configPath = findConfig();
  const publicConfig = require(configPath);
  const email = { ...(publicConfig.email || {}), ...(options.email || {}) };

--- a/src/webpack/getWebpackDevConfig.js
+++ b/src/webpack/getWebpackDevConfig.js
@@ -24,15 +24,6 @@ module.exports = (config) => {
    resolveLoader: { modules: ['node_modules', path.join(__dirname, '../../node_modules')] },
    module: {
      rules: [
-        {
-          test: require.resolve('../client/components/customComponents'),
-          use: [
-            {
-              loader: 'val-loader',
-              options: config,
-            },
-          ],
-        },
        {
          test: /\.js$/,
          exclude: /node_modules\/(?!(@payloadcms\/payload)\/).*/,
@@ -47,15 +38,15 @@ module.exports = (config) => {
                      'defaults',
                      'not IE 11',
                      'not IE_Mob 11',
-                      'maintained node versions',
                    ],
                  },
                ],
                require.resolve('@babel/preset-react'),
              ],
              plugins: [
-                require.resolve('@babel/plugin-proposal-class-properties'),
-                require.resolve('@babel/plugin-proposal-optional-chaining'),
+                'add-module-exports',
+                '@babel/plugin-proposal-class-properties',
+                '@babel/plugin-proposal-optional-chaining',
              ],
            },
          },
@@ -115,7 +106,6 @@ module.exports = (config) => {
      modules: ['node_modules', path.resolve(__dirname, '../../node_modules')],
      alias: {
        'payload/unsanitizedConfig': config.paths.config,
-        'payload/config': path.resolve(__dirname, '../client/config.js'),
        '@payloadcms/payload$': mockModulePath,
      },
    },
--- a/src/webpack/getWebpackProdConfig.js
+++ b/src/webpack/getWebpackProdConfig.js
@@ -50,6 +50,7 @@ module.exports = (config) => {
                require.resolve('@babel/preset-react'),
              ],
              plugins: [
+                'add-module-exports',
                require.resolve('@babel/plugin-proposal-optional-chaining'),
                require.resolve('@babel/plugin-proposal-class-properties'),
              ],
				`@@ -0,0 +1 @@`
				`export { default as useConfig } from './useConfig';`