I'm trying to figure out why my WordPress plugin is no longer loading my js and css as expected.
In my plugin's main php file, I have the following code (edited for brevity):
define('APV_PLUGIN_DIR', plugin_dir_path(__FILE__));
define('BUILD_DIR', APV_PLUGIN_DIR . 'build/');
function __construct() {
add_action('wp_enqueue_scripts', [$this, 'enqueue_styles'], 1, 0);
add_action('wp_enqueue_scripts', [$this, 'enqueue_scripts'], 1, 0);
}
function enqueue_scripts() {
wp_register_script('area-public-visualizer-script', BUILD_DIR . 'index.js');
wp_enqueue_script('area-public-visualizer-script');
}
function enqueue_styles() {
wp_register_style('area-public-visualizer-style', BUILD_DIR . 'index.css');
wp_enqueue_style('area-public-visualizer-style');
}
However, in my browser console, I'm getting the following:
When I run the wp-scripts start
command, my build/
looks like this:
When running the wp-scripts build
command, it looks like this:
Here is the scripts
section of my package.json
:
"scripts": {
"build": "wp-scripts build src/index.js",
"start": "wp-scripts start src/index.js"
}
I can understand why I wouldn't be GET
-ing the index.css
file I've specified, but I have no clue as to why I'm not GET
-ing index.js
as it is clearly in both screenshots. I'm further confused as to why I had this all working, both css and js, only a few weeks ago but not anymore.
What am I missing here?
Edited to add:
My css is coming from a series of scss files that are collected into index.scss
. Then, this file is imported into the src/index.js
file. When this was all working before, I was able to get the index.css
file to output into the build directory.
To generate a URL for a file or resource within a plugin, use plugin_dir_url instead of plugin_dir_path
define('APV_PLUGIN_DIR', plugin_dir_url(__FILE__));
define('BUILD_DIR', APV_PLUGIN_DIR . 'build/');