Crank: Invalid value used as weak map key when using parcel

[virtualfunction]

I'm trying to run the hello-world example and get this in the browser, regardless of if I use Parcel 1.x or 2.x it seems

Uncaught TypeError: Invalid value used as weak map key
    at WeakMap.set (<anonymous>)
    at DOMRenderer.Renderer.render (index-e4c589c1.js:2395)
    at Object.8510fce0f5d3df697b09e1e489eff6e6.@bikeshaving/crank (main.js:11)
    at newRequire (main.5174a526.js:68)
    at main.5174a526.js:111
    at main.5174a526.js:134

I have an index.html file which just has a basic head/body and script tag to main.js which has

/** @jsx createElement */
import {createElement} from "@bikeshaving/crank";
import {renderer} from "@bikeshaving/crank/dom";

renderer.render(<div id="hello">Hello world</div>, document.body);

.babelrc

{ "presets": ["@babel/env", "@babel/react"] }

package.json

{
  "name": "crank_test",
  "version": "1.0.0",
  "description": "Test",
  "main": "index.js",
  "author": "Me",
  "license": "UNLICENSED",
  "browserslist": [
    "since 2019-06"
  ],
  "scripts": {
    "start": "PARCEL_WORKERS=`nproc` parcel src/index.html"
  },
  "devDependencies": {
    "@babel/core": "^7.10.4",
    "@bikeshaving/crank": "^0.1.6",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-react": "^7.10.4"
  },
  "dependencies": {
    "parcel": "next",
    "sass": "^1.26.8"
  }
}

[brainkim]

Hmmm. It might be that document.body is null? My current guess is that you’re calling rendeer.render while document.body is null (this would be the case if your script is executing in the head). You can solve this problem by moving the script to the bottom of the body or adding a defer attr to the script (<script src="./main.js" defer></script>). Alternatively, you can listen for the load or DOMContentLoaded event on the DOM. You can confirm my theory by logging document.body at the moment you call render.

I also recommend upgrading crank to ^0.2, there are lots of improvements there.

[virtualfunction]

Thanks, moving this did the trick. Not sure why I didn't pick up on this before... I pretty much checked everything else but assumed document.body to point to some placeholder root during the load process.

[virtualfunction]

It might good to document this in case others fall into this trap. The crypticness of error message tends to make others look in the wrong place

[brainkim]

@virtualfunction You're right! The error message should be clearer in 0.2.1!

[brainkim]

BTW This article is really good for catching up on the behavior of script tags throughout the document. https://eager.io/blog/everything-I-know-about-the-script-tag/