Using React with Node results in Uncaught SyntaxError: Cannot use import statement outside a module - node.js

Question

I'm trying to use Node and React together and I'm having a terrible time getting them to play nicely. Any guidance in pointing out what I'm doing wrong would be hugely helpful.
As a precursor, I've already reviewed this question and tried everything I can based on the answers there, but no luck.
Setup
I'm currently running Node version 16.15.1
I've installed React via the instructions found here
Attempt 1
Straight out of the gate, I get this error: Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:1:1)
index.js is a standard React file. Line 1 starts like this: import React from 'react';
Attempt 2
One of the answers was to add "type": "module" to the package.json file, but that produced this error: ReferenceError: require is not defined in ES module scope, you can use import instead This file is being treated as an ES module because it has a '.js' file extension and 'C:\Users\path\to\app\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
The lift for me here makes this impractical. I'm using a Node template that has a ton of stuff baked in already...dozens of files, and probably hundreds of 'require' statements. And many the files that were 'required' would need modification to export everything in the right format. It's just...a lot.
Attempt 3
So then I tried to add the module type to the script tag itself, i.e. <script type="module" src="blah">. This produced the following error: Uncaught SyntaxError: Unexpected token '<' (at index.js:9:3).
Attempt 4
Finally, I tried changing the React file from index.js to index.mjs which produced this error: Uncaught SyntaxError: Cannot use import statement outside a module (at index.mjs:1:1).
I've also tried combining the .mjs file extension with adding the type="module" to the script tag with no luck. Any help would be very much appreciated!
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();
Additional Context
I've started with meanjs.org as the template, but it's several years out of date. I've made updates to get the server running, and have scrubbed Angular out of the public directory, where I installed React in. I can run React by itself without issues, but when I try to add a root element in my node app and include React's index.js file, it most definitely imports the file and that's where it chokes.
Here's my package.json file:
{
"name": "test",
"description": "Test app",
"version": "0.1.0",
"private": false,
"author": "Test",
"license": "MIT",
"repository": {
"type": "git",
"url": ""
},
"engines": {
"node": ">=16.0.0",
"npm": ">=8.0.0"
},
"scripts": {
"update": "npm update && npm prune",
"clean": "rm -rf node_modules/ public/lib/",
"reinstall": "npm cache clean && npm run clean && npm install",
"start": "gulp",
"start:prod": "gulp prod",
"start:debug": "node-debug --web-host 0.0.0.0 server.js & gulp debug",
"gulp": "gulp",
"lint": "gulp lint",
"test": "gulp test",
"test:server": "gulp test:server",
"test:server:watch": "gulp test:server:watch",
"test:client": "gulp test:client",
"test:e2e": "gulp test:e2e",
"test:coverage": "gulp test:coverage",
"generate-ssl-certs": "scripts/generate-ssl-certs.sh",
"seed": "gulp seed",
"seed:prod": "gulp seed:prod",
"seed:test": "gulp seed:test",
"snyk-protect": "snyk protect",
"prepare": "npm run snyk-protect"
},
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"acl": "^0.4.11",
"amazon-s3-uri": "0.0.3",
"async": "~2.5.0",
"aws-sdk": "^2.548.0",
"body-parser": "^1.19.0",
"chalk": "~2.1.0",
"compression": "^1.7.4",
"connect-flash": "~0.1.1",
"connect-mongo": "^4.6.0",
"cookie-parser": "^1.4.4",
"del": "~3.0.0",
"eslint-config-airbnb": "~6.0.2",
"express": "^4.17.1",
"express-hbs": "^1.0.5",
"express-session": "^1.17.0",
"generate-password": "~1.3.0",
"glob": "^7.1.4",
"gulp": "^4.0.2",
"gulp-angular-templatecache": "~2.0.0",
"gulp-autoprefixer": "~4.0.0",
"gulp-concat": "~2.6.1",
"gulp-csslint": "^1.0.1",
"gulp-csso": "^3.0.1",
"gulp-eslint": "^4.0.0",
"gulp-imagemin": "~5.0.0",
"gulp-less": "^4.0.0",
"gulp-load-plugins": "~1.5.0",
"gulp-ng-annotate": "~2.0.0",
"gulp-nodemon": "^2.4.1",
"gulp-refresh": "^1.1.0",
"gulp-rename": "^1.2.3",
"gulp-rev": "~8.0.0",
"gulp-sass": "^5.1.0",
"gulp-uglify": "^3.0.2",
"helmet": "^3.21.1",
"imagemin-pngquant": "~6.0.0",
"jasmine-core": "~3.0.0",
"lodash": "^4.17.15",
"lusca": "^1.5.2",
"method-override": "^2.3.10",
"mongoose": "^6.4.0",
"morgan": "^1.9.1",
"multer": "^1.3.1",
"multer-s3": "^2.9.0",
"node-sass": "^6.0.0",
"nodemailer": "~4.0.1",
"owasp-password-strength-test": "~1.3.0",
"passport": "~0.3.2",
"passport-facebook": "~2.1.1",
"passport-github": "~1.1.0",
"passport-google-oauth": "~1.0.0",
"passport-linkedin": "~1.0.0",
"passport-local": "~1.0.0",
"passport-paypal-openidconnect": "^0.1.1",
"passport-twitter": "~1.0.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"run-sequence": "~2.1.0",
"sass": "^1.53.0",
"serve-favicon": "^2.5.0",
"snyk": "^1.234.2",
"socket.io": "^2.3.0",
"validator": "~9.4.1",
"web-vitals": "^2.1.4",
"winston": "~2.3.1",
"wiredep": "~4.0.0"
},
"devDependencies": {
"coveralls": "^2.13.3",
"gulp-istanbul": "^1.1.3",
"gulp-mocha": "~3.0.1",
"gulp-protractor": "~4.1.0",
"karma": "6.4.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage": "^1.1.2",
"karma-jasmine": "^1.1.2",
"karma-mocha-reporter": "^2.2.5",
"karma-ng-html2js-preprocessor": "~1.0.0",
"semver": "~5.4.1",
"should": "~11.2.1",
"supertest": "~3.0.0"
},
"snyk": true,
"proxy": "http://localhost:3000"
}
The package.json file from React is unchanged from the original install.
Final note: I'm a self-taught developer. Please be gentle. :)