javascript php wordpress vue.js wp-enqueue-scripts

WordPress default functionality disturbed when I add a custom plugin

I have made a plugin on Vue which I am enqueuing on WordPress in the admin dashboard and frontend.

The plugin appears fine, but when I try to add a new page it displays a blank page.

When I disable the plugin, it is back to normal.

This is my code for the plugin enqueue.

<?php

/*
Plugin Name: Verus Vue Plugin
Description: This plugin adds an admin dashboard view.
Version: 1.0
Author: Ahmed Shah
*/

function my_admin_menu_page() {
    add_menu_page(
        'Verus Data',  // Page title
        'Staking Rewards', // Menu title
        'manage_options',  // Capability required to access
        'my-admin-page',   // Menu slug
        'render_content', // Callback function to render content
        'dashicons-admin-plugins', // Icon URL or dashicon class
        20 // Menu position
    );
}
add_action('admin_menu', 'my_admin_menu_page');


function render_content() {
    ?>
        <h1>Verus Blocks</h1>
        <div id="app">
        </div>
<?php
}

function render_shortcode() {
    ?>
        <h1>Verus Blocks</h1>
        <div id="app">
        </div>
<?php
}

add_shortcode('vue_shortcode', 'render_shortcode');


function admin_enqueue() {

    wp_enqueue_script('app-script', plugins_url('/verusapi/dist/assets/index-da85dad1.js', __FILE__), array(), null, true);
    wp_enqueue_style('app-style', plugins_url('/verusapi/dist/assets/index-37970cf5.css', __FILE__));
}

function enqueue_vue_script() {

    wp_enqueue_script('app-script', plugins_url('/verusapi/dist/assets/index-da85dad1.js', __FILE__), array(), null, true);
    wp_enqueue_style('app-style', plugins_url('/verusapi/dist/assets/index-37970cf5.css', __FILE__));
}

add_action('admin_enqueue_scripts', 'admin_enqueue');
add_action('wp_enqueue_scripts', 'enqueue_vue_script');

I get the following error in browser console:

index.php:773 Uncaught TypeError: Assignment to constant variable.
    at index.php:773:11
    at index.php:781:4
load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils&ver=6.3.1:2 jQuery.Deferred exception: Cannot read properties of undefined (reading '__') TypeError: Cannot read properties of undefined (reading '__')
    at HTMLDocument.<anonymous> (https://veruswp.sink.cakeshop.dev/wp-admin/js/site-health.min.js?ver=6.3.1:2:36)
    at e (https://veruswp.sink.cakeshop.dev/wp-admin/load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils&ver=6.3.1:2:26990)
    at t (https://veruswp.sink.cakeshop.dev/wp-admin/load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils&ver=6.3.1:2:27292) undefined
ce.Deferred.exceptionHook @ load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils&ver=6.3.1:2
load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils&ver=6.3.1:2 jQuery.Deferred exception: Cannot read properties of undefined (reading 'dateI18n') TypeError: Cannot read properties of undefined (reading 'dateI18n')
    at HTMLDocument.<anonymous> (https://veruswp.sink.cakeshop.dev/wp-admin/js/dashboard.min.js?ver=6.3.1:2:2984)
    at e (https://veruswp.sink.cakeshop.dev/wp-admin/load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils&ver=6.3.1:2:26990)
    at t (https://veruswp.sink.cakeshop.dev/wp-admin/load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils&ver=6.3.1:2:27292) undefined
ce.Deferred.exceptionHook @ load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils&ver=6.3.1:2
load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils&ver=6.3.1:2 jQuery.Deferred exception: Cannot read properties of undefined (reading 'init') TypeError: Cannot read properties of undefined (reading 'init')
    at HTMLDocument.<anonymous> (https://veruswp.sink.cakeshop.dev/wp-admin/js/svg-painter.js?ver=6.3.1:19:18)

I also get this when I try to click Add New Page in WordPress admin dashboard:

Mixed Content: The page at 'https://veruswp.sink.cakeshop.dev/wp-admin/post-new.php?post_type=page' was loaded over HTTPS, but requested an insecure element 'http://0.0.0.20/'. This request was not upgraded to HTTPS because its URL's host is an IP address.

Solution

I have made some changes in your code, renaming function names and slugs, and adding the necessary code to the function hooked in admin_enqueue_scripts hook. Try instead:

<?php

/*
Plugin Name: Verus Vue Plugin
Description: This plugin adds an admin dashboard view.
Version: 1.0
Author: Ahmed Shah
*/

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

function verus_vue_admin_menu_page() {
    add_menu_page(
        __('Verus Data'),  // Page title
        __('Staking Rewards'), // Menu title
        'manage_options',  // Capability required to access
        'verus-vue',   // Menu slug
        'verus_vue_render_content', // Callback function to render content
        'dashicons-admin-plugins', // Icon URL or dashicon class
        20 // Menu position
    );
}
add_action('admin_menu', 'verus_vue_admin_menu_page');

function verus_vue_render_content() {
    ?>
    <h1><?php _e('Verus Blocks'); ?></h1>
    <div id="app">
    </div>
    <?php
}
add_shortcode('verus-vue', 'verus_vue_render_content'); // Short code usage: [verus-vue]


function admin_enqueue_vue_scripts( $hook ) {
    if ( 'toplevel_page_verus-vue' === $hook ) {
        wp_enqueue_script('app-script', plugins_url('/verusapi/dist/assets/index-da85dad1.js', __FILE__), array(), null, true);
        wp_enqueue_style('app-style', plugins_url('/verusapi/dist/assets/index-37970cf5.css', __FILE__));

        error_log($hook); // For testing (to be removed)
    }
}
add_action('admin_enqueue_scripts', 'admin_enqueue_vue_scripts');

function front_enqueue_vue_scripts() {
    wp_enqueue_script('app-script', plugins_url('/verusapi/dist/assets/index-da85dad1.js', __FILE__), array(), null, true);
    wp_enqueue_style('app-style', plugins_url('/verusapi/dist/assets/index-37970cf5.css', __FILE__));
}
add_action('wp_enqueue_scripts', 'front_enqueue_vue_scripts');

It should better work now on admin side, as your scripts will only be loaded on your plugin page. I have merged the shortcode function and the callback menu function to render content, as they have the same code. I have renamed your shortcode to more explicit [verus-vue].