Apollo: Dreamview is blank page in chrome

[trooperli]

System information

• OS Platform and Distribution (e.g., Linux Ubuntu 14.04): 14.04
• Apollo installed from (source or binary): source
• Apollo version (1.0, 1.5, 2.0, 2.5, 3.0): 3.5

Steps to reproduce the issue:

• Please use bullet points and include as much details as possible:
  Follow the instructions given in https://github.com/ApolloAuto/apollo/blob/master/docs/howto/how_to_launch_Apollo.md

When browsing dreamview at localhost:8888 in chrome, I got a blank page while it can be shown in firefox with problem "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5001/. (Reason: CORS request did not succeed)".

This is similar to #6479 and #6467. I tried the solution in #6479 but it didn't work for me.

Supporting materials (screenshots, command lines, code/script snippets):

Please see attachment for localhost:8888 in chrome and firefox, respectively.

[siyangy]

Can you take a look at the developer console of Chrome when seeing such a blank page? Additionally, can you check this file https://github.com/ApolloAuto/apollo/blob/master/modules/dreamview/frontend/dist/app.bundle.js in your local to make sure git lfs has pulled it correctly?

[trooperli]

Can you take a look at the developer console of Chrome when seeing such a blank page? Additionally, can you check this file https://github.com/ApolloAuto/apollo/blob/master/modules/dreamview/frontend/dist/app.bundle.js in your local to make sure git lfs has pulled it correctly?

Hi Siyangy,
From the console I got the following error:
~~~~~~~~~~~~~~~~~
Loading Json file: parameters.json
(index):15 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
loadJSON @ (index):15
(index):23 Failed to load resource: the server responded with a status of 404 (Not Found)
loadJSON @ (index):23
app.bundle.js:1 Uncaught SyntaxError: Unexpected identifier
~~~~~~~~~~~~~~~~~
I have app.bundle.js under apollo/modules/dreamview/frontend, its content is shown below:

version https://git-lfs.github.com/spec/v1
oid sha256:dff876ee66ff3b341478466f2631fb0d638e067969cf4c3ce72a79fca2564d8b
size 1821795

Thanks for your help!

[siyangy]

This does seem to be caused by git lfs, when being downloaded correctly, the file should be with its real content instead of just meta information as you are seeing.

[xiaoxq]

Could you try
"""
bazel clean
git lfs fetch
"""
and then build again before running the bootstrap.sh?

Thanks!

[trooperli]

This does seem to be caused by git lfs, when being downloaded correctly, the file should be with its real content instead of just meta information as you are seeing.

In chrome developer console, I could see the source as following:
~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~

[trooperli]

Could you try
"""
bazel clean
git lfs fetch
"""
and then build again before running the bootstrap.sh?

Thanks!

Hi xiaoxq,
I followed your solution still got the same problem...

[aboarya]

I can also confirm that I am still having the same problem on Chrome 71.0.3578.98 and Firefox on Ubuntu 18.10, followed the below steps based on 6479

$ cd apollo-repo/
$ ~/apollo-repo$ git lfs fetch --all

followed with dev_start and dev_into, and rebuild.

But the app.bundle.js is still only showing metadata and not the actual content.

[aboarya]

The problem for me (and I expect for some others) was that git lfs was not initialized. So in summary:

git clone https://github.com/ApolloAuto/apollo.git
# you only have to do this one time,
# if you have never used git lfs, then that's why it's not working
git lfs install
git lfs fetch --all

You can now confirm that app.bundle.js is actual content

$ cat modules/dreamview/frontend/dist/app.bundle.js

Will be actual js code and not git lfs metadata

[trooperli]

The problem for me (and I expect for some others) was that git lfs was not initialized. So in summary:

git clone https://github.com/ApolloAuto/apollo.git
# you only have to do this one time,
# if you have never used git lfs, then that's why it's not working
git lfs install
git lfs fetch --all

You can now confirm that app.bundle.js is actual content

$ cat modules/dreamview/frontend/dist/app.bundle.js

Will be actual js code and not git lfs metadata

I followed your solution and now I could see app.bundle.js is actually code and I did the rebuild, still it is blank page in chrome.

[trooperli]

Now I can see that app.bundle.js is code but when I check the developer console in chrome, the source code is still metadata shown below:
~~~~~~~~~~~~~~
version https://git-lfs.github.com/spec/v1
oid sha256:dff876ee66ff3b341478466f2631fb0d638e067969cf4c3ce72a79fca2564d8b
size 1821795
~~~~~~~~~~~~~~

How could I solve this issue?
Thanks!

[aboarya]

Did you run bootstrap again after you re-built?

If not, you can try this: it maybe overkill, but I would stop existing containers using:

# warning: this will stop and remove all running containers
$ docker stop `docker ps -qa`
$ docker rm `docker ps -qa`

Then do the dev_start and re-build

$ bash docker/scripts/dev_start.sh
$ bash docker/scripts/dev_into.sh
$ bash apollo.sh build_cpu # or just build with GPU
$ bash scripts/bootstrap.sh
# go to http://localhost:8888

[trooperli]

The problem is indeed caused by git lfs. Just follow aboarya's solution:
~~~~~~~~~
git clone https://github.com/ApolloAuto/apollo.git

you only have to do this one time,

if you have never used git lfs, then that's why it's not working

git lfs install
git lfs fetch --all
~~~~~~~~~

And then rebuild. The reason that I did not succeed in the first place is because somehow the nividia driver was not installed in docker. Please make sure nvidia-smi works under docker environment.

[jinfagang]

@trooperli

 git-lfs fetch --all
fetch: 1513 object(s) found, done                                                                                                                                                  
fetch: Fetching all references...

Is this fetched? same output with git lfs fetch --all, but the file still just meta not actually one