immutable_crash.tsx

/*
  This short Typescript snippet works with:
    "dependencies": {
      "immutable": "^4.0.0-rc.12",
      "preact": "^10.1.0",
      "webpack": "^4.29.6",
      "webpack-cli": "^3.2.3"
    },
    "devDependencies": {
      "ts-loader": "^6.2.1",
      "copy-webpack-plugin": "^5.1.0",
      "source-map-loader": "^0.2.4",
      "typescript": "^3.7.3"
    }

  But it CRASHES with:
    "dependencies": {
      "immutable": "^4.0.0-rc.12",
      "preact": "^10.4.8",
      "webpack": "^4.44.1",
      "webpack-cli": "^3.3.12"
    },
    "devDependencies": {
      "ts-loader": "^8.0.3",
      "copy-webpack-plugin": "^6.1.0",
      "source-map-loader": "^1.1.0",
      "typescript": "^4.0.2"
    }

  Somehow, immutable.js goes into an infinite loop with the second set of packages,
  even though immutable.js is identical between the two.
*/

import { h, render, Component } from "preact";
import { useContext, useState, useEffect } from "preact/hooks";
import { OrderedSet } from "immutable"

declare let require:any

let parentNode = document.getElementById("content")
let replaceNode = document.getElementById("initial-loading")

let demoSet = OrderedSet<string>().add("one").add("two")

class Content extends Component<any, any> {
  constructor(props:{}) {
    super(props);
    this.state = {};
  }

  render() {
    // THE CRASH HAPPENS HERE; IF I DON'T RETURN JSX FROM THE MAP FN, IT WORKS FINE
    const divArray = demoSet.map(
      s => {
        console.log("Inside map", typeof(s), s)
        return <div className="Id">{s}</div>
      }
    ).toJS()

    return (
      <div>Hello<br />{divArray}</div>
    )
  }
}

render(
  <Content />,
  parentNode, replaceNode
);