My scripts-bundle.js file is getting sent to the browser as a stylesheet css file. Help!

Question

I'm new to WordPress custom theme development. I am using a child theme for OceanWP. I have a webpack setup to hot-reload my files but my js scripts are not getting sent to my WordPress site instead they are getting sent as a CSS stylesheet and then Chrome is giving me this warning:

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

And when I inspect the warning, the index.html file shows this link tag incorrectly making my scripts-bundle.js file into a CSS stylesheet:

<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'

My question is where is this happening within my code?

This below is my functions.php file, I have only added the load_js_files() and the add_action for it. The rest is coming from OceanWP default.

<?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

This problem renders any of my custom javascript files useless as they are not getting sent to my WordPress site as js files.

Answer 1

Ok, I managed to solve this issue because I was using the wrong WP functions to point my child themes directory and thus my bundled javascript script.

I cleared out my functions.php file and added the below and it all works now:

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