fix(ui): fix make dev (#3795)

1. For some bizarre reason, importing inflection by itself is undefined. But you can import specific functions
2. Per https://github.com/vite-pwa/vite-plugin-pwa/issues/419, `type: 'module',` is only for non-chromium browsers

ui/src/album/AlbumInfo.jsx

@@ -1,6 +1,6 @@
 import Table from '@material-ui/core/Table'
 import TableBody from '@material-ui/core/TableBody'
-import inflection from 'inflection'
+import { humanize, underscore } from 'inflection'
 import TableCell from '@material-ui/core/TableCell'
 import TableContainer from '@material-ui/core/TableContainer'
 import TableRow from '@material-ui/core/TableRow'
@@ -112,7 +112,7 @@ const AlbumInfo = (props) => {
                   className={classes.tableCell}
                 >
                   {translate(`resources.album.fields.${key}`, {
-                    _: inflection.humanize(inflection.underscore(key)),
+                    _: humanize(underscore(key)),
                   })}
                   :
                 </TableCell>

ui/src/album/AlbumList.jsx

@@ -31,7 +31,7 @@ import albumLists, { defaultAlbumList } from './albumLists'
 import config from '../config'
 import AlbumInfo from './AlbumInfo'
 import ExpandInfoDialog from '../dialogs/ExpandInfoDialog'
-import inflection from 'inflection'
+import { humanize } from 'inflection'
 import { makeStyles } from '@material-ui/core/styles'
 
 const useStyles = makeStyles({
@@ -140,9 +140,7 @@ const AlbumFilter = (props) => {
         <AutocompleteInput
           emptyText="-- None --"
           optionText={(record) =>
-            record?.tagValue
+            record?.tagValue ? humanize(record?.tagValue) : '-- None --'
-              ? inflection.humanize(record?.tagValue)
-              : '-- None --'
           }
         />
       </ReferenceInput>

ui/src/common/QuickFilter.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Chip, makeStyles } from '@material-ui/core'
 import { useTranslate } from 'react-admin'
-import inflection from 'inflection'
+import { humanize, underscore } from 'inflection'
 
 const useQuickFilterStyles = makeStyles((theme) => ({
   chip: {
@@ -16,11 +16,11 @@ export const QuickFilter = ({ source, resource, label, defaultValue }) => {
   if (typeof lbl === 'string' || lbl instanceof String) {
     if (label) {
       lbl = translate(lbl, {
-        _: inflection.humanize(inflection.underscore(lbl)),
+        _: humanize(underscore(lbl)),
       })
     } else {
       lbl = translate(`resources.${resource}.fields.${source}`, {
-        _: inflection.humanize(inflection.underscore(source)),
+        _: humanize(underscore(source)),
       })
     }
   }

ui/src/common/SongInfo.jsx

@@ -13,7 +13,7 @@ import {
   useTranslate,
   useRecordContext,
 } from 'react-admin'
-import inflection from 'inflection'
+import { humanize, underscore } from 'inflection'
 import {
   ArtistLinkField,
   BitrateField,
@@ -140,7 +140,7 @@ export const SongInfo = (props) => {
                 <TableRow key={`${record.id}-${key}`}>
                   <TableCell scope="row" className={classes.tableCell}>
                     {translate(`resources.song.fields.${key}`, {
-                      _: inflection.humanize(inflection.underscore(key)),
+                      _: humanize(underscore(key)),
                     })}
                     :
                   </TableCell>

ui/src/dialogs/AboutDialog.jsx

@@ -10,7 +10,7 @@ import TableRow from '@material-ui/core/TableRow'
 import TableCell from '@material-ui/core/TableCell'
 import Paper from '@material-ui/core/Paper'
 import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
-import inflection from 'inflection'
+import { humanize, underscore } from 'inflection'
 import { useGetOne, usePermissions, useTranslate } from 'react-admin'
 import config from '../config'
 import { DialogTitle } from './DialogTitle'
@@ -136,7 +136,7 @@ const AboutDialog = ({ open, onClose }) => {
                   <TableRow key={key}>
                     <TableCell align="right" component="th" scope="row">
                       {translate(`about.links.${key}`, {
-                        _: inflection.humanize(inflection.underscore(key)),
+                        _: humanize(underscore(key)),
                       })}
                       :
                     </TableCell>

ui/src/dialogs/HelpDialog.jsx

@@ -9,7 +9,7 @@ import TableBody from '@material-ui/core/TableBody'
 import TableRow from '@material-ui/core/TableRow'
 import TableCell from '@material-ui/core/TableCell'
 import { useTranslate } from 'react-admin'
-import inflection from 'inflection'
+import { humanize } from 'inflection'
 import { keyMap } from '../hotkeys'
 import { DialogTitle } from './DialogTitle'
 import { DialogContent } from './DialogContent'
@@ -29,7 +29,7 @@ const HelpTable = (props) => {
               {Object.keys(keyMap).map((key) => {
                 const { sequences, name } = keyMap[key]
                 const description = translate(`help.hotkeys.${name}`, {
-                  _: inflection.humanize(name),
+                  _: humanize(name),
                 })
                 return (
                   <TableRow key={key}>

ui/src/layout/Menu.jsx

@@ -6,7 +6,7 @@ import { useTranslate, MenuItemLink, getResources } from 'react-admin'
 import ViewListIcon from '@material-ui/icons/ViewList'
 import AlbumIcon from '@material-ui/icons/Album'
 import SubMenu from './SubMenu'
-import inflection from 'inflection'
+import { humanize, pluralize } from 'inflection'
 import albumLists from '../album/albumLists'
 import PlaylistsSubMenu from './PlaylistsSubMenu'
 import config from '../config'
@@ -42,7 +42,7 @@ const translatedResourceName = (resource, translate) =>
             smart_count: 2,
             _: resource.options.label,
           })
-        : inflection.humanize(inflection.pluralize(resource.name)),
+        : humanize(pluralize(resource.name)),
   })
 
 const Menu = ({ dense = false }) => {

ui/vite.config.js

@@ -16,7 +16,6 @@ export default defineConfig({
       filename: 'sw.js',
       devOptions: {
         enabled: true,
-        type: 'module',
       },
     }),
   ],