HTML5Games chapter 2 first game: the Rick game, I am getting stuck? Help

main.js:20 Uncaught TypeError: Cannot read property ‘appendChild’ of null
at addClicker (main.js:20)

I am working through the GAMES book and in the first game the Rick game I am getting stuck??? Help

I have moved this to the JS forum since it’s a JS question.

Without seeing your code (JS and HTML) it’s difficult to tell what might be wrong, but have you double-checked there’s not a typo in your code?

Edit: Have you got an image named rick.png in your res/images folder?

I presume that it’s this book here?

With Chapter 1, I couldn’t run the npm run build command because the book author was bored with the process.

The chapter 1 repo is at

On using the build command that’s in the package.json file:

"build": "browserify src/main.js -o bundle.js -t [ babelify --presets [ env ] ]"

But that’s called bundle.js whereas the book says:

Okay, rename bundle.js to build.js

"build": "browserify src/main.js -o build.js -t [ babelify --presets [ env ] ]"

I’m told by npm when I attempt to do npm run build

Error: Cannot find module '@babel/core'

So, it’s time to install that.

npm install --save-dev @babel/core

Does it build? No.

Cannot read property 'bindings' of null while parsing file: C:\Users\paulm\OneDrive\Documents\programming\html-games\src\main.js

I find advice elsewhere on the internet that the solution to that is to use a different preset env.

npm install --save-dev @babel/preset-env

and update the start and build scripts in package.json

    "start": "budo src/main.js:build.js --live -- -t [ babelify --presets [ @babel/preset-env ] ]",
    "build": "browserify src/main.js -o build.js -t [ babelify --presets [ @babel/preset-env ] ]"

and now a separate build.js file can be successfully built.

That’s the chapter 1 issues sorted out. If you can find your way to success with things up to there, then chapter 2 builds on top of chapter 1.


To be fair to the author, it’s the babelify package that requires Babel 7 and the corresponding preset. I’m sure this has only become an issue as the book has aged.

Do you have a link to the repo? I’d be interested to see if they included a package-lock.json file.

Yes, the repo is at

Too many times I’ve seen things fail due to changes after publication.

An idea for future books is to include version numbers, which guarantees to keep things working at a later date.


Agree absolutely. This is also what a lock file would accomplish, that one could clone the repo and no matter what has happened since the book was published, one would still have a working program.

And thanks for the link…

1 Like

This is what the book says about the image:

Because this is the DOM, we have to remember our normal website-making rules. The image for the game has to go in the correct folder ( res/images/ ),

Chapter 2 also says:

Starting from our project skeleton again, with our friend rick.png copied into the images directory,

but doesn’t tell you where to get rick.png

The Preface section though does have a Supplementary Materials section, that gives you a link to the code archive at

And there in the ch02 folder, you’ll find the 01-dom-rick-clicker/res/images/rick.png image that you’re looking for.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.