DSEGOG-341 Fix yarn preview:build:dev and address some comments

src/images/imageWindow.component.test.tsx

@@ -6,7 +6,6 @@ import { renderComponentWithProviders } from '../testUtils';
 import ImageWindow from './imageWindow.component';
 
 vi.mock('../windows/windowPortal.component', async () => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
   const ReactMock = await vi.importActual('react');
   return {
     default: ReactMock.forwardRef(({ children }, ref) => (

src/main.tsx

@@ -198,7 +198,6 @@ async function prepare() {
       import.meta.env.VITE_APP_INCLUDE_MSW === 'true' ||
       settingsResult?.apiUrl === ''
     ) {
-      // Need to use require instead of import as import breaks when loaded in SG
       const { worker } = await import('./mocks/browser');
       return worker.start({
         onUnhandledRequest(request, print) {

src/plotting/plot.component.tsx

@@ -8,8 +8,6 @@ import {
 } from '../app.types';
 // only import types as we don't actually run any chart.js code in React
 import type { ChartDataset, ChartOptions } from 'chart.js';
-// we import this even though we don't use it so we can get typescript info added to ChartOptions
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 
 export interface PlotProps {
   datasets: PlotDataset[];

src/plotting/plotSettings/plotSettingsController.component.test.tsx

@@ -24,9 +24,9 @@ describe('Plot Settings component', () => {
 
   const createView = async () => {
     // need to import like this in order for the doMock's to work
-    const PlotSettingsController =
-      // eslint-disable-next-line @typescript-eslint/no-var-requires
-      (await vi.importActual('./plotSettingsController.component')).default;
+    const PlotSettingsController = (
+      await vi.importActual('./plotSettingsController.component')
+    ).default;
     return render(<PlotSettingsController {...props} />);
   };
 

src/plotting/plotWindow.component.test.tsx

@@ -12,7 +12,6 @@ import { WindowPortal } from '../windows/windowPortal.component';
 import PlotWindow from './plotWindow.component';
 
 vi.mock('../windows/windowPortal.component', async () => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
   const ReactMock = await vi.importActual('react');
   return {
     default: ReactMock.forwardRef(({ children }, ref) => (

src/testUtils.tsx

@@ -1,15 +1,9 @@
-import React from 'react';
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
-// need to mock <canvas> for plotting
 import { Action, ThunkAction } from '@reduxjs/toolkit';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { RenderOptions } from '@testing-library/react';
 import { render } from '@testing-library/react';
 import { matchRequestUrl } from 'msw';
+import React from 'react';
 import { Provider } from 'react-redux';
 import { staticChannels } from './api/channels';
 import {

src/traces/tracePlot.component.tsx

@@ -2,8 +2,6 @@ import React from 'react';
 import { Waveform } from '../app.types';
 // only import types as we don't actually run any chart.js code in React
 import type { ChartData, ChartOptions } from 'chart.js';
-// we import this even though we don't use it so we can get typescript info added to ChartOptions
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 
 export interface TracePlotProps {
   trace: Waveform;

src/traces/traceWindow.component.test.tsx

@@ -6,7 +6,6 @@ import { renderComponentWithProviders } from '../testUtils';
 import TraceWindow from './traceWindow.component';
 
 vi.mock('../windows/windowPortal.component', async () => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
   const ReactMock = await vi.importActual('react');
   return {
     default: ReactMock.forwardRef(({ children }, ref) => (

vite.config.ts

@@ -93,12 +93,16 @@ export default defineConfig(({ mode }) => {
     // Config for deployment in SciGateway
     config.build = {
       lib: {
-        // https://github.com/vitejs/vite/issues/7130
+        // We use `umd` here as `es` causes some import statements to leak into the main.js, breaking the build
+        // removing this entirely uses a default of both, which for build results in `umd` taking precedence but when
+        // using --watch, `es` appears to replace it intermittently. Hopefully this can be fixed in the future and we
+        // can use `es` instead.
+        formats: ['umd'],
         entry: 'src/main.tsx',
         name: 'operationsgateway',
       },
       rollupOptions: {
-        external: ['react', 'react-dom'].concat(rollupExternals),
+        external: rollupExternals,
         input: 'src/main.tsx',
         output: {
           entryFileNames: '[name].js',