Blank panel after update 3.9.4 -> 3.10.0.1 : ReferenceError: Vue is not defined

Kirby 3 Issues šŸ›
1

Hi around :wave:

Iā€™m getting a strange behavior with a Kirby setup. I just updated to latest 3x version by editing composer.json as follows:

{
  "name": "getkirby/plainkit",
  "description": "Kirby Plainkit",
  "type": "project",
  "keywords": [
    "kirby",
    "cms",
    "starterkit"
  ],
  "authors": [
    {
      "name": "Bastian Allgeier",
      "email": "bastian@getkirby.com",
      "homepage": "https://getkirby.com"
    }
  ],
  "homepage": "https://getkirby.com",
  "support": {
    "email": "support@getkirby.com",
    "issues": "https://github.com/getkirby/starterkit/issues",
    "forum": "https://forum.getkirby.com",
    "source": "https://github.com/getkirby/starterkit"
  },
  "require": {
    "php": ">=8.0.0 <=8.3.6",
    "getkirby/cms": "^3.10",
    "fabianmichael/kirby-meta": "^1.0",
    "sylvainjule/embed": "^1.0",
    "treast/kirby-debugbar": "^1.3",
    "thathoff/kirby-sentry": "^3.0"
  },
  "config": {
    "allow-plugins": {
      "getkirby/composer-installer": true,
      "php-http/discovery": true
    },
    "optimize-autoloader": true
  },
  "scripts": {
    "start": [
      "Composer\\Config::disableProcessTimeout",
      "@php -S localhost:8000 kirby/router.php"
    ]
  }
}

Then did composer update

On localhost everything seems fine but when I pushed these changes to my remote main, Iā€™m getting a blank panel and I get in console :

Capture dā€™eĢcran 2024-05-06 aĢ€ 19.24.10
Capture dā€™eĢcran 2024-05-06 aĢ€ 19.24.101342Ɨ345 52.8 KB

Eventhough my vendor folder is part of my repo, I thought maybe there was something with the update that didnā€™t go through on the remote part. So I connected to it and ran composer update and also composer install just to be sure but it said itā€™s all set and nothing has to be done.

Iā€™m not sure where to look at to try to solve this. :thinking:
What puzzles me is that the local version works fine. Both are also running the same php version, 8.3.6.

I checked if it was eventually related to my browser cache but I get the same error in private mode or after emptying cache. I also cleared remote Kirby cache, but still same error.

Any ideas would be warmly welcomed please. :hugs:

Btw the rest of the site seems to works well. Only panel is not accessible at the moment.

2

Have you deleted the media folder? The media folder needs to be deleted whenever you update Kirby.

3

Hello @texnixe thanks for your quick answer.
I didnā€™t know I had to do this. I just did it but I still get the same error Iā€™m afraid.

4

Hi,

do You have different .htaccess settings on Your remote server that You accidentially replaced when pushing Your updates?
I sometimes forget, that with some providers I have to set another RewriteBase than on localhost.

5

Hi Cris, thank you for your help.
Nope thereā€™s no such thing, Iā€™m using Kirbyā€™s htaccess as usual.

# Kirby .htaccess
# revision 2022-09-15

# rewrite rules
<IfModule mod_rewrite.c>

# enable awesome urls. i.e.:
# http://yourdomain.com/about-us/team
RewriteEngine on

# make sure to set the RewriteBase correctly
# if you are running the site in a subfolder;
# otherwise links or the entire site will break.
#
# If your homepage is http://yourdomain.com/mysite,
# set the RewriteBase to:
#
# RewriteBase /mysite

# In some environments it's necessary to
# set the RewriteBase to:
#
# RewriteBase /

# block files and folders beginning with a dot, such as .git
# except for the .well-known folder, which is used for Let's Encrypt and security.txt
RewriteRule (^|/)\.(?!well-known\/) index.php [L]

# block all files in the content folder from being accessed directly
RewriteRule ^content/(.*) index.php [L]

# block all files in the site folder from being accessed directly
RewriteRule ^site/(.*) index.php [L]

# block direct access to Kirby and the Panel sources
RewriteRule ^kirby/(.*) index.php [L]

# make site links work
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*) index.php [L]

</IfModule>

# pass the Authorization header to PHP
SetEnvIf Authorization "(.+)" HTTP_AUTHORIZATION=$1

# compress text file responses
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>
6

Meanwhile I just restored a backup and Iā€™m glad itā€™s working fine. Thanks uberspace (!).

But it let me realize something curious. You see, Iā€™m using this technique to deploy on my remote folder. Thereā€™s a git repo bare and everytime I push a commit, it does a checkout and is supposed to update the html folder.

But now, as I try git status it says that all is good. In fact, yes the repo hasnā€™t been restored to its previous state. But the html folder yes. So I understand some files may be not totally synced between my local state and remote state with that technique.

And maybe some files have been missing during the updateā€¦

Iā€™m going to dig in that direction and let you know.

[EDIT]

Iā€™m still back to same situation when I do a git checkout and resync the html folder with the updated Kirby. :thinking: The issue doesnā€™t seem to be on the deployment side. The remote html folder seems fine.

As a note for others who might use a similar deployment method, what I do to ensure html folder is synced with latest commit is to go in the git bare repo folder (on the remote server so) then from the folder hooks I run manually git --work-tree=/var/www/virtual/username/html/ checkout -f main from there.

So the problem remains : it supposed to be the same on local and remote prod but still somethingā€™s getting stuck specifically on the prod. environment.

7

Have you updated Kirby with this method before?

8

Nope, itā€™s my first time. Itā€™s actually my first Kirby update.

9

I have very little to no experience with using a bare repo for deployments. What does your .gitignore look like? How to you handle the media folder in this context? The weird thing is that the vue.js file could not be found in the media folder, or rather, it has a weird redirect to home.

10

Hereā€™s my gitignore:

# Content is sync through rsync
content

# Dist is sync through rsyn
dist

# Keep local deploy scripts with secrets
pull.sh
push.sh
push-dev.sh

# Node stuff for local dev
node_modules

# Temporary files
# ---------------

media/*
!media/index.html
.parcel-cache/*

# Lock files
# ---------------

.lock

# -------------SECURITY-------------
# NEVER publish these files via Git!
# -------------SECURITY-------------

# Cache Files
# ---------------

site/cache
!site/cache/index.html

# Accounts
# ---------------

site/accounts
!site/accounts/index.html

# Sessions
# ---------------

site/sessions
!site/sessions/index.html

# License
# ---------------

site/config/.license

# General
.DS_Store
.AppleDouble
.LSOverride

# Icon must end with two \r
Icon

# Thumbnails
._*

# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns
.com.apple.timemachine.donotpresent

# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk
.parcel-cache/1d11806abf58443d
.parcel-cache/37dbec41244c32ee.txt
.parcel-cache/7c901be8e1fcacd1
.parcel-cache/839725f60ad82a5f
.parcel-cache/data.mdb

I donā€™t really handle the media folder. I let it does its life. (Maybe I shouldnā€™t! ahah :sweat_smile:)

Content and dist are pushed through rsync. They are not versioned.

As my config are not the same on localhost and prod, could it come from here? :thinking:

config.localhost.php:

<?php

return [
  'debug' => true,
  'cache' => [
    'pages' => [
      'active' => false,
    ]
  ],
];

config.php:

<?php

return [
  'thathoff.sentry.dsn' => "https://b613f75a3bfc4d6c83f98225b5f1bcce@o4505328655466496.ingest.sentry.io/4505328663134208",
  'panel' =>[
    'install' => true
  ],
  'thumbs' => [
    'quality' => 90
  ],
  'languages' => false,
  'routes' => [
    [
      'pattern' => '(:any)',
      'action'  => function ($uid) {
        $page = page($uid);
        $link = pages('abouts')->children()->first()->url();
        if($page && $page->intendedTemplate() == 'abouts') {
          return go($link, 301);
        }
        return $page;
      }
    ]
  ],
  'hooks' => [
    'meta.load:after' => function (
      array $metadata,
      Kirby\Cms\Page $page,
      ?string $languageCode
    ) {       
      if (empty($metadata['meta_description']) === true) {
        if($page->descriptionTranslated()->isNotEmpty()) {
          $metadata['meta_description'] = $page->descriptionTranslated()->excerpt(300);
          } else {$metadata['meta_description'] = $page->description()->excerpt(300);} 
      }
      if (empty($metadata['og_image']) === true && $page->coverFile()->isNotEmpty()) {
        $metadata['og_image'] = $page->coverFile()->toFile();}
        
      if (empty($metadata['og_image']) === true && $page->logoFile()->isNotEmpty()) {
        $metadata['og_image'] = $page->logoFile()->toFile();}
      return $metadata;
    },
  ],
  'cache' => [
    'pages' => [
      'active' => true,
      'ignore' => function($page) {
          $ignore = false;

          if($page->isHomePage()) {
            $ignore = true;
          }
          elseif($page->template() == 'books') {
            $ignore = true;
          }

          return $ignore;
      }
    ]
  ],
];

But again, as it is, it works. I actually just set up another remote environment and tested my deploy script on a clean server to see if everything get there fine and itā€™s all good. Now I have a staging environment so Iā€™m gonna be able to try out things without breaking my production at least. :sweat_smile:

11

Could it be linked to a plugin throwing that error ? Should I try to disable some ?
If I understood how this vue scripted is related to, maybe I could try something else. Thanks for your dear help @texnixe

12

I always think of plugins first, but in this case, it should not work locally either if the plugins cause that error, I guess.

13

Indeed.

14

I just tried cloning my local folder to the remote and itā€™s working then. So I guess it means the issue is related to the way I deploy with git :thinking:

I wonder whatā€™s missing though.

15

For a reason I canā€™t explain, I then tried on that same dev repo to set up the git repo bare and then executed the same deployment as before ā€œjust to tryā€, then synced the working_tree following what I explained aboveā€¦ and it didnā€™t get stuck. Iā€™m having the updated version working on remote with the panel showing. :person_shrugging:

From what I see, the checkout method is non destructive on the working tree. What I mean is that if have file called ā€œtestā€ there and then I do the checkout, it doesnā€™t get deleted even though this file is not in my repo. :thinking:

Iā€™m really a novice with git and not sure of how everything goesā€¦ :confused:

16

Unfortunately I neither couldnā€™t help any further with Your setup, sorry.
But Iā€™m glad, that You got it working in the end! :v:t3:

1 Like
17

Thanks for your kind words @Cris

And I believe I found what caused it to bork (!). My /vendor and /kirby folders were in my repo. But after re-reading that recipe and learning in composer manual itā€™s not recommended to leave vendor in repo, I decided to clean it.

I thought I could operate everything from that push to remote git -bare but there must be some issues with vendor packages and sub-modules in the way and that might explain why some stuff are missing. I canā€™t explain yet in details whatā€™s happening there.

In the end, so I git rm -r vendor and git rm -r kirby then I added these folders to .gitignore.

And when I initiate/update my remote prod/staging I just need to execute from there composer update and composer install and itā€™s working. :hugs:

Thank you for your support @texnixe and @Cris I appreciate it a lot.