wordpress - wp-scripts not loading js and css as expected - Stack Overflow

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.

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.

• wordpress

Share Improve this question Follow edited Jan 2 at 4:54 jstrother asked Jan 1 at 23:59 jstrotherjstrother 35811 gold badge44 silver badges1818 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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