kucrut / vite-for-wp

Vite integration for WordPress plugins and themes development.
GNU General Public License v2.0
260 stars 29 forks source link

Loading scripts with Vite\enqueue_asset() doesn't work #21

Closed JustinyAhin closed 2 years ago

JustinyAhin commented 2 years ago

I'm trying to use the package.

I followed the steps in the README.md file and created an vite.config.js file that looks like:

import create_config from "@kucrut/vite-for-wp";

export default create_config("src/scripts/main.ts", "dist/scripts");

I also created a src/inc/Assets.php in my plugin that looks like:

<?php

namespace CUSTOMPLUGIN;

use Kucrut\Vite;

class Assets
{
    public function __construct()
    {
        add_action('wp_enqueue_scripts', [$this, 'CUSTOM_PLUGIN_enqueue_scripts_styles']);
    }

    public function CUSTOM_PLUGIN_enqueue_scripts_styles()
    {
        // wp_enqueue_script(CUSTOM_PLUGIN_HANDLE, CUSTOM_PLUGIN_URI . 'dist/assets/main.9470b65c.js', [], CUSTOM_PLUGIN_VERSION, true);

        Vite\enqueue_asset(
            CUSTOM_PLUGIN_URI . 'dist',
            CUSTOM_PLUGIN_URI . 'src/scripts/main.ts',
            [
                'handle' => CUSTOM_PLUGIN_HANDLE,
                'version' => CUSTOM_PLUGIN_VERSION,
                'in-footer' => true,
            ]
        );
    }
}

new Assets();

and import it into my main plugin file

<?php

/**
 * Plugin Name: Custom Plugin
 * Description: Custom plugin
 * Version: 0.0.1
 * Text Domain:       custom-plugin
 */

defined('WPINC') || die;

// Constants.
const CUSTOM_PLUGIN_VERSION = '0.0.1';
const CUSTOM_PLUGIN_FILE    = __FILE__;

define('CUSTOM_PLUGIN_DIR', plugin_dir_path(CUSTOM_PLUGIN_FILE));
define('CUSTOM_PLUGIN_URI', plugin_dir_url(CUSTOM_PLUGIN_FILE));
define('CUSTOM_PLUGIN_HANDLE', 'am-paraphraser');

// Composer.
require_once CUSTOM_PLUGIN_DIR . 'vendor/autoload.php';

require_once CUSTOM_PLUGIN_DIR . 'src/inc/Assets.php';

But then my script is not showing in the frontend.

Am I missing something?

Thanks.

kucrut commented 2 years ago

In your vite config, you pass dist/scripts as the second argument. You need to pass the same directory when you enqueue the script, eg:

Vite\enqueue_asset(
            CUSTOM_PLUGIN_DIR . 'dist/scripts',
            ...
);