Error: You may need an additional loader to handle the result of these loaders.

[sal-420]

I've tried several variations for the 'presets' and 'plugins' options to no avail

The react app is client-side rendering running the following

• react@16.13.1
• react-helmet-async@2.0.5
• @babel/plugin-transform-class-properties": "^7.25.9"
• multi-page site

See package.json below for all dependencies and versions and source code

The complete error

./node_modules/react-helmet-async/lib/index.esm.js 374:12
Module parse failed: Unexpected token (374:12)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| var isDocument = !!(typeof window !== "undefined" && window.document && window.document.createElement);
| var HelmetData = class {
>   instances = [];
|   canUseDOM = isDocument;
|   context;

.bablelrc file

{
    "presets": [
        "env",
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "transform-object-rest-spread",
        "transform-react-jsx",
        ["@babel/plugin-proposal-class-properties", {
             "loose": true }
        ]
    ]
}

package.json

"dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.27.2",
    "bootswatch": "^4.5.0",
    "cors": "^2.8.5",
    "react": "^16.13.1",
    "react-bootstrap": "^1.1.1",
    "react-dom": "^16.13.1",
    "react-helmet-async": "^2.0.5",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "react-slidez": "^0.0.31"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-transform-class-properties": "^7.25.9"
  }

index.js

import React from "react";
import { Helmet, HelmetProvider } from 'react-helmet-async';
import ReactDOM from "react-dom";
import "bootswatch/dist/darkly/bootstrap.min.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(
  <React.StrictMode>
    <HelmetProvider>
      <App />
      <Helmet>
        <title>Hello World</title>
        <link rel="canonical" href="https://www.tacobell.com/" />
      </Helmet>
    </HelmetProvider>
  </React.StrictMode>,
  document.getElementById('web-ui-root')
);

App.js

import React from "react";
import { BrowserRouter, Route } from 'react-router-dom';
import MenuNavBar from "./Components/MenuNavBar";
import Home from "./Pages/Home";
import About from "./Pages/About";
import Partners from './Pages/Partners';
Export default class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
          <MenuNavBar />
          <link rel="canonical" href="https://notoriousrugs.io/"></link>
          <main role="main" className="container-fluid">
            <Route exact path="/" component={Home}></Route>
            <Route exact path="/About" component={About}></Route>
            <Route exact path="/Partners" component={Partners}></Route>
          </main>
        {/* <Footer /> */}
      </BrowserRouter>
    );
  }