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

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.

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

Leave a Reply

Your email address will not be published. Required fields are marked *