[plugin] Library updates (#10070)

* Expose lingui modules to plugins

* Add i18n object to plugin context

* Expose form types

* Update package.json requirements

* Externalize react and mantine when building @inventreedb/ui components

* Externalize lingui packages too

* Extern <AddItemButton />

src/frontend/CHANGELOG.md

@@ -2,6 +2,37 @@
 
 This file contains historical changelog information for the InvenTree UI components library.
 
+### 0.4.0 - July 2025
+
+Externalize React, Lingui and Mantine libraries in the plugin library build step to avoid version conflicts. This ensures that the components provided as part of the @inventreedb/ui package *does not bundle* the React and Mantine libraries, but instead expects them to be provided by the InvenTree server.
+
+This change fixes issues with version mismatches between the InvenTree server and the plugin, allowing plugins to utilize the common components provided by the InvenTree UI components library without conflicts.
+
+*Note: Without this change, the components introduced in `0.3.0` would not work correctly, as they are pre-compiled with a different React instance.*
+
+### New Functions
+
+Adds the following functions to the API:
+
+- `initPlugin`: Initializes the plugin with the provided context
+
+### New UI Components
+
+- `AddItemButton`: A common button component used throughout the InvenTree UI
+
+### New Types
+
+Exposes a number of new internal types related to the API forms interface:
+
+- ApiFormFieldChoice
+- ApiFormFieldHeader
+- ApiFormFieldType
+- ApiFormFieldSet
+- ApiFormProps
+- ApiFormModalProps
+- BulkEditApiFormModalProps
+
+
 ## 0.3.0 - July 2025
 
 Introduces new types and functions to enhance the InvenTree UI components API.

src/frontend/lib/components/AddItemButton.tsx

@@ -1,9 +1,6 @@
 import { IconPlus } from '@tabler/icons-react';
 
-import {
+import { ActionButton, type ActionButtonProps } from './ActionButton';
-  ActionButton,
-  type ActionButtonProps
-} from '@lib/components/ActionButton';
 
 /**
  * A generic icon button which is used to add or create a new item

src/frontend/lib/functions/Plugins.tsx

@@ -16,3 +16,14 @@ export function checkPluginVersion(context: InvenTreePluginContext) {
     );
   }
 }
+
+/**
+ * Helper function to initialize the plugin context.
+ */
+export function initPlugin(context: InvenTreePluginContext) {
+  // Check that the plugin version matches the expected version
+  checkPluginVersion(context);
+
+  // Activate the i18n context for the current locale
+  context.i18n?.activate?.(context.locale);
+}

src/frontend/lib/index.ts

@@ -15,6 +15,16 @@ export { UserRoles, UserPermissions } from './enums/Roles';
 export type { InvenTreePluginContext } from './types/Plugins';
 export type { RowAction, RowViewProps } from './types/Tables';
 
+export type {
+  ApiFormFieldChoice,
+  ApiFormFieldHeader,
+  ApiFormFieldType,
+  ApiFormFieldSet,
+  ApiFormProps,
+  ApiFormModalProps,
+  BulkEditApiFormModalProps
+} from './types/Forms';
+
 // Common utility functions
 export { apiUrl } from './functions/Api';
 export {
@@ -22,7 +32,10 @@ export {
   getDetailUrl,
   navigateToLink
 } from './functions/Navigation';
-export { checkPluginVersion } from './functions/Plugins';
+export {
+  checkPluginVersion,
+  initPlugin
+} from './functions/Plugins';
 
 export {
   formatCurrencyValue,
@@ -31,7 +44,11 @@ export {
 } from './functions/Formatting';
 
 // Common UI components
-export { ActionButton } from './components/ActionButton';
+export {
+  ActionButton,
+  type ActionButtonProps
+} from './components/ActionButton';
+export { AddItemButton } from './components/AddItemButton';
 export { ButtonMenu } from './components/ButtonMenu';
 export { ProgressBar } from './components/ProgressBar';
 export { PassFailButton, YesNoButton } from './components/YesNoButton';

src/frontend/lib/types/Plugins.tsx

@@ -1,3 +1,4 @@
+import type { I18n } from '@lingui/core';
 import type { MantineColorScheme, MantineTheme } from '@mantine/core';
 import type { QueryClient } from '@tanstack/react-query';
 import type { AxiosInstance } from 'axios';
@@ -43,6 +44,7 @@ export type InvenTreeFormsContext = {
  * @param theme - The current Mantine theme
  * @param colorScheme - The current Mantine color scheme (e.g. 'light' / 'dark')
  * @param host - The current host URL
+ * @param i18n - The i18n instance for translations (from @lingui/core)
  * @param locale - The current locale string (e.g. 'en' / 'de')
  * @param model - The model type associated with the rendered component (if applicable)
  * @param modelInformation - A dictionary of available model information
@@ -63,6 +65,7 @@ export type InvenTreePluginContext = {
   modelInformation: ModelDict;
   renderInstance: (props: Readonly<RenderInstanceProps>) => React.ReactNode;
   host: string;
+  i18n: I18n;
   locale: string;
   navigate: NavigateFunction;
   theme: MantineTheme;

src/frontend/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@inventreedb/ui",
     "description": "UI components for the InvenTree project",
-    "version": "0.3.1",
+    "version": "0.4.0",
     "private": false,
     "type": "module",
     "license": "MIT",
@@ -57,8 +57,8 @@
         "@fullcalendar/daygrid": "^6.1.15",
         "@fullcalendar/interaction": "^6.1.15",
         "@fullcalendar/react": "^6.1.15",
-        "@lingui/core": "^5.3.0",
+        "@lingui/core": "^5.3.1",
-        "@lingui/react": "^5.3.0",
+        "@lingui/react": "^5.3.1",
         "@mantine/carousel": "^7.16.0",
         "@mantine/charts": "^7.16.0",
         "@mantine/core": "^7.16.0",
@@ -109,9 +109,9 @@
         "@babel/preset-typescript": "^7.27.0",
         "@babel/runtime": "^7.27.0",
         "@codecov/vite-plugin": "^1.9.0",
-        "@lingui/babel-plugin-lingui-macro": "^5.3.0",
+        "@lingui/babel-plugin-lingui-macro": "^5.3.1",
         "@lingui/cli": "^5.3.1",
-        "@lingui/macro": "^5.3.0",
+        "@lingui/macro": "^5.3.1",
         "@playwright/test": "^1.52.0",
         "@types/node": "^22.13.14",
         "@types/qrcode": "^1.5.5",
@@ -131,6 +131,7 @@
         "vite": "^6.2.6",
         "vite-plugin-babel-macros": "^1.0.6",
         "vite-plugin-dts": "^4.5.3",
+        "vite-plugin-externals": "^0.6.2",
         "vite-plugin-istanbul": "^6.0.2"
     }
 }

src/frontend/src/components/forms/fields/TableField.tsx

@@ -5,10 +5,10 @@ import { IconExclamationCircle } from '@tabler/icons-react';
 import { type ReactNode, useCallback, useEffect, useMemo } from 'react';
 import type { FieldValues, UseControllerReturn } from 'react-hook-form';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import { identifierString } from '@lib/functions/Conversion';
 import type { ApiFormFieldType } from '@lib/types/Forms';
 import { InvenTreeIcon } from '../../../functions/icons';
-import { AddItemButton } from '../../buttons/AddItemButton';
 import { StandaloneField } from '../StandaloneField';
 
 export interface TableFieldRowProps {

src/frontend/src/components/plugins/PluginContext.tsx

@@ -17,6 +17,7 @@ import {
   INVENTREE_REACT_VERSION,
   type InvenTreePluginContext
 } from '@lib/types/Plugins';
+import { i18n } from '@lingui/core';
 import {
   useBulkEditApiFormModal,
   useCreateApiFormModal,
@@ -44,6 +45,7 @@ export const useInvenTreeContext = () => {
       },
       user: user,
       host: host,
+      i18n: i18n,
       locale: locale,
       api: api,
       queryClient: queryClient,

src/frontend/src/components/wizards/OrderPartsWizard.tsx

@@ -1,4 +1,5 @@
 import { ActionButton } from '@lib/components/ActionButton';
+import { AddItemButton } from '@lib/components/AddItemButton';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
 import { apiUrl } from '@lib/functions/Api';
@@ -14,7 +15,6 @@ import { usePurchaseOrderFields } from '../../forms/PurchaseOrderForms';
 import { useCreateApiFormModal } from '../../hooks/UseForm';
 import useWizard from '../../hooks/UseWizard';
 import { PartColumn } from '../../tables/ColumnRenderers';
-import { AddItemButton } from '../buttons/AddItemButton';
 import RemoveRowButton from '../buttons/RemoveRowButton';
 import { StandaloneField } from '../forms/StandaloneField';
 import Expand from '../items/Expand';

src/frontend/src/main.tsx

@@ -16,6 +16,10 @@ import * as ReactDOM from 'react-dom';
 import * as ReactDOMClient from 'react-dom/client';
 import './styles/overrides.css';
 
+// Lingui imports (required for plugin translation)
+import * as LinguiCore from '@lingui/core';
+import * as LinguiReact from '@lingui/react';
+
 import { getBaseUrl } from '@lib/functions/Navigation';
 import type { HostList } from '@lib/types/Server';
 import MainView from './views/MainView';
@@ -107,6 +111,8 @@ if (window.INVENTREE_SETTINGS.sentry_dsn) {
 (window as any).ReactDOMClient = ReactDOMClient;
 (window as any).MantineCore = MantineCore;
 (window as any).MantineNotifications = MantineNotifications;
+(window as any).LinguiCore = LinguiCore;
+(window as any).LinguiReact = LinguiReact;
 
 // Redirect to base url if on /
 if (window.location.pathname === '/') {

src/frontend/src/pages/part/PartStocktakeDetail.tsx

@@ -10,13 +10,13 @@ import {
 } from '@mantine/core';
 import { useCallback, useMemo, useState } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import { RowDeleteAction, RowEditAction } from '@lib/components/RowActions';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { UserRoles } from '@lib/enums/Roles';
 import { apiUrl } from '@lib/functions/Api';
 import type { TableColumn } from '@lib/types/Tables';
 import dayjs from 'dayjs';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { formatDate, formatPriceRange } from '../../defaults/formatters';
 import {
   generateStocktakeReportFields,

src/frontend/src/pages/part/pricing/PriceBreakPanel.tsx

@@ -3,6 +3,7 @@ import { BarChart } from '@mantine/charts';
 import { SimpleGrid } from '@mantine/core';
 import { useCallback, useMemo, useState } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import {
   type RowAction,
   RowDeleteAction,
@@ -13,7 +14,6 @@ import { UserRoles } from '@lib/enums/Roles';
 import { apiUrl } from '@lib/functions/Api';
 import type { ApiFormFieldSet } from '@lib/types/Forms';
 import type { TableColumn } from '@lib/types/Tables';
-import { AddItemButton } from '../../../components/buttons/AddItemButton';
 import { tooltipFormatter } from '../../../components/charts/tooltipFormatter';
 import { formatCurrency } from '../../../defaults/formatters';
 import {

src/frontend/src/tables/bom/BomTable.tsx

@@ -13,6 +13,7 @@ import { type ReactNode, useCallback, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { ActionButton } from '@lib/components/ActionButton';
+import { AddItemButton } from '@lib/components/AddItemButton';
 import {
   type RowAction,
   RowDeleteAction,
@@ -26,7 +27,6 @@ import { apiUrl } from '@lib/functions/Api';
 import { navigateToLink } from '@lib/functions/Navigation';
 import type { TableFilter } from '@lib/types/Filters';
 import type { TableColumn } from '@lib/types/Tables';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { Thumbnail } from '../../components/images/Thumbnail';
 import ImporterDrawer from '../../components/importer/ImporterDrawer';
 import { RenderPart } from '../../components/render/Part';

src/frontend/src/tables/build/BuildOrderTable.tsx

@@ -1,13 +1,13 @@
 import { t } from '@lingui/core/macro';
 import { useMemo } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import { ProgressBar } from '@lib/components/ProgressBar';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
 import { UserRoles } from '@lib/enums/Roles';
 import { apiUrl } from '@lib/functions/Api';
 import type { TableFilter } from '@lib/types/Filters';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { RenderUser } from '../../components/render/User';
 import { useBuildOrderFields } from '../../forms/BuildForms';
 import { useCreateApiFormModal } from '../../hooks/UseForm';

src/frontend/src/tables/build/BuildOutputTable.tsx

@@ -21,6 +21,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { ActionButton } from '@lib/components/ActionButton';
+import { AddItemButton } from '@lib/components/AddItemButton';
 import { ProgressBar } from '@lib/components/ProgressBar';
 import {
   type RowAction,
@@ -33,7 +34,6 @@ import { UserRoles } from '@lib/enums/Roles';
 import { apiUrl } from '@lib/functions/Api';
 import type { TableFilter } from '@lib/types/Filters';
 import type { TableColumn } from '@lib/types/Tables';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { StylishText } from '../../components/items/StylishText';
 import { useApi } from '../../contexts/ApiContext';
 import {

src/frontend/src/tables/company/AddressTable.tsx

@@ -1,6 +1,7 @@
 import { t } from '@lingui/core/macro';
 import { useCallback, useMemo, useState } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import {
   type RowAction,
   RowDeleteAction,
@@ -12,7 +13,6 @@ import { UserRoles } from '@lib/enums/Roles';
 import { apiUrl } from '@lib/functions/Api';
 import type { ApiFormFieldSet } from '@lib/types/Forms';
 import type { TableColumn } from '@lib/types/Tables';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import {
   useCreateApiFormModal,
   useDeleteApiFormModal,

src/frontend/src/tables/company/CompanyTable.tsx

@@ -2,6 +2,7 @@ import { t } from '@lingui/core/macro';
 import { useCallback, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import { type RowAction, RowEditAction } from '@lib/components/RowActions';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
@@ -9,7 +10,6 @@ import { UserRoles } from '@lib/enums/Roles';
 import { apiUrl } from '@lib/functions/Api';
 import { navigateToLink } from '@lib/functions/Navigation';
 import type { TableFilter } from '@lib/types/Filters';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { companyFields } from '../../forms/CompanyForms';
 import {
   useCreateApiFormModal,

src/frontend/src/tables/company/ContactTable.tsx

@@ -1,6 +1,7 @@
 import { t } from '@lingui/core/macro';
 import { useCallback, useMemo, useState } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import {
   type RowAction,
   RowDeleteAction,
@@ -14,7 +15,6 @@ import { getDetailUrl } from '@lib/functions/Navigation';
 import type { ApiFormFieldSet } from '@lib/types/Forms';
 import type { TableColumn } from '@lib/types/Tables';
 import { useNavigate } from 'react-router-dom';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { RenderInlineModel } from '../../components/render/Instance';
 import {
   useCreateApiFormModal,

src/frontend/src/tables/general/ExtraLineItemTable.tsx

@@ -1,6 +1,7 @@
 import { t } from '@lingui/core/macro';
 import { useCallback, useMemo, useState } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import {
   type RowAction,
   RowDeleteAction,
@@ -11,7 +12,6 @@ import type { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import type { UserRoles } from '@lib/enums/Roles';
 import { apiUrl } from '@lib/functions/Api';
 import type { TableColumn } from '@lib/types/Tables';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { formatCurrency } from '../../defaults/formatters';
 import { extraLineItemFields } from '../../forms/CommonForms';
 import {

src/frontend/src/tables/machine/MachineListTable.tsx

@@ -19,13 +19,13 @@ import { useQuery } from '@tanstack/react-query';
 import { useCallback, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import { YesNoButton } from '@lib/components/YesNoButton';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { apiUrl } from '@lib/functions/Api';
 import type { TableColumn } from '@lib/types/Tables';
 import type { InvenTreeTableProps } from '@lib/types/Tables';
 import { Trans } from '@lingui/react/macro';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import {
   DeleteItemAction,
   EditItemAction,

src/frontend/src/tables/part/PartCategoryTable.tsx

@@ -3,6 +3,7 @@ import { Group, Tooltip } from '@mantine/core';
 import { IconBell } from '@tabler/icons-react';
 import { useCallback, useMemo, useState } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import { type RowAction, RowEditAction } from '@lib/components/RowActions';
 import { YesNoButton } from '@lib/components/YesNoButton';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
@@ -11,7 +12,6 @@ import { UserRoles } from '@lib/enums/Roles';
 import { apiUrl } from '@lib/functions/Api';
 import type { TableFilter } from '@lib/types/Filters';
 import type { TableColumn } from '@lib/types/Tables';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { ActionDropdown } from '../../components/items/ActionDropdown';
 import { ApiIcon } from '../../components/items/ApiIcon';
 import { partCategoryFields } from '../../forms/PartForms';

src/frontend/src/tables/part/PartCategoryTemplateTable.tsx

@@ -2,6 +2,7 @@ import { t } from '@lingui/core/macro';
 import { Group, Text } from '@mantine/core';
 import { useCallback, useMemo, useState } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import {
   type RowAction,
   RowDeleteAction,
@@ -13,7 +14,6 @@ import { apiUrl } from '@lib/functions/Api';
 import type { TableFilter } from '@lib/types/Filters';
 import type { ApiFormFieldSet } from '@lib/types/Forms';
 import type { TableColumn } from '@lib/types/Tables';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import {
   useCreateApiFormModal,
   useDeleteApiFormModal,

src/frontend/src/tables/part/PartParameterTable.tsx

@@ -3,6 +3,7 @@ import { Alert, Stack, Text } from '@mantine/core';
 import { IconLock } from '@tabler/icons-react';
 import { useCallback, useMemo, useState } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import {
   type RowAction,
   RowDeleteAction,
@@ -15,7 +16,6 @@ import { apiUrl } from '@lib/functions/Api';
 import type { TableFilter } from '@lib/types/Filters';
 import type { ApiFormFieldSet } from '@lib/types/Forms';
 import type { TableColumn } from '@lib/types/Tables';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { RenderUser } from '../../components/render/User';
 import { formatDecimal } from '../../defaults/formatters';
 import { usePartParameterFields } from '../../forms/PartForms';

src/frontend/src/tables/part/PartParameterTemplateTable.tsx

@@ -1,6 +1,7 @@
 import { t } from '@lingui/core/macro';
 import { useCallback, useMemo, useState } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import {
   type RowAction,
   RowDeleteAction,
@@ -12,7 +13,6 @@ import { apiUrl } from '@lib/functions/Api';
 import type { TableFilter } from '@lib/types/Filters';
 import type { ApiFormFieldSet } from '@lib/types/Forms';
 import type { TableColumn } from '@lib/types/Tables';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import {
   useCreateApiFormModal,
   useDeleteApiFormModal,

src/frontend/src/tables/part/PartTable.tsx

@@ -3,6 +3,7 @@ import { Group, Text } from '@mantine/core';
 import { IconShoppingCart } from '@tabler/icons-react';
 import { type ReactNode, useCallback, useMemo, useState } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import { type RowAction, RowEditAction } from '@lib/components/RowActions';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
@@ -11,7 +12,6 @@ import { apiUrl } from '@lib/functions/Api';
 import type { TableFilter } from '@lib/types/Filters';
 import type { TableColumn } from '@lib/types/Tables';
 import type { InvenTreeTableProps } from '@lib/types/Tables';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { ActionDropdown } from '../../components/items/ActionDropdown';
 import OrderPartsWizard from '../../components/wizards/OrderPartsWizard';
 import { formatPriceRange } from '../../defaults/formatters';

src/frontend/src/tables/part/PartTestTemplateTable.tsx

@@ -5,6 +5,7 @@ import { IconLock } from '@tabler/icons-react';
 import { type ReactNode, useCallback, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import {
   type RowAction,
   RowDeleteAction,
@@ -19,7 +20,6 @@ import { getDetailUrl } from '@lib/functions/Navigation';
 import type { TableFilter } from '@lib/types/Filters';
 import type { ApiFormFieldSet } from '@lib/types/Forms';
 import type { TableColumn } from '@lib/types/Tables';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import {
   useCreateApiFormModal,
   useDeleteApiFormModal,

src/frontend/src/tables/part/RelatedPartTable.tsx

@@ -3,6 +3,7 @@ import { Group, Text } from '@mantine/core';
 import { type ReactNode, useCallback, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import {
   type RowAction,
   RowDeleteAction,
@@ -13,7 +14,6 @@ import { UserRoles } from '@lib/enums/Roles';
 import { apiUrl } from '@lib/functions/Api';
 import type { ApiFormFieldSet } from '@lib/types/Forms';
 import type { TableColumn } from '@lib/types/Tables';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { Thumbnail } from '../../components/images/Thumbnail';
 import {
   useCreateApiFormModal,

src/frontend/src/tables/part/SelectionListTable.tsx

@@ -1,6 +1,7 @@
 import { t } from '@lingui/core/macro';
 import { useCallback, useMemo, useState } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import {
   type RowAction,
   RowDeleteAction,
@@ -10,7 +11,6 @@ import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { UserRoles } from '@lib/enums/Roles';
 import { apiUrl } from '@lib/functions/Api';
 import type { TableColumn } from '@lib/types/Tables';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { selectionListFields } from '../../forms/selectionListFields';
 import {
   useCreateApiFormModal,

src/frontend/src/tables/purchasing/ManufacturerPartParameterTable.tsx

@@ -1,6 +1,7 @@
 import { t } from '@lingui/core/macro';
 import { useCallback, useMemo, useState } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import {
   type RowAction,
   RowDeleteAction,
@@ -10,7 +11,6 @@ import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { UserRoles } from '@lib/enums/Roles';
 import { apiUrl } from '@lib/functions/Api';
 import type { TableColumn } from '@lib/types/Tables';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { useManufacturerPartParameterFields } from '../../forms/CompanyForms';
 import {
   useCreateApiFormModal,

src/frontend/src/tables/purchasing/ManufacturerPartTable.tsx

@@ -1,6 +1,7 @@
 import { t } from '@lingui/core/macro';
 import { type ReactNode, useCallback, useMemo, useState } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import {
   type RowAction,
   RowDeleteAction,
@@ -11,7 +12,6 @@ import { ModelType } from '@lib/enums/ModelType';
 import { UserRoles } from '@lib/enums/Roles';
 import { apiUrl } from '@lib/functions/Api';
 import type { TableColumn } from '@lib/types/Tables';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { useManufacturerPartFields } from '../../forms/CompanyForms';
 import {
   useCreateApiFormModal,

src/frontend/src/tables/purchasing/PurchaseOrderLineItemTable.tsx

@@ -4,6 +4,7 @@ import { IconFileArrowLeft, IconSquareArrowRight } from '@tabler/icons-react';
 import { useCallback, useMemo, useState } from 'react';
 
 import { ActionButton } from '@lib/components/ActionButton';
+import { AddItemButton } from '@lib/components/AddItemButton';
 import { ProgressBar } from '@lib/components/ProgressBar';
 import {
   type RowAction,
@@ -19,7 +20,6 @@ import { apiUrl } from '@lib/functions/Api';
 import type { TableFilter } from '@lib/types/Filters';
 import type { TableColumn } from '@lib/types/Tables';
 import { useNavigate } from 'react-router-dom';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import ImporterDrawer from '../../components/importer/ImporterDrawer';
 import { RenderInstance } from '../../components/render/Instance';
 import { dataImporterSessionFields } from '../../forms/ImporterForms';

src/frontend/src/tables/purchasing/PurchaseOrderTable.tsx

@@ -1,12 +1,12 @@
 import { t } from '@lingui/core/macro';
 import { useMemo } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
 import { UserRoles } from '@lib/enums/Roles';
 import { apiUrl } from '@lib/functions/Api';
 import type { TableFilter } from '@lib/types/Filters';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { formatCurrency } from '../../defaults/formatters';
 import { usePurchaseOrderFields } from '../../forms/PurchaseOrderForms';
 import { useCreateApiFormModal } from '../../hooks/UseForm';

src/frontend/src/tables/purchasing/SupplierPartTable.tsx

@@ -2,6 +2,7 @@ import { t } from '@lingui/core/macro';
 import { Text } from '@mantine/core';
 import { type ReactNode, useCallback, useMemo, useState } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import {
   type RowAction,
   RowDeleteAction,
@@ -13,7 +14,6 @@ import { UserRoles } from '@lib/enums/Roles';
 import { apiUrl } from '@lib/functions/Api';
 import type { TableFilter } from '@lib/types/Filters';
 import type { TableColumn } from '@lib/types/Tables';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { useSupplierPartFields } from '../../forms/CompanyForms';
 import {
   useCreateApiFormModal,

src/frontend/src/tables/purchasing/SupplierPriceBreakTable.tsx

@@ -2,6 +2,7 @@ import { t } from '@lingui/core/macro';
 import { Anchor, Group, Text } from '@mantine/core';
 import { useCallback, useMemo, useState } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import {
   type RowAction,
   RowDeleteAction,
@@ -14,7 +15,6 @@ import { apiUrl } from '@lib/functions/Api';
 import { getDetailUrl } from '@lib/functions/Navigation';
 import type { ApiFormFieldSet } from '@lib/types/Forms';
 import type { TableColumn } from '@lib/types/Tables';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { formatCurrency } from '../../defaults/formatters';
 import {
   useCreateApiFormModal,

src/frontend/src/tables/sales/ReturnOrderLineItemTable.tsx

@@ -3,6 +3,7 @@ import { IconSquareArrowRight } from '@tabler/icons-react';
 import { useCallback, useMemo, useState } from 'react';
 
 import { ActionButton } from '@lib/components/ActionButton';
+import { AddItemButton } from '@lib/components/AddItemButton';
 import {
   type RowAction,
   RowDeleteAction,
@@ -14,7 +15,6 @@ import { UserRoles } from '@lib/enums/Roles';
 import { apiUrl } from '@lib/functions/Api';
 import type { TableFilter } from '@lib/types/Filters';
 import type { TableColumn } from '@lib/types/Tables';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { formatCurrency } from '../../defaults/formatters';
 import {
   useReceiveReturnOrderLineItems,

src/frontend/src/tables/sales/ReturnOrderTable.tsx

@@ -1,12 +1,12 @@
 import { t } from '@lingui/core/macro';
 import { useMemo } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
 import { UserRoles } from '@lib/enums/Roles';
 import { apiUrl } from '@lib/functions/Api';
 import type { TableFilter } from '@lib/types/Filters';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { formatCurrency } from '../../defaults/formatters';
 import { useReturnOrderFields } from '../../forms/ReturnOrderForms';
 import { useCreateApiFormModal } from '../../hooks/UseForm';

src/frontend/src/tables/sales/SalesOrderLineItemTable.tsx

@@ -12,6 +12,7 @@ import { type ReactNode, useCallback, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { ActionButton } from '@lib/components/ActionButton';
+import { AddItemButton } from '@lib/components/AddItemButton';
 import { ProgressBar } from '@lib/components/ProgressBar';
 import {
   type RowAction,
@@ -26,7 +27,6 @@ import { UserRoles } from '@lib/enums/Roles';
 import { apiUrl } from '@lib/functions/Api';
 import type { TableFilter } from '@lib/types/Filters';
 import type { TableColumn } from '@lib/types/Tables';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { RenderPart } from '../../components/render/Part';
 import OrderPartsWizard from '../../components/wizards/OrderPartsWizard';
 import { formatCurrency } from '../../defaults/formatters';

src/frontend/src/tables/sales/SalesOrderShipmentTable.tsx

@@ -3,6 +3,7 @@ import { IconTruckDelivery } from '@tabler/icons-react';
 import { useCallback, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import {
   type RowAction,
   RowCancelAction,
@@ -17,7 +18,6 @@ import { apiUrl } from '@lib/functions/Api';
 import type { TableFilter } from '@lib/types/Filters';
 import type { TableColumn } from '@lib/types/Tables';
 import dayjs from 'dayjs';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import {
   useSalesOrderShipmentCompleteFields,
   useSalesOrderShipmentFields

src/frontend/src/tables/sales/SalesOrderTable.tsx

@@ -1,13 +1,13 @@
 import { t } from '@lingui/core/macro';
 import { useMemo } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import { ProgressBar } from '@lib/components/ProgressBar';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
 import { UserRoles } from '@lib/enums/Roles';
 import { apiUrl } from '@lib/functions/Api';
 import type { TableFilter } from '@lib/types/Filters';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { formatCurrency } from '../../defaults/formatters';
 import { useSalesOrderFields } from '../../forms/SalesOrderForms';
 import { useCreateApiFormModal } from '../../hooks/UseForm';

src/frontend/src/tables/settings/ApiTokenTable.tsx

@@ -1,3 +1,4 @@
+import { AddItemButton } from '@lib/components/AddItemButton';
 import type { RowAction } from '@lib/components/RowActions';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { apiUrl } from '@lib/functions/Api';
@@ -9,7 +10,6 @@ import { useDisclosure } from '@mantine/hooks';
 import { IconCircleX } from '@tabler/icons-react';
 import { useCallback, useMemo, useState } from 'react';
 import { api } from '../../App';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { CopyButton } from '../../components/buttons/CopyButton';
 import { StylishText } from '../../components/items/StylishText';
 import { RenderUser } from '../../components/render/User';

src/frontend/src/tables/settings/CustomStateTable.tsx

@@ -2,6 +2,7 @@ import { t } from '@lingui/core/macro';
 import { Badge } from '@mantine/core';
 import { useCallback, useMemo, useState } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import {
   type RowAction,
   RowDeleteAction,
@@ -13,7 +14,6 @@ import { UserRoles } from '@lib/enums/Roles';
 import { apiUrl } from '@lib/functions/Api';
 import type { TableFilter } from '@lib/types/Filters';
 import type { TableColumn } from '@lib/types/Tables';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import type {
   StatusCodeInterface,
   StatusCodeListInterface

src/frontend/src/tables/settings/CustomUnitsTable.tsx

@@ -1,6 +1,7 @@
 import { t } from '@lingui/core/macro';
 import { useCallback, useMemo, useState } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import {
   type RowAction,
   RowDeleteAction,
@@ -10,7 +11,6 @@ import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { UserRoles } from '@lib/enums/Roles';
 import { apiUrl } from '@lib/functions/Api';
 import type { TableColumn } from '@lib/types/Tables';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { customUnitsFields } from '../../forms/CommonForms';
 import {
   useCreateApiFormModal,

src/frontend/src/tables/settings/GroupTable.tsx

@@ -3,6 +3,7 @@ import { Trans } from '@lingui/react/macro';
 import { Accordion, LoadingOverlay, Stack, Text } from '@mantine/core';
 import { useCallback, useMemo, useState } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import {
   type RowAction,
   RowDeleteAction,
@@ -16,7 +17,6 @@ import { getDetailUrl } from '@lib/index';
 import type { TableColumn } from '@lib/types/Tables';
 import { IconUsersGroup } from '@tabler/icons-react';
 import { useNavigate } from 'react-router-dom';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { EditApiForm } from '../../components/forms/ApiForm';
 import { RoleTable, type RuleSet } from '../../components/items/RoleTable';
 import { StylishText } from '../../components/items/StylishText';

src/frontend/src/tables/settings/ImportSessionTable.tsx

@@ -1,6 +1,7 @@
 import { t } from '@lingui/core/macro';
 import { useCallback, useMemo, useState } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import { ProgressBar } from '@lib/components/ProgressBar';
 import { type RowAction, RowDeleteAction } from '@lib/components/RowActions';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
@@ -8,7 +9,6 @@ import { ModelType } from '@lib/enums/ModelType';
 import { apiUrl } from '@lib/functions/Api';
 import type { TableFilter } from '@lib/types/Filters';
 import type { TableColumn } from '@lib/types/Tables';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import ImporterDrawer from '../../components/importer/ImporterDrawer';
 import { AttachmentLink } from '../../components/items/AttachmentLink';
 import { RenderUser } from '../../components/render/User';

src/frontend/src/tables/settings/ProjectCodeTable.tsx

@@ -1,6 +1,7 @@
 import { t } from '@lingui/core/macro';
 import { useCallback, useMemo, useState } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import {
   type RowAction,
   RowDeleteAction,
@@ -10,7 +11,6 @@ import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { UserRoles } from '@lib/enums/Roles';
 import { apiUrl } from '@lib/functions/Api';
 import type { TableColumn } from '@lib/types/Tables';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { projectCodeFields } from '../../forms/CommonForms';
 import {
   useCreateApiFormModal,

src/frontend/src/tables/settings/StocktakeReportTable.tsx

@@ -1,12 +1,12 @@
 import { t } from '@lingui/core/macro';
 import { useCallback, useMemo, useState } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import { type RowAction, RowDeleteAction } from '@lib/components/RowActions';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { apiUrl } from '@lib/functions/Api';
 import type { ApiFormFieldSet } from '@lib/types/Forms';
 import type { TableColumn } from '@lib/types/Tables';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { AttachmentLink } from '../../components/items/AttachmentLink';
 import { RenderUser } from '../../components/render/User';
 import { generateStocktakeReportFields } from '../../forms/PartForms';

src/frontend/src/tables/settings/TemplateTable.tsx

@@ -5,6 +5,7 @@ import { IconFileCode } from '@tabler/icons-react';
 import { type ReactNode, useCallback, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import {
   type RowAction,
   RowDeleteAction,
@@ -17,7 +18,6 @@ import { identifierString } from '@lib/functions/Conversion';
 import type { TableFilter } from '@lib/types/Filters';
 import type { ApiFormFieldSet } from '@lib/types/Forms';
 import type { TableColumn } from '@lib/types/Tables';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import {
   CodeEditor,
   PdfPreview,

src/frontend/src/tables/settings/UserTable.tsx

@@ -10,6 +10,7 @@ import {
 } from '@tabler/icons-react';
 import { useCallback, useMemo, useState } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import {
   type RowAction,
   RowDeleteAction,
@@ -26,7 +27,6 @@ import { showNotification } from '@mantine/notifications';
 import { useNavigate } from 'react-router-dom';
 import { useShallow } from 'zustand/react/shallow';
 import { api } from '../../App';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { EditApiForm } from '../../components/forms/ApiForm';
 import { StylishText } from '../../components/items/StylishText';
 import {

src/frontend/src/tables/stock/InstalledItemsTable.tsx

@@ -3,12 +3,12 @@ import { Skeleton } from '@mantine/core';
 import { IconUnlink } from '@tabler/icons-react';
 import { useCallback, useMemo, useState } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
 import { UserRoles } from '@lib/enums/Roles';
 import { apiUrl } from '@lib/functions/Api';
 import type { TableColumn } from '@lib/types/Tables';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import {
   useStockItemInstallFields,
   useStockItemUninstallFields

src/frontend/src/tables/stock/LocationTypesTable.tsx

@@ -1,6 +1,7 @@
 import { t } from '@lingui/core/macro';
 import { useCallback, useMemo, useState } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import {
   type RowAction,
   RowDeleteAction,
@@ -11,7 +12,6 @@ import { UserRoles } from '@lib/enums/Roles';
 import { apiUrl } from '@lib/functions/Api';
 import type { ApiFormFieldSet } from '@lib/types/Forms';
 import type { TableColumn } from '@lib/types/Tables';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { ApiIcon } from '../../components/items/ApiIcon';
 import {
   useCreateApiFormModal,

src/frontend/src/tables/stock/StockItemTable.tsx

@@ -3,13 +3,13 @@ import { Group, Text } from '@mantine/core';
 import { type ReactNode, useMemo, useState } from 'react';
 
 import { ActionButton } from '@lib/components/ActionButton';
+import { AddItemButton } from '@lib/components/AddItemButton';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
 import { UserRoles } from '@lib/enums/Roles';
 import { apiUrl } from '@lib/functions/Api';
 import type { TableFilter } from '@lib/types/Filters';
 import type { TableColumn } from '@lib/types/Tables';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import OrderPartsWizard from '../../components/wizards/OrderPartsWizard';
 import { formatCurrency, formatPriceRange } from '../../defaults/formatters';
 import {

src/frontend/src/tables/stock/StockItemTestResultTable.tsx

@@ -10,6 +10,7 @@ import { useQuery } from '@tanstack/react-query';
 import { DataTable, type DataTableRowExpansionProps } from 'mantine-datatable';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import {
   type RowAction,
   RowActions,
@@ -23,7 +24,6 @@ import { apiUrl } from '@lib/functions/Api';
 import type { TableFilter } from '@lib/types/Filters';
 import type { ApiFormFieldSet } from '@lib/types/Forms';
 import type { TableColumn } from '@lib/types/Tables';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { AttachmentLink } from '../../components/items/AttachmentLink';
 import { RenderUser } from '../../components/render/User';
 import { useApi } from '../../contexts/ApiContext';

src/frontend/src/tables/stock/StockLocationTable.tsx

@@ -2,6 +2,7 @@ import { t } from '@lingui/core/macro';
 import { Group } from '@mantine/core';
 import { useCallback, useMemo, useState } from 'react';
 
+import { AddItemButton } from '@lib/components/AddItemButton';
 import { type RowAction, RowEditAction } from '@lib/components/RowActions';
 import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { ModelType } from '@lib/enums/ModelType';
@@ -9,7 +10,6 @@ import { UserRoles } from '@lib/enums/Roles';
 import { apiUrl } from '@lib/functions/Api';
 import type { TableFilter } from '@lib/types/Filters';
 import type { TableColumn } from '@lib/types/Tables';
-import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { ActionDropdown } from '../../components/items/ActionDropdown';
 import { ApiIcon } from '../../components/items/ApiIcon';
 import { stockLocationFields } from '../../forms/StockForms';

src/frontend/vite.lib.config.ts

@@ -1,9 +1,19 @@
-// This config file is used to build the common InvenTree UI library components,
+/*
-// which are distributed via NPM - to facilitate plugin development
+ * This config file is used to build the common InvenTree UI library components,
+ * which are distributed via NPM - to facilitate plugin development.
+ *
+ * Note that we externalize a number of common libraries,
+ * so that plugins can use the same versions as the main InvenTree application.
+ *
+ * Externalizing libraries is critical here,
+ * to ensure that the plugins do not bundle their own versions of these libraries,
+ * so that the plugin uses the same React instance as the main application.
+ */
 
 import { resolve } from 'node:path';
 import { defineConfig, mergeConfig } from 'vite';
 import dts from 'vite-plugin-dts';
+import { viteExternalsPlugin } from 'vite-plugin-externals';
 import viteConfig from './vite.config';
 
 import { __INVENTREE_VERSION_INFO__ } from './version-info';
@@ -21,9 +31,24 @@ export default defineConfig((cfg) =>
         rollupOptions: {
           output: {
             preserveModules: true,
-            preserveModulesRoot: 'lib'
+            preserveModulesRoot: 'lib',
+            globals: {
+              react: 'React',
+              'react-dom': 'ReactDOM',
+              '@lingui/core': 'LinguiCore',
+              '@lingui/react': 'LinguiReact',
+              '@mantine/core': 'MantineCore',
+              '@mantine/notifications': 'MantineNotifications'
+            }
           },
-          external: ['react', 'react-dom']
+          external: [
+            'react',
+            'react-dom',
+            '@lingui/core',
+            '@lingui/react',
+            '@mantine/core',
+            '@mantine/notifications'
+          ]
         },
         lib: {
           entry: {
@@ -39,6 +64,15 @@ export default defineConfig((cfg) =>
           outDir: 'dist',
           insertTypesEntry: true, // Ensures `dist/index.d.ts` is generated
           exclude: ['node_modules/**/*', 'src/**/*']
+        }),
+        viteExternalsPlugin({
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          ReactDom: 'ReactDOM',
+          '@lingui/core': 'LinguiCore',
+          '@lingui/react': 'LinguiReact',
+          '@mantine/core': 'MantineCore',
+          '@mantine/notifications': 'MantineNotifications'
         })
       ],
       define: {