Most confusing Invariant Violation in react

Question

Consider the following:

import React from 'react';
import ReactDOM from 'react-dom';
import Game from './game';

const game = document.getElementById('game');

if (game !== null) {
  ReactDOM.render(
    <React.Strict>
      <Game />
    </React.Strict>,
    game
  );
}

Game is defined as such:

import React from 'react';

export default class Game extends React.Component {
  constructor(props) {
    super(props);

    this.apiUrl = window.location.protocol + '//' + window.location.host + '/';
  }

  render() {
    return (
      <div>


      </div>
    )
  }
}

I removed everything from it, there wasn't much to begin with but still, in the browser console I see:

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Last I checked I was exporting and importing correctly. What am I missing this should not fail the React.Strict .

Answer 1

根据这里的文档，它应该是<React.StrictMode> ，而不是<React.Strict> 。