diff --git a/src/AboutDialog.js b/src/AboutDialog.js
index e4b2b5a0..372ec0da 100644
--- a/src/AboutDialog.js
+++ b/src/AboutDialog.js
@@ -1,16 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from 'tss-react/mui';
-import withRoot from './withRoot';
-import Dialog from '@mui/material/Dialog';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
+import withRoot from './withRoot.js';
+import { Dialog } from '@mui/material';
+import { DialogContent } from '@mui/material';
+import { DialogContentText } from '@mui/material';
+import { DialogTitle } from '@mui/material';
 import graphvizVersions from './graphviz-versions.json';
 import packageJSON from '../package.json';
 import versions from './versions.json';
-import IconButton from '@mui/material/IconButton';
-import CloseIcon from '@mui/icons-material/Close';
+import { IconButton } from '@mui/material';
+import { Close as CloseIcon } from '@mui/icons-material';
 
 const styles = theme => ({
   title: {
diff --git a/src/ButtonAppBar.js b/src/ButtonAppBar.js
index ca7c2558..864a1fa0 100644
--- a/src/ButtonAppBar.js
+++ b/src/ButtonAppBar.js
@@ -1,23 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from 'tss-react/mui';
-import AppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-import IconButton from '@mui/material/IconButton';
-import MenuIcon from '@mui/icons-material/Menu';
-import AddIcon from '@mui/icons-material/Add';
-import OpenInBrowserIcon from '@mui/icons-material/OpenInBrowser';
-import SaveAltIcon from '@mui/icons-material/SaveAlt';
-import UndoIcon from '@mui/icons-material/Undo';
-import RedoIcon from '@mui/icons-material/Redo';
-import ZoomInIcon from '@mui/icons-material/ZoomIn';
-import ZoomOutIcon from '@mui/icons-material/ZoomOut';
-import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap';
-import SettingsIcon from '@mui/icons-material/Settings';
-import HelpIcon from '@mui/icons-material/Help';
-import GitHubIcon from './GitHubIcon'
+import { AppBar } from '@mui/material';
+import { Toolbar } from '@mui/material';
+import { Typography } from '@mui/material';
+import { Button } from '@mui/material';
+import { IconButton } from '@mui/material';
+import { Menu as MenuIcon } from '@mui/icons-material';
+import { Add as AddIcon } from '@mui/icons-material';
+import { OpenInBrowser as OpenInBrowserIcon } from '@mui/icons-material';
+import { SaveAlt as SaveAltIcon } from '@mui/icons-material';
+import { Undo as UndoIcon } from '@mui/icons-material';
+import { Redo as RedoIcon } from '@mui/icons-material';
+import { ZoomIn as ZoomInIcon } from '@mui/icons-material';
+import { ZoomOut as ZoomOutIcon }  from '@mui/icons-material';
+import { ZoomOutMap as ZoomOutMapIcon } from '@mui/icons-material';
+import { Settings as SettingsIcon } from '@mui/icons-material';
+import { Help as HelpIcon } from '@mui/icons-material';
+import GitHubIcon from './GitHubIcon.js'
 
 const styles = {
   root: {
diff --git a/src/ColorPicker.js b/src/ColorPicker.js
index fa64ce19..25496ad2 100644
--- a/src/ColorPicker.js
+++ b/src/ColorPicker.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from 'tss-react/mui';
-import withRoot from './withRoot';
-import FormControl from '@mui/material/FormControl';
-import Input from '@mui/material/Input';
+import withRoot from './withRoot.js';
+import { FormControl } from '@mui/material';
+import { Input } from '@mui/material';
 
 import { ChromePicker } from 'react-color'
 
diff --git a/src/DoYouWantToDeleteDialog.js b/src/DoYouWantToDeleteDialog.js
index 0ae88b85..32798065 100644
--- a/src/DoYouWantToDeleteDialog.js
+++ b/src/DoYouWantToDeleteDialog.js
@@ -1,15 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from 'tss-react/mui';
-import withRoot from './withRoot';
-import CloseIcon from '@mui/icons-material/Close';
-import IconButton from '@mui/material/IconButton';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogActions from '@mui/material/DialogActions';
+import withRoot from './withRoot.js';
+import { Close as CloseIcon } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
+import { Button } from '@mui/material';
+import { Dialog } from '@mui/material';
+import { DialogContent } from '@mui/material';
+import { DialogContentText } from '@mui/material';
+import { DialogTitle } from '@mui/material';
+import { DialogActions } from '@mui/material';
 
 const styles = theme => ({
   title: {
diff --git a/src/DoYouWantToReplaceItDialog.js b/src/DoYouWantToReplaceItDialog.js
index c07854f1..0d2de1e0 100644
--- a/src/DoYouWantToReplaceItDialog.js
+++ b/src/DoYouWantToReplaceItDialog.js
@@ -1,15 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from 'tss-react/mui';
-import withRoot from './withRoot';
-import CloseIcon from '@mui/icons-material/Close';
-import IconButton from '@mui/material/IconButton';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogActions from '@mui/material/DialogActions';
+import withRoot from './withRoot.js';
+import { Close as CloseIcon } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
+import { Button } from '@mui/material';
+import { Dialog } from '@mui/material';
+import { DialogContent } from '@mui/material';
+import { DialogContentText } from '@mui/material';
+import { DialogTitle } from '@mui/material';
+import { DialogActions } from '@mui/material';
 
 const styles = theme => ({
   title: {
diff --git a/src/ExportAsSvgDialog.js b/src/ExportAsSvgDialog.js
index 18e251b5..39eb2737 100644
--- a/src/ExportAsSvgDialog.js
+++ b/src/ExportAsSvgDialog.js
@@ -1,16 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from 'tss-react/mui';
-import withRoot from './withRoot';
-import CloseIcon from '@mui/icons-material/Close';
-import IconButton from '@mui/material/IconButton';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogActions from '@mui/material/DialogActions';
-import Input from '@mui/material/Input';
+import withRoot from './withRoot.js';
+import { Close as CloseIcon } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
+import { Button } from '@mui/material';
+import { Dialog } from '@mui/material';
+import { DialogContent } from '@mui/material';
+import { DialogContentText } from '@mui/material';
+import { DialogTitle } from '@mui/material';
+import { DialogActions } from '@mui/material';
+import { Input } from '@mui/material';
 
 const styles = theme => ({
   title: {
diff --git a/src/ExportAsUrlDialog.js b/src/ExportAsUrlDialog.js
index 854ae4e7..81b6a38d 100644
--- a/src/ExportAsUrlDialog.js
+++ b/src/ExportAsUrlDialog.js
@@ -1,17 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from 'tss-react/mui';
-import withRoot from './withRoot';
-import CloseIcon from '@mui/icons-material/Close';
-import LinkIcon from '@mui/icons-material/Link';
-import IconButton from '@mui/material/IconButton';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogActions from '@mui/material/DialogActions';
-import Input from '@mui/material/Input';
+import withRoot from './withRoot.js';
+import { Close as CloseIcon } from '@mui/icons-material';
+import { Link as LinkIcon } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
+import { Button } from '@mui/material';
+import { Dialog } from '@mui/material';
+import { DialogContent } from '@mui/material';
+import { DialogContentText } from '@mui/material';
+import { DialogTitle } from '@mui/material';
+import { DialogActions } from '@mui/material';
+import { Input } from '@mui/material';
 
 const styles = theme => ({
   title: {
diff --git a/src/FormatDrawer.js b/src/FormatDrawer.js
index d0899bef..1ba18506 100644
--- a/src/FormatDrawer.js
+++ b/src/FormatDrawer.js
@@ -2,19 +2,19 @@ import React from 'react';
 import { useState } from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from 'tss-react/mui';
-import { useTheme } from '@mui/material/styles';
-import Drawer from '@mui/material/Drawer';
-import DialogTitle from '@mui/material/DialogTitle';
-import Divider from '@mui/material/Divider';
-import IconButton from '@mui/material/IconButton';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import FormControl from '@mui/material/FormControl';
-import FormGroup from '@mui/material/FormGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Checkbox from '@mui/material/Checkbox';
-import Switch from '@mui/material/Switch';
-import ColorPicker from './ColorPicker'
+import { useTheme } from '@mui/material';
+import { Drawer } from '@mui/material';
+import { DialogTitle } from '@mui/material';
+import { Divider } from '@mui/material';
+import { IconButton } from '@mui/material';
+import { ChevronLeft as ChevronLeftIcon } from '@mui/icons-material';
+import { ChevronRight as ChevronRightIcon } from '@mui/icons-material';
+import { FormControl } from '@mui/material';
+import { FormGroup } from '@mui/material';
+import { FormControlLabel } from '@mui/material';
+import { Checkbox } from '@mui/material';
+import { Switch } from '@mui/material';
+import ColorPicker from './ColorPicker.js'
 
 const drawerWidth = '100%';
 
diff --git a/src/GitHubIcon.js b/src/GitHubIcon.js
index 2fdeeb65..3a3b8c8a 100644
--- a/src/GitHubIcon.js
+++ b/src/GitHubIcon.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import SvgIcon from '@mui/material/SvgIcon';
+import { SvgIcon } from '@mui/material';
 
 function GitHubIcon(props) {
   return (
diff --git a/src/Graph.js b/src/Graph.js
index 8591ac6c..48724608 100644
--- a/src/Graph.js
+++ b/src/Graph.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from 'tss-react/mui';
-import Fade from '@mui/material/Fade';
-import CircularProgress from '@mui/material/CircularProgress';
+import { Fade } from '@mui/material';
+import { CircularProgress } from '@mui/material';
 import { select as d3_select} from 'd3-selection';
 import { selectAll as d3_selectAll} from 'd3-selection';
 import { transition as d3_transition} from 'd3-transition';
@@ -10,7 +10,7 @@ import { zoomIdentity as d3_zoomIdentity} from 'd3-zoom';
 import { zoomTransform as d3_zoomTransform} from 'd3-zoom';
 import { pointer as d3_pointer} from 'd3-selection';
 import 'd3-graphviz';
-import DotGraph from './dot'
+import DotGraph from './dot.js'
 
 const styles = {
   root: {
diff --git a/src/HelpMenu.js b/src/HelpMenu.js
index 0004a881..5618623d 100644
--- a/src/HelpMenu.js
+++ b/src/HelpMenu.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
+import { Menu } from '@mui/material';
+import { MenuItem } from '@mui/material';
 
 class HelpMenu extends React.Component {
 
diff --git a/src/InsertPanels.js b/src/InsertPanels.js
index 956b6ba8..07a14930 100644
--- a/src/InsertPanels.js
+++ b/src/InsertPanels.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from 'tss-react/mui';
-import Accordion from '@mui/material/Accordion';
-import AccordionDetails from '@mui/material/AccordionDetails';
-import AccordionSummary from '@mui/material/AccordionSummary';
-import Typography from '@mui/material/Typography';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import {shapes} from './shapes';
+import { Accordion } from '@mui/material';
+import { AccordionDetails } from '@mui/material';
+import { AccordionSummary } from '@mui/material';
+import { Typography } from '@mui/material';
+import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
+import {shapes} from './shapes.js';
 
 const nodeShapeCategories = [
   {
diff --git a/src/KeyboardShortcutsDialog.js b/src/KeyboardShortcutsDialog.js
index a3aefaad..79311cad 100644
--- a/src/KeyboardShortcutsDialog.js
+++ b/src/KeyboardShortcutsDialog.js
@@ -1,17 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from 'tss-react/mui';
-import withRoot from './withRoot';
-import IconButton from '@mui/material/IconButton';
-import Dialog from '@mui/material/Dialog';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableRow from '@mui/material/TableRow';
-import CloseIcon from '@mui/icons-material/Close';
+import withRoot from './withRoot.js';
+import { IconButton } from '@mui/material';
+import { Dialog } from '@mui/material';
+import { DialogContent } from '@mui/material';
+import { DialogContentText } from '@mui/material';
+import { DialogTitle } from '@mui/material';
+import { Table } from '@mui/material';
+import { TableBody } from '@mui/material';
+import { TableCell } from '@mui/material';
+import { TableRow } from '@mui/material';
+import { Close as CloseIcon } from '@mui/icons-material';
 
 const keyboardShortcuts = [
   {key: 'Ctrl-A', description: 'Select all nodes and edges.'},
diff --git a/src/MainMenu.js b/src/MainMenu.js
index 8958fe66..0362de52 100644
--- a/src/MainMenu.js
+++ b/src/MainMenu.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
+import { Menu } from '@mui/material';
+import { MenuItem } from '@mui/material';
 
 class MainMenu extends React.Component {
 
diff --git a/src/MouseOperationsDialog.js b/src/MouseOperationsDialog.js
index 2948de67..78c4534b 100644
--- a/src/MouseOperationsDialog.js
+++ b/src/MouseOperationsDialog.js
@@ -1,16 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from 'tss-react/mui';
-import withRoot from './withRoot';
-import IconButton from '@mui/material/IconButton';
-import Dialog from '@mui/material/Dialog';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableRow from '@mui/material/TableRow';
-import CloseIcon from '@mui/icons-material/Close';
+import withRoot from './withRoot.js';
+import { IconButton } from '@mui/material';
+import { Dialog } from '@mui/material';
+import { DialogContent } from '@mui/material';
+import { DialogTitle } from '@mui/material';
+import { Table } from '@mui/material';
+import { TableBody } from '@mui/material';
+import { TableCell } from '@mui/material';
+import { TableRow } from '@mui/material';
+import { Close as CloseIcon } from '@mui/icons-material';
 
 const mouseOperations = [
   {key: 'Mouse wheel', description: 'Zoom in or out.'},
diff --git a/src/OpenFromBrowserDialog.js b/src/OpenFromBrowserDialog.js
index 2d5f2837..5eea2d9b 100644
--- a/src/OpenFromBrowserDialog.js
+++ b/src/OpenFromBrowserDialog.js
@@ -1,27 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from 'tss-react/mui';
-import withRoot from './withRoot';
-import CloseIcon from '@mui/icons-material/Close';
-import IconButton from '@mui/material/IconButton';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogActions from '@mui/material/DialogActions';
-import Table from '@mui/material/Table';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import TableCell from '@mui/material/TableCell';
-import TableBody from '@mui/material/TableBody';
-import TableSortLabel from '@mui/material/TableSortLabel';
-import Tooltip from '@mui/material/Tooltip';
+import withRoot from './withRoot.js';
+import { Close as CloseIcon } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
+import { Button } from '@mui/material';
+import { Dialog } from '@mui/material';
+import { DialogContent } from '@mui/material';
+import { DialogContentText } from '@mui/material';
+import { DialogTitle } from '@mui/material';
+import { DialogActions } from '@mui/material';
+import { Table } from '@mui/material';
+import { TableHead } from '@mui/material';
+import { TableRow } from '@mui/material';
+import { TableCell } from '@mui/material';
+import { TableBody } from '@mui/material';
+import { TableSortLabel } from '@mui/material';
+import { Tooltip } from '@mui/material';
 import moment from 'moment';
-import DeleteIcon from '@mui/icons-material/Delete';
-import DoYouWantToDeleteDialog from './DoYouWantToDeleteDialog';
-import SvgPreview from './SvgPreview';
-import DotSrcPreview from './DotSrcPreview';
+import { Delete as DeleteIcon } from '@mui/icons-material';
+import DoYouWantToDeleteDialog from './DoYouWantToDeleteDialog.js';
+import SvgPreview from './SvgPreview.js';
+import DotSrcPreview from './DotSrcPreview.js';
 
 const numLinesPreview = 5;
 
diff --git a/src/SaveAsToBrowserDialog.js b/src/SaveAsToBrowserDialog.js
index f627b858..4dc4a501 100644
--- a/src/SaveAsToBrowserDialog.js
+++ b/src/SaveAsToBrowserDialog.js
@@ -1,17 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from 'tss-react/mui';
-import withRoot from './withRoot';
-import CloseIcon from '@mui/icons-material/Close';
-import IconButton from '@mui/material/IconButton';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogActions from '@mui/material/DialogActions';
-import TextField from '@mui/material/TextField';
-import DoYouWantToReplaceItDialog from './DoYouWantToReplaceItDialog';
+import withRoot from './withRoot.js';
+import { Close as CloseIcon } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
+import { Button } from '@mui/material';
+import { Dialog } from '@mui/material';
+import { DialogContent } from '@mui/material';
+import { DialogContentText } from '@mui/material';
+import { DialogTitle } from '@mui/material';
+import { DialogActions } from '@mui/material';
+import { TextField } from '@mui/material';
+import DoYouWantToReplaceItDialog from './DoYouWantToReplaceItDialog.js';
 
 const styles = theme => ({
   title: {
diff --git a/src/SettingsDialog.js b/src/SettingsDialog.js
index eb5d2b94..30bd7daf 100644
--- a/src/SettingsDialog.js
+++ b/src/SettingsDialog.js
@@ -1,26 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from 'tss-react/mui';
-import withRoot from './withRoot';
-import IconButton from '@mui/material/IconButton';
-import Dialog from '@mui/material/Dialog';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-import FormGroup from '@mui/material/FormGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormLabel from '@mui/material/FormLabel';
-import RadioGroup from '@mui/material/RadioGroup';
-import Radio from '@mui/material/Radio';
-import Switch from '@mui/material/Switch';
-import Input from '@mui/material/Input';
-import InputAdornment from '@mui/material/InputAdornment';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormHelperText from '@mui/material/FormHelperText';
-import FormControl from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-import CloseIcon from '@mui/icons-material/Close';
+import withRoot from './withRoot.js';
+import { IconButton } from '@mui/material';
+import { Dialog } from '@mui/material';
+import { DialogContent } from '@mui/material';
+import { DialogContentText } from '@mui/material';
+import { DialogTitle } from '@mui/material';
+import { FormGroup } from '@mui/material';
+import { FormControlLabel } from '@mui/material';
+import { FormLabel } from '@mui/material';
+import { RadioGroup } from '@mui/material';
+import { Radio } from '@mui/material';
+import { Switch } from '@mui/material';
+import { Input } from '@mui/material';
+import { InputAdornment } from '@mui/material';
+import { InputLabel } from '@mui/material';
+import { MenuItem } from '@mui/material';
+import { FormHelperText } from '@mui/material';
+import { FormControl } from '@mui/material';
+import { Select } from '@mui/material';
+import { Close as CloseIcon } from '@mui/icons-material';
 
 const engines = [
   'circo',
diff --git a/src/SvgPreview.js b/src/SvgPreview.js
index a75124cc..7bea9c0a 100644
--- a/src/SvgPreview.js
+++ b/src/SvgPreview.js
@@ -2,10 +2,10 @@ import React from 'react';
 import { useState } from 'react';
 import { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
+import { Card } from '@mui/material';
+import { CardContent } from '@mui/material';
 import { withStyles } from 'tss-react/mui';
-import { useTheme } from '@mui/material/styles';
+import { useTheme } from '@mui/material';
 
 const previewWidth = 400;
 const previewHeight = 250;
diff --git a/src/TextEditor.js b/src/TextEditor.js
index 4db424fb..c004eebf 100644
--- a/src/TextEditor.js
+++ b/src/TextEditor.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import { withStyles } from 'tss-react/mui';
-import AceEditor from 'react-ace';
-import 'ace-builds/src-noconflict/mode-dot';
-import 'ace-builds/src-noconflict/theme-github';
-import IconButton from '@mui/material/IconButton';
-import ErrorOutline from '@mui/icons-material/ErrorOutline';
+import ace from 'react-ace';
+import 'ace-builds/src-noconflict/mode-dot.js';
+import 'ace-builds/src-noconflict/theme-github.js';
+import { IconButton } from '@mui/material';
+import { ErrorOutline } from '@mui/icons-material';
+const AceEditor = ace.default;
 
 const styles = {
   errorButton: {
diff --git a/src/UpdatedSnackbar.js b/src/UpdatedSnackbar.js
index c748eb69..c2674739 100644
--- a/src/UpdatedSnackbar.js
+++ b/src/UpdatedSnackbar.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import CloseIcon from '@mui/icons-material/Close';
-import IconButton from '@mui/material/IconButton';
-import Snackbar from '@mui/material/Snackbar';
-import SnackbarContent from '@mui/material/SnackbarContent';
+import { Close as CloseIcon } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
+import { Snackbar } from '@mui/material';
+import { SnackbarContent } from '@mui/material';
 import { withStyles } from 'tss-react/mui';
-import withRoot from './withRoot';
+import withRoot from './withRoot.js';
 import packageJSON from '../package.json';
 import versions from './versions.json';
 import graphvizVersions from './graphviz-versions.json';
diff --git a/src/dot.js b/src/dot.js
index 9ccb8013..f1ab1db1 100644
--- a/src/dot.js
+++ b/src/dot.js
@@ -1,4 +1,4 @@
-import parser from './dotParser';
+import parser from './dotParser.js';
 var parse = parser.parse;
 
 const whitespaceWithinLine = ' \t\r';
diff --git a/src/dot.test.js b/src/dot.test.js
index 83b01b33..37f81abc 100644
--- a/src/dot.test.js
+++ b/src/dot.test.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { screen } from '@testing-library/react';
 import '@testing-library/jest-dom'
-import DotGraph from './dot';
+import DotGraph from './dot.js';
 import { readFileSync } from 'fs';
 
 class WrapDot extends React.Component {
@@ -1078,12 +1078,12 @@ c # baz
   it('deletes the first node and the succeeding whitespace in the same line in a graph with two nodes', () => {
     let dotSrc = `graph {
 
-    a  b 
+    a  b
 
 }`;
     let newDotSrc = `graph {
 
-    b 
+    b
 
 }`;
     render(<WrapDot dotSrc={dotSrc} op="deleteNode" id="a" raw={true}/>);
@@ -1093,7 +1093,7 @@ c # baz
   it('deletes the second node and the succeeding whitespace in the same line in a graph with two nodes', () => {
     let dotSrc = `graph {
 
-    a  b 
+    a  b
 
 }`;
     let newDotSrc = `graph {
diff --git a/src/pages/index.js b/src/pages/index.js
index 3504b8db..f9ae3f87 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,31 +1,31 @@
 import React from 'react';
 import 'typeface-roboto';
 import PropTypes from 'prop-types';
-import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
+import { Paper } from '@mui/material';
+import { Grid } from '@mui/material';
 import { withStyles } from 'tss-react/mui';
-import withRoot from '../withRoot';
-import ButtonAppBar from '../ButtonAppBar';
-import Graph from '../Graph';
-import TextEditor from '../TextEditor';
-import MainMenu from '../MainMenu';
-import HelpMenu from '../HelpMenu';
-import SettingsDialog from '../SettingsDialog';
-import OpenFromBrowserDialog from '../OpenFromBrowserDialog';
-import SaveAsToBrowserDialog from '../SaveAsToBrowserDialog';
-import InsertPanels from '../InsertPanels';
-import FormatDrawer from '../FormatDrawer';
+import withRoot from '../withRoot.js';
+import ButtonAppBar from '../ButtonAppBar.js';
+import Graph from '../Graph.js';
+import TextEditor from '../TextEditor.js';
+import MainMenu from '../MainMenu.js';
+import HelpMenu from '../HelpMenu.js';
+import SettingsDialog from '../SettingsDialog.js';
+import OpenFromBrowserDialog from '../OpenFromBrowserDialog.js';
+import SaveAsToBrowserDialog from '../SaveAsToBrowserDialog.js';
+import InsertPanels from '../InsertPanels.js';
+import FormatDrawer from '../FormatDrawer.js';
 import { schemeCategory10 as d3_schemeCategory10} from 'd3-scale-chromatic';
 import { schemePaired as d3_schemePaired} from 'd3-scale-chromatic';
-import KeyboardShortcutsDialog from '../KeyboardShortcutsDialog';
-import MouseOperationsDialog from '../MouseOperationsDialog';
-import AboutDialog from '../AboutDialog';
+import KeyboardShortcutsDialog from '../KeyboardShortcutsDialog.js';
+import MouseOperationsDialog from '../MouseOperationsDialog.js';
+import AboutDialog from '../AboutDialog.js';
 import { parse as qs_parse } from 'qs';
 import { stringify as qs_stringify } from 'qs';
-import ExportAsUrlDialog from '../ExportAsUrlDialog';
-import ExportAsSvgDialog from '../ExportAsSvgDialog'
-import { graphvizVersion } from '../graphvizVersion';
-import UpdatedSnackbar from '../UpdatedSnackbar';
+import ExportAsUrlDialog from '../ExportAsUrlDialog.js';
+import ExportAsSvgDialog from '../ExportAsSvgDialog.js'
+import { graphvizVersion } from '../graphvizVersion.js';
+import UpdatedSnackbar from '../UpdatedSnackbar.js';
 import packageJSON from '../../package.json';
 
 const styles = theme => ({
diff --git a/src/withRoot.js b/src/withRoot.js
index b8ac2d77..01cda2ef 100644
--- a/src/withRoot.js
+++ b/src/withRoot.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import { ThemeProvider, StyledEngineProvider, createTheme } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
+import { ThemeProvider, StyledEngineProvider, createTheme } from '@mui/material';
+import { CssBaseline } from '@mui/material';
 
 // A theme with custom primary and secondary color.
 // It's optional.