wordpress

wp-scripts not loading js and css as expected


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:

GET errors

When I run the wp-scripts start command, my build/ looks like this:

build directory when using start

When running the wp-scripts build command, it looks like this:

build directory when using build

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.


Solution

  • 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/');