Issue with Blank Screen and JavaScript Errors on MIT App Inventor Dev Server

Open Source Development
1

Hello,

I have been working on the MIT App Inventor development environment on my Mac (M1). Initially, I set up the server successfully, and everything worked fine without any issues. However, when I returned to run the server again after some time, I started encountering problems.

I launched the development server using the following command:

/Users/nayakdivyanshu/Downloads/google-cloud-sdk/bin/java_dev_appserver.sh --port=8888 --address=0.0.0.0 appengine/build/war/

The server started without any errors in the terminal, and I accessed the development instance at http://localhost:8888. However, the browser displays a blank screen, and the developer console shows several JavaScript errors.

Errors in the Developer Console

  1. aiblockly-0.nocache.js:

    Uncaught TypeError: Cannot read properties of undefined (reading 'register')  
    at aiblockly-0.nocache.js:5465:17461  
    at aiblockly-0.nocache.js:5465:38824  
    at aiblockly-0.nocache.js:5465:38830  
    at aiblockly-0.nocache.js:5465:247  
    at aiblockly-0.nocache.js:5465:321

  2. scroll-options-5.0.11.min.js:

    Uncaught TypeError: Class extends value undefined is not a constructor or null  
    at scroll-options-5.0.11.min.js:2:1069  
    at scroll-options-5.0.11.min.js:2:7868  
    at scroll-options-5.0.11.min.js:2:7874  
    at scroll-options-5.0.11.min.js:2:247  
    at scroll-options-5.0.11.min.js:2:321

  3. workspace-multiselect-0.1.14-beta1.min.js:

    Uncaught TypeError: e.Css.register is not a function  
    at workspace-multiselect-0.1.14-beta1.min.js:2:75842  
    at workspace-multiselect-0.1.14-beta1.min.js:2:91482  
    at workspace-multiselect-0.1.14-beta1.min.js:2:91488  
    at workspace-multiselect-0.1.14-beta1.min.js:2:247  
    at workspace-multiselect-0.1.14-beta1.min.js:2:321

  4. keyboard-navigation-0.5.13.min.js:

    Uncaught TypeError: Class extends value undefined is not a constructor or null  
    at keyboard-navigation-0.5.13.min.js:2:1657  
    at keyboard-navigation-0.5.13.min.js:2:26813  
    at keyboard-navigation-0.5.13.min.js:2:26819  
    at keyboard-navigation-0.5.13.min.js:2:247  
    at keyboard-navigation-0.5.13.min.js:2:321

Additionally, the "Network" tab in the browser shows that some JavaScript files are failing to load with a 404 (Not Found) error, such as deps.js.

Steps I Have Tried

  1. Rebuilding the Project:
    Ran ant clean and then ant. The build completes successfully, but the issue persists.

  2. Cleared Cache and Hard Reload:
    Cleared the browser cache and performed a hard reload, but it didn’t resolve the issue.

Environment Details

  • macOS: Mac M1
  • Java Version:
    openjdk 11.0.25 2024-10-15 LTS  
OpenJDK Runtime Environment Zulu11.76+21-CA (build 11.0.25+9-LTS)  
OpenJDK 64-Bit Server VM Zulu11.76+21-CA (build 11.0.25+9-LTS, mixed mode)
  • Apache Ant Version:
    Apache Ant(TM) version 1.10.15 compiled on August 25 2024
  • Google Cloud SDK: Installed and configured

Request for Help

I would appreciate it if someone could guide me on resolving this issue.

Thank you in advance for your assistance!

2

I believe deleting the existing appinventor-sources folder and recloning the repository might resolve this issue?

3

My guess is that you may have been switching from an older commit to a newer commit since the nb200 release last week. To do this, you first have to deinit the lib/blockly submodule since going forward we will no longer rely on this approach to embedding Blockly in App Inventor. If you don't do this before switching branches you will likely end up with the system not compiling correctly. While deleting the whole repo and starting over is one approach, it is certainly less optimal than switching branches correctly.

1 Like
4

Exactly...it would be useful to have a little instruction for laymen like me, step by step what to do to correctly update the local repository.

1 Like
5

Sure thing. Note that the following instructions assume that you have your git remotes set up following the instructions in README.md that have origin as your fork and upstream as MIT's repository. You can confirm this by running git remote -v:

appinventor$ git remote -v
origin	git@github.com:ewpatton/appinventor-sources.git (fetch)
origin	git@github.com:ewpatton/appinventor-sources.git (push)
upstream	https://github.com/mit-cml/appinventor-sources.git (fetch)
upstream	https://github.com/mit-cml/appinventor-sources.git (push)

To update your copy of master to match ours:

appinventor$ git submodule deinit lib/blockly
appinventor$ git fetch upstream
appinventor$ git merge --ff-only upstream/master
appinventor$ git submodule update
appinventor$ git push origin master  # update your fork on GitHub

You may also want to update your copy of ucr:

# Assuming you have run the above commands already and the submodule deinit is still in effect
appinventor$ git checkout ucr
appinventor$ git merge --ff-only upstream/ucr
appinventor$ git push origin ucr

Generally, we update the submodules very rarely. If you are switching between branches and encounter any issues, you can be more proactive by deinitializing and reinitializing the submodules:

appinventor$ git submodule deinit .
appinventor$ git checkout <branch-name>
appinventor$ git submodule update --init

When switching to older branches, you may get warnings like this:

warning: unable to rmdir 'appinventor/lib/blockly': Directory not empty

which suggests you have content in your working directory that would not be compatible with the submodule switch.

When switching to newer branches after the latest Blockly update, you will get errors like:

error: The following untracked working tree files would be overwritten by checkout:
	appinventor/lib/blockly/blockly_compressed.js
	appinventor/lib/blockly/media/1x1.gif
	appinventor/lib/blockly/media/click.mp3
	appinventor/lib/blockly/media/click.ogg
	appinventor/lib/blockly/media/click.wav
	appinventor/lib/blockly/media/delete.mp3
	appinventor/lib/blockly/media/delete.ogg
	appinventor/lib/blockly/media/delete.wav
	appinventor/lib/blockly/media/disconnect.mp3
	appinventor/lib/blockly/media/disconnect.ogg
	appinventor/lib/blockly/media/disconnect.wav
	appinventor/lib/blockly/media/handclosed.cur
	appinventor/lib/blockly/media/handdelete.cur
	appinventor/lib/blockly/media/handopen.cur
	appinventor/lib/blockly/media/quote0.png
	appinventor/lib/blockly/media/quote1.png
	appinventor/lib/blockly/media/sprites.png
	appinventor/lib/blockly/media/sprites.svg
	appinventor/lib/blockly/msg/json/en.json
Please move or remove them before you switch branches.
Aborting

At which point you'll need to run the git submodule deinit lib/blockly command from the appinventor directory again.

For existing PRs, we will take care of updating them during review.

2 Likes
6

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