Use JSX automatic import transform

.eslintrc.json

@@ -39,6 +39,7 @@
     "no-var": 2,
     "one-var": [2, "never"],
     "quotes": [2, "single"],
+    "react/react-in-jsx-scope": 0,
     "semi": 2,
     "space-before-function-paren": 2,
     "spaced-comment": 2,

rollup.config.js

@@ -20,6 +20,7 @@ const serverBundle = {
 		'node:http',
 		'prop-types',
 		'react',
+		'react/jsx-runtime',
 		'react-bootstrap-typeahead',
 		'react-dom/server',
 		'react-helmet',
@@ -34,6 +35,7 @@ const serverBundle = {
 	},
 	plugins: [
 		esbuild({
+			jsx: 'automatic',
 			jsxFactory: 'React.createElement',
 			jsxFragment: 'React.Fragment'
 		}),
@@ -61,7 +63,12 @@ const clientScriptsBundle = {
 		}),
 		babel({
 			babelHelpers: 'bundled',
-			presets: ['@babel/preset-react'],
+			presets: [
+				[
+					'@babel/preset-react',
+					{ runtime: 'automatic' }
+				]
+			],
 			extensions: ['.js', '.jsx']
 		}),
 		commonjs(),

src/react/AppRoutes.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Route, Routes, useLocation } from 'react-router-dom';
 
 import Layout from './Layout.jsx';

src/react/Layout.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { connect } from 'react-redux';
 import { Helmet } from 'react-helmet';
 import { useMatch } from 'react-router-dom';

src/react/client-mount.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { hydrateRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';

src/react/components/AppendedCoEntities.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import { Entities } from './index.js';
 

src/react/components/AppendedDate.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import { formatDate } from '../../lib/format-date.js';
 

src/react/components/AppendedDepictions.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import { Fragment } from 'react';
 
 const AppendedDepictions = props => {
 
@@ -11,7 +11,7 @@ const AppendedDepictions = props => {
 			{
 				depictions
 					.map((depiction, index) =>
-						<React.Fragment key={index}>
+						<Fragment key={index}>
 
 							{
 								depiction.displayName && (
@@ -33,7 +33,7 @@ const AppendedDepictions = props => {
 								)
 							}
 
-						</React.Fragment>
+						</Fragment>
 					)
 					.reduce((accumulator, currentValue) => [accumulator, ' /', currentValue])
 			}

src/react/components/AppendedEmployerCompany.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import { CommaSeparatedInstanceLinks, InstanceLink } from './index.js';
 

src/react/components/AppendedEntities.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import { Entities } from './index.js';
 

src/react/components/AppendedFormatAndYear.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 const AppendedFormatAndYear = props => {
 

src/react/components/AppendedMembers.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import { CommaSeparatedInstanceLinks } from './index.js';
 

src/react/components/AppendedPerformers.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import { Fragment } from 'react';
 
 import { InstanceLink, JoinedRoles } from './index.js';
 
@@ -15,7 +15,7 @@ const AppendedPerformers = props => {
 			{
 				performers
 					.map((performer, index) =>
-						<React.Fragment key={index}>
+						<Fragment key={index}>
 
 							<InstanceLink instance={performer} />
 
@@ -53,7 +53,7 @@ const AppendedPerformers = props => {
 								)
 							}
 
-						</React.Fragment>
+						</Fragment>
 					)
 					.reduce((accumulator, currentValue) => [accumulator, ' / ', currentValue])
 			}

src/react/components/AppendedProductionDates.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import { formatDate } from '../../lib/format-date.js';
 

src/react/components/AppendedProductionTeamCredits.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import { Fragment } from 'react';
 
 import { AppendedCoEntities, AppendedEmployerCompany, AppendedMembers } from './index.js';
 
@@ -15,7 +15,7 @@ const AppendedProductionTeamCredits = props => {
 			{
 				credits
 					.map((credit, index) =>
-						<React.Fragment key={index}>
+						<Fragment key={index}>
 
 							<>{ credit.name }</>
 
@@ -37,7 +37,7 @@ const AppendedProductionTeamCredits = props => {
 								)
 							}
 
-						</React.Fragment>
+						</Fragment>
 					)
 					.reduce((accumulator, currentValue) => [accumulator, '; ', currentValue])
 			}

src/react/components/AppendedQualifier.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 const AppendedQualifier = props => {
 

src/react/components/AppendedRoles.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import { JoinedRoles } from './index.js';
 

src/react/components/AppendedVenue.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import { VenueLinkWithContext } from './index.js';
 

src/react/components/CharactersList.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import { AppendedQualifier, InstanceLink, ListWrapper } from './index.js';
 

src/react/components/CommaSeparatedInstanceLinks.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import { Fragment } from 'react';
 
 import { InstanceLink } from './index.js';
 
@@ -13,11 +13,11 @@ const CommaSeparatedInstanceLinks = props => {
 			{
 				instances
 					.map((instance, index) =>
-						<React.Fragment key={index}>
+						<Fragment key={index}>
 
 							<InstanceLink key={index} instance={instance} />
 
-						</React.Fragment>
+						</Fragment>
 					)
 					.reduce((accumulator, currentValue) => [accumulator, ', ', currentValue])
 			}

src/react/components/CommaSeparatedMaterials.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import { Fragment } from 'react';
 
 import { MaterialLinkWithContext } from './index.js';
 
@@ -13,11 +13,11 @@ const CommaSeparatedMaterials = props => {
 			{
 				materials
 					.map((material, index) =>
-						<React.Fragment key={index}>
+						<Fragment key={index}>
 
 							<MaterialLinkWithContext material={material} />
 
-						</React.Fragment>
+						</Fragment>
 					)
 					.reduce((accumulator, currentValue) => [accumulator, ', ', currentValue])
 			}

src/react/components/CommaSeparatedProductions.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import { Fragment } from 'react';
 
 import { ProductionLinkWithContext } from './index.js';
 
@@ -13,11 +13,11 @@ const CommaSeparatedProductions = props => {
 			{
 				productions
 					.map((production, index) =>
-						<React.Fragment key={index}>
+						<Fragment key={index}>
 
 							<ProductionLinkWithContext production={production} />
 
-						</React.Fragment>
+						</Fragment>
 					)
 					.reduce((accumulator, currentValue) => [accumulator, ', ', currentValue])
 			}

src/react/components/CreativeProductionsList.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import { AppendedProductionTeamCredits, ProductionLinkWithContext, ListWrapper } from './index.js';
 

src/react/components/CrewProductionsList.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import { AppendedProductionTeamCredits, ProductionLinkWithContext, ListWrapper } from './index.js';
 

src/react/components/Entities.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import { Fragment } from 'react';
 
 import { AppendedMembers, InstanceLink } from './index.js';
 
@@ -13,7 +13,7 @@ const Entities = props => {
 			{
 				entities
 					.map((entity, index) =>
-						<React.Fragment key={index}>
+						<Fragment key={index}>
 
 							<InstanceLink instance={entity} />
 
@@ -23,7 +23,7 @@ const Entities = props => {
 								)
 							}
 
-						</React.Fragment>
+						</Fragment>
 					)
 					.reduce((accumulator, currentValue) => [accumulator, ', ', currentValue])
 			}

src/react/components/ErrorMessage.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 import { Helmet } from 'react-helmet';
 
 import { PageTitle } from './index.js';

src/react/components/FestivalLinkWithContext.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import { InstanceLink, PrependedSurInstance } from './index.js';
 

src/react/components/Footer.jsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 const Footer = () => {
 
 	return (

src/react/components/Header.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link } from 'react-router-dom';
 
 import { SearchBar } from './index.js';

src/react/components/InstanceDocumentTitle.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 import { Helmet } from 'react-helmet';
 
 import { MODEL_TO_DISPLAY_NAME_MAP } from '../../utils/constants.js';

src/react/components/InstanceFacet.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 const InstanceFacet = props => {
 

src/react/components/InstanceLabel.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import { MODEL_TO_DISPLAY_NAME_MAP } from '../../utils/constants.js';
 

src/react/components/InstanceLink.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 import { NavLink } from 'react-router-dom';
 
 import { MODEL_TO_ROUTE_MAP } from '../../utils/constants.js';

src/react/components/InstanceLinksList.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import { InstanceLink, ListWrapper } from './index.js';
 

src/react/components/JoinedRoles.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import { Fragment } from 'react';
 
 import { AppendedQualifier, InstanceLink } from './index.js';
 
@@ -13,7 +13,7 @@ const JoinedRoles = props => {
 			{
 				instances
 					.map((instance, index) =>
-						<React.Fragment key={index}>
+						<Fragment key={index}>
 
 							<span className="fictional-name-text">
 
@@ -37,7 +37,7 @@ const JoinedRoles = props => {
 								)
 							}
 
-						</React.Fragment>
+						</Fragment>
 					)
 					.reduce((accumulator, currentValue) => [accumulator, ' / ', currentValue])
 			}

src/react/components/ListWrapper.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 const ListWrapper = props => {
 

src/react/components/MaterialLinkWithContext.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import { AppendedFormatAndYear, InstanceLink, PrependedSurInstance, WritingCredits } from './index.js';
 

src/react/components/MaterialsList.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import { ListWrapper, MaterialLinkWithContext } from './index.js';
 

src/react/components/Navigation.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link } from 'react-router-dom';
 
 const Navigation = () => {