WordPress : Mon fichier scripts-bundle.js est envoyé au navigateur en tant que fichier CSS de feuille de style. Aider!

Je suis nouveau dans le développement de thèmes personnalisés WordPress. J’utilise un thème enfant pour OceanWP. J’ai une configuration webpack pour recharger à chaud mes fichiers mais mes scripts js ne sont pas envoyés sur mon site WordPress à la place, ils sont envoyés sous forme de feuille de style CSS, puis Chrome me donne cet avertissement :

Resource interpreted as Stylesheet but transferred with MIME type application/javascript:

Et lorsque j’inspecte l’avertissement, le fichier index.html affiche cette balise de lien qui transforme incorrectement mon fichier scripts-bundle.js en une feuille de style CSS :

<link rel='stylesheet' id='main-bundled-js-css'  href='//localhost:3000/wp-content/themes/oceanwp-child/js/scripts-bundled.js?ver=1.1.1564978919' type='text/css'

Ma question est où cela se passe-t-il dans mon code?

Ceci ci-dessous est mon fichier functions.php, j’ai seulement ajouté le load_js_files() et le add_action pour cela. Le reste provient de la valeur par défaut d’OceanWP.

<?php

// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;


// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED - Do not modify or remove comment markers above or below:
function load_js_files()
{
    wp_enqueue_script('my-custom-js', get_theme_file_uri('/js/scripts-bundled.js'));
}

add_action('wp_enqueue_scripts', 'load_js_files');


if ( !function_exists( 'chld_thm_cfg_locale_css' ) ):
    function chld_thm_cfg_locale_css( $uri ){
        if ( empty( $uri ) && is_rtl() && file_exists( get_template_directory() . '/rtl.css' ) )
            $uri = get_template_directory_uri() . '/rtl.css';
        return $uri;
    }
endif;
add_filter( 'locale_stylesheet_uri', 'chld_thm_cfg_locale_css' );

if ( !function_exists( 'child_theme_configurator_css' ) ):
    function child_theme_configurator_css() {
        wp_enqueue_style( 'chld_thm_cfg_child', trailingslashit( get_stylesheet_directory_uri() ) . 'style.css', array( 'font-awesome','simple-line-icons','magnific-popup','slick','oceanwp-style' ) );
    }
endif;
add_action( 'wp_enqueue_scripts', 'child_theme_configurator_css', 10 );

// END ENQUEUE PARENT ACTION

Ce problème rend tous mes fichiers javascript personnalisés inutiles car ils ne sont pas envoyés à mon site WordPress en tant que fichiers js.

Solution n°1 trouvée

Ok, j’ai réussi à résoudre ce problème car j’utilisais les mauvaises fonctions WP pour pointer mon répertoire de thèmes enfants et donc mon script javascript fourni.

J’ai effacé mon fichier functions.php et ajouté ce qui suit et tout fonctionne maintenant :

function load_js_files()
{
    wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/js/scripts-bundled.js', array ( 'jquery' ), 1.1, true);
}

add_action('wp_enqueue_scripts', 'load_js_files');