Design view shows up blank white and unknown components found error

Wappler General Bugs
#1

Wappler Version : 3.7.3
Operating System : Windows 10
Server Model: NodeJS
Database Type: MariaDB
Hosting Type: Docker

Expected behavior

The design view on main.ejs should show all the components associated with that page.

Actual behavior

When I load main.ejs, it flashes the design view of main.ejs, then the design view of index.ejs, then it shows a blank white screen in the design view.

How to reproduce

  • Load Wappler from the desktop, then select anything on the app structure on main.ejs
    Screenshot_361
    This is what it looks like for me for main.ejs
  • Screenshot_356
    Screenshot_3561863Ă—846 52.5 KB

    This is what shows up when I preview main.ejs in the broswer
    Screenshot_360
    These are the errors that show at the bottom of the design view for main.ejs and main2.ejs:
    Screenshot_363
    Screenshot_3631484Ă—295 14.3 KB
  • Strangely, all the code shows up normally though in main.ejs and the app structure is there.
    Screenshot_357
    Screenshot_3571422Ă—855 80.2 KB
    Screenshot_358
    Screenshot_3581462Ă—879 66.7 KB
  • The blank white design page shows up on main2.ejs (a new layout page I created to test the bug) when I connected the register.ejs and the login.ejs (they are both content pages) to the new page, main2.ejs.

When opening them in the browser, main.ejs and main2.ejs show the error status 400 in the screenshot I added above. I did not delete the files.

The components of the warning messages of “unknown component found,” are in only in my index.ejs page. But the warnings show in my main.ejs or main2.ejs pages. The warning messages are only in the design view of main and main2, but they disappear in the code view.

I tried restarting wappler, docker, and my laptop. None of these fixed it.

#2

Update: I noticed that everything shows up again in the design view when I toggle app connect mode to off, but the browser still doesn’t load.

#3

Is there a chance of uploading the site to a (temporary) remote location so that we can have a look at the code.

#5

Not sure if I am doing it right, but when I switched my server side project hosting type from docker to firebase, the files in the project folder disappear. When I change it back to docker, the files in the project folder reappear. Here’s a forum post that I made: How to transfer files from docker to firebase

Also, this is my first time hosting :sweat_smile:

#6

Didn’t figure out how to upload the site, but I think the reason it glitched was cause I forgot to save my main.ejs layout page before creating content pages using main.ejs’s layout…

Restarted the project, so don’t need a solution on this and everything’s working fine on the new one but figured I should post just in case @Teodor

1 Like
#7

Hi guy, not sure if this will help discover the issue, I’m still finding my way around Wappler…
I encountered the same issue as Boost, while following the tutorial:

Then I tried creating a layout page as explained here: https://docs.wappler.io/t/creating-template-based-pages-and-layout-in-wappler-with-nodejs/21430

Deleting the “view_cars” page and recreating it under the same name still didn’t resolve the issue until I used a different page name.

Now my “cars” page shows its content in a browser, as well as the header/footer from the layout page “main”
However, when trying to display the layout page “main” alone in the browser, I get the following error:
{
“status”: “404”,
“message”: “/main not found.”
}