I am not able to use gulp with react 18 to make all inclusive index.html, Uncaught Error: Minified React error #299

Question

I was a happy user of react and gulp until react 18 was published. I created react app and used gulp to collect all build files content into index.html. As I said it works fine with react versions prior to 18. The error I see in developers console is:

Uncaught Error: Minified React error #299; visit https://reactjs.org/docs/error-decoder.html?invariant=299 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at n.createRoot ((index):6144:55)
    at (index):6952:27
    at (index):6953:23
    at (index):6954:15

Steps to reproduce, credits to Coding Shiksha:

1. npx create-react-app sampleapp
2. cd sampleapp
3. npm install --save-dev gulp gulp-inline-source gulp-replace
4. Ceate a .env file inside the root folder and copy paste the below code

INLINE_RUNTIME_CHUNK=false
GENERATE_SOURCEMAP=false
SKIP_PREFLIGHT_CHECK=true

5. create a gulpfile.js inside the root directory and copy paste the following code

const gulp = require('gulp');
const inlinesource = require('gulp-inline-source');
const replace = require('gulp-replace');

gulp.task('default', () => {
  return gulp
    .src('./build/*.html')
    .pipe(replace('.js"></script>', '.js" inline></script>'))
    .pipe(replace('rel="stylesheet">', 'rel="stylesheet" inline>'))
    .pipe(
      inlinesource({
        compress: false,
        ignore: ['png'],
      })
    )
    .pipe(gulp.dest('./build'));
});

6. npm run build
7. npx gulp
8. npm install -g serve
9. serve -s build
10. open browser at http://localhost:3000, open dev console and observe the error

The formatted (unminified) index.html is published here.

Answer 1

I was able to solve this by wrapping root.render in an onload listener:

index.js

document.addEventListener("DOMContentLoaded", (event) => {
  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
});