我不能用gulp和react 18来制造所有的包含index.html的非轻错误:最小化的React错误#299

Question

我是一个愉快的反应和吞咽的用户，直到react 18发表。我创建了react应用程序，并使用gulp将所有构建文件内容收集到index.html中。正如我说过的，它适用于18岁之前的react版本。我在开发人员控制台中看到的错误是：

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

复制步骤，编码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

1. 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'));
});

1. npm run build
2. npx gulp
3. npm install -g serve
4. serve -s build
5. 在http://localhost:3000上打开浏览器，打开dev控制台并观察错误

格式化(不受限制的) index.html被发布为这里。

Answer 1

我能够通过在onload侦听器中包装root.render来解决这个问题：

index.js

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