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.
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].
Related: I'm getting "Bad request" using ajax in custom WordPress plugin