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

admin管理员组

文章数量:1415684

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.

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.

• themes
• javascript
• wp-enqueue-script
• code
• scripts

Share Improve this question asked Aug 14, 2019 at 19:32 wen tenwen ten 3133 bronze badges 2

• Is this functions.php file in the child theme? You shouldn't need any of the default OceanWP code as that would already be in the parent. – WebElaine Commented Aug 14, 2019 at 20:37
• @WebElaine, Hi, yes the functions.php file is in the child theme. I deleted all the code that came from OceanWP. But still, I am sending my bundled scripts as a CSS file to Wordpress. – wen ten Commented Aug 14, 2019 at 21:17

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

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

本文标签： themesMy scriptsbundlejs file is getting sent to the browser as a stylesheet css file Help