Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Wordpress - Uncaught SyntaxError: Unexpected token <

I am enqueue scripts in a child theme with this...

  function child_theme_scripts() {
      wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/custom-child.js', array(), '1.0.0', true );
  }
  add_action( 'wp_enqueue_scripts', 'child_theme_scripts' );

But i am getting a Uncaught SyntaxError: Unexpected token < in the console and when i click on the link to the error it is showing me the first line of the HTML doc where i am doing the doctype.

Worth mentioning that it throws this error when i have nothing in my custom-child.js or if i test with just a simple alert.

Any idea why this might be happening?

Here is what i have the JS file...

 alert('Yeah');

here is the whole HTML

<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" lang="en-US">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html id="ie8" lang="en-US">
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html lang="en-US">
<!--<![endif]-->
<head>
    <meta charset="UTF-8" />


    <link rel="pingback" href="/xmlrpc.php" />

        <!--[if lt IE 9]>
    <script src="/wp-content/themes/microphoto/js/html5.js" type="text/javascript"></script>
    <![endif]-->

    <script type="text/javascript">
        document.documentElement.className = 'js';
    </script>

    <title>Home | MIcroPhoto</title>
<link rel='dns-prefetch' href='//'>
<link rel='dns-prefetch' href='//fonts.googleapis.com'>
<link rel='dns-prefetch' href='//s.w.org'>
<link rel="alternate" type="application/rss+xml" title="MIcroPhoto &raquo; Feed" href="/?feed=rss2" />
<link rel="alternate" type="application/rss+xml" title="MIcroPhoto &raquo; Comments Feed" href="/?feed=comments-rss2" />
        <script type="text/javascript">
            window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/\/microphoto\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.6"}};
            !function(a,b,c){function d(a){var c,d,e,f,g,h=b.createElement("canvas"),i=h.getContext&&h.getContext("2d"),j=String.fromCharCode;if(!i||!i.fillText)return!1;switch(i.textBaseline="top",i.font="600 32px Arial",a){case"flag":return i.fillText(j(55356,56806,55356,56826),0,0),!(h.toDataURL().length<3e3)&&(i.clearRect(0,0,h.width,h.height),i.fillText(j(55356,57331,65039,8205,55356,57096),0,0),c=h.toDataURL(),i.clearRect(0,0,h.width,h.height),i.fillText(j(55356,57331,55356,57096),0,0),d=h.toDataURL(),c!==d);case"diversity":return i.fillText(j(55356,57221),0,0),e=i.getImageData(16,16,1,1).data,f=e[0]+","+e[1]+","+e[2]+","+e[3],i.fillText(j(55356,57221,55356,57343),0,0),e=i.getImageData(16,16,1,1).data,g=e[0]+","+e[1]+","+e[2]+","+e[3],f!==g;case"simple":return i.fillText(j(55357,56835),0,0),0!==i.getImageData(16,16,1,1).data[0];case"unicode8":return i.fillText(j(55356,57135),0,0),0!==i.getImageData(16,16,1,1).data[0];case"unicode9":return i.fillText(j(55358,56631),0,0),0!==i.getImageData(16,16,1,1).data[0]}return!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i;for(i=Array("simple","flag","unicode8","diversity","unicode9"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
        </script>
        <meta content="Microphoto v.1.0.0" name="generator"/><style type="text/css">
img.wp-smiley,
img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 .07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}
</style>
<link rel='stylesheet' id='dashicons-css'  href='/wp-includes/css/dashicons.min.css?ver=4.6' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css'  href='/wp-includes/css/admin-bar.min.css?ver=4.6' type='text/css' media='all' />
<link rel='stylesheet' id='divi-fonts-css'  href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&#038;subset=latin,latin-ext' type='text/css' media='all' />
<link rel='stylesheet' id='divi-style-css'  href='/wp-content/themes/microphoto-child/style.css?ver=4.6' type='text/css' media='all' />
<link rel='stylesheet' id='et-shortcodes-css-css'  href='/wp-content/themes/microphoto/epanel/shortcodes/css/shortcodes.css?ver=4.6' type='text/css' media='all' />
<link rel='stylesheet' id='et-shortcodes-responsive-css-css'  href='/wp-content/themes/microphoto/epanel/shortcodes/css/shortcodes_responsive.css?ver=4.6' type='text/css' media='all' />
<link rel='stylesheet' id='magnific-popup-css'  href='/wp-content/themes/microphoto/includes/builder/styles/magnific_popup.css?ver=4.6' type='text/css' media='all' />
<script type='text/javascript' src='/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<link rel='https://api.w.org/' href='/?rest_route=/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 4.6" />
<link rel="canonical" href="/?page_id=1020" />
<link rel='shortlink' href='/?p=1020' />
<link rel="alternate" type="application/json+oembed" href="/?rest_route=%2Foembed%2F1.0%2Fembed&#038;url=http%3A%2F%2F%2Fmicrophoto%2F%3Fpage_id%3D1020" />
<link rel="alternate" type="text/xml+oembed" href="/?rest_route=%2Foembed%2F1.0%2Fembed&#038;url=http%3A%2F%2F%2Fmicrophoto%2F%3Fpage_id%3D1020&#038;format=xml" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />        <style id="theme-customizer-css">
                                                                                            .nav li ul { border-color: #009ddc; }
                                                            .et_header_style_centered .mobile_nav .select_page, .et_header_style_split .mobile_nav .select_page, .et_nav_text_color_light #top-menu > li > a, .et_nav_text_color_dark #top-menu > li > a, #top-menu a, .et_mobile_menu li a, .et_nav_text_color_light .et_mobile_menu li a, .et_nav_text_color_dark .et_mobile_menu li a, #et_search_icon:before, .et_search_form_container input, span.et_close_search_field:after, #et-top-navigation .et-cart-info { color: #ffffff; }
            .et_search_form_container input::-moz-placeholder { color: #ffffff; }
            .et_search_form_container input::-webkit-input-placeholder { color: #ffffff; }
            .et_search_form_container input:-ms-input-placeholder { color: #ffffff; }
                            #main-header .nav li ul a { color: #000000; }


                    #top-menu li.current-menu-ancestor > a, #top-menu li.current-menu-item > a,
            .et_color_scheme_red #top-menu li.current-menu-ancestor > a, .et_color_scheme_red #top-menu li.current-menu-item > a,
            .et_color_scheme_pink #top-menu li.current-menu-ancestor > a, .et_color_scheme_pink #top-menu li.current-menu-item > a,
            .et_color_scheme_orange #top-menu li.current-menu-ancestor > a, .et_color_scheme_orange #top-menu li.current-menu-item > a,
            .et_color_scheme_green #top-menu li.current-menu-ancestor > a, .et_color_scheme_green #top-menu li.current-menu-item > a { color: #ffffff; }



        @media only screen and ( min-width: 981px ) {
                                                                                                                                        .et_header_style_centered.et_hide_primary_logo #main-header:not(.et-fixed-header) .logo_container, .et_header_style_centered.et_hide_fixed_logo #main-header.et-fixed-header .logo_container { height: 11.88px; }
                                                                                                    .et-fixed-header #top-menu a, .et-fixed-header #et_search_icon:before, .et-fixed-header #et_top_search .et-search-form input, .et-fixed-header .et_search_form_container input, .et-fixed-header .et_close_search_field:after, .et-fixed-header #et-top-navigation .et-cart-info { color: #ffffff !important; }
                .et-fixed-header .et_search_form_container input::-moz-placeholder { color: #ffffff !important; }
                .et-fixed-header .et_search_form_container input::-webkit-input-placeholder { color: #ffffff !important; }
                .et-fixed-header .et_search_form_container input:-ms-input-placeholder { color: #ffffff !important; }
                                        .et-fixed-header #top-menu li.current-menu-ancestor > a,
                .et-fixed-header #top-menu li.current-menu-item > a { color: #ffffff !important; }

                    }
        @media only screen and ( min-width: 1350px) {
            .et_pb_row { padding: 27px 0; }
            .et_pb_section { padding: 54px 0; }
            .single.et_pb_pagebuilder_layout.et_full_width_page .et_post_meta_wrapper { padding-top: 81px; }
            .et_pb_section.et_pb_section_first { padding-top: inherit; }
            .et_pb_fullwidth_section { padding: 0; }
        }
        @media only screen and ( max-width: 980px ) {
                                                                                }
        @media only screen and ( max-width: 767px ) {
                                                        }
    </style>



    <style id="module-customizer-css">
            </style>

            <style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
        <style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
    html { margin-top: 32px !important; }
    * html body { margin-top: 32px !important; }
    @media screen and ( max-width: 782px ) {
        html { margin-top: 46px !important; }
        * html body { margin-top: 46px !important; }
    }
</style>
</head>
<body class="page page-id-1020 page-template-default logged-in admin-bar no-customize-support et_pb_button_helper_class et_fixed_nav et_show_nav et_cover_background et_pb_gutter osx et_pb_gutters3 et_primary_nav_dropdown_animation_fade et_secondary_nav_dropdown_animation_fade et_pb_footer_columns4 et_header_style_left et_pb_pagebuilder_layout et_right_sidebar chrome">
    <div id="page-container">



        <header id="main-header" data-height-onload="66">
            <div class="container clearfix et_menu_container">
                            <div class="logo_container">
                    <span class="logo_helper"></span>
                    <a href="/">
                        <img src="/wp-content/uploads/2016/09/logo.png" alt="MIcroPhoto" id="logo" data-height-percentage="54" />
                    </a>
                </div>
                <div id="et-top-navigation" data-height="66" data-fixed-height="40">
                                            <nav id="top-menu-nav">
                        <ul id="top-menu" class="nav"><li id="menu-item-958" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-958"><a href="/?page_id=950">Quotation</a>
<ul class="sub-menu">
    <li id="menu-item-959" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-959"><a href="/?page_id=955">Rush Quotation Form</a></li>
    <li id="menu-item-960" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-960"><a href="/?page_id=39">Quotation Form</a></li>
    <li id="menu-item-961" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-961"><a href="/?page_id=72">Terms &#038; Conditions</a></li>
    <li id="menu-item-962" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-962"><a href="/?page_id=122">Quotation Request Received</a></li>
</ul>
</li>
<li id="menu-item-963" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-963"><a href="/?page_id=951">Services</a>
<ul class="sub-menu">
    <li id="menu-item-964" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-964"><a href="/?page_id=44">Photochemical Machining</a></li>
    <li id="menu-item-965" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-965"><a href="/?page_id=46">Stamping</a></li>
    <li id="menu-item-966" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-966"><a href="/?page_id=49">Laser Cutting</a></li>
    <li id="menu-item-967" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-967"><a href="/?page_id=51">Wire E.D.M.</a></li>
    <li id="menu-item-968" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-968"><a href="/?page_id=53">Heat Treating</a></li>
    <li id="menu-item-969" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-969"><a href="/?page_id=55">Plating</a></li>
    <li id="menu-item-970" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-970"><a href="/?page_id=57">Non-Destructive Testing</a></li>
    <li id="menu-item-971" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-971"><a href="/?page_id=142">Metal Thickness Reduction</a></li>
    <li id="menu-item-972" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-972"><a href="/?page_id=144">Edge / Surface Finishing</a></li>
    <li id="menu-item-973" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-973"><a href="/?page_id=59">Special Projects</a></li>
    <li id="menu-item-974" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-974"><a href="/?page_id=522">Die Blank Development Service</a></li>
    <li id="menu-item-975" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-975"><a href="/?page_id=535">Comparator Charts</a></li>
</ul>
</li>
<li id="menu-item-976" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-976"><a href="/?page_id=952">Gallery</a>
<ul class="sub-menu">
    <li id="menu-item-977" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-977"><a href="/?page_id=63">Customer Photos</a></li>
</ul>
</li>
<li id="menu-item-978" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-978"><a href="/?page_id=219">News/Media</a></li>
<li id="menu-item-979" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-979"><a href="/?page_id=953">About Us</a>
<ul class="sub-menu">
    <li id="menu-item-980" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-980"><a href="/?page_id=79">Customer Testimonials</a></li>
    <li id="menu-item-981" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-981"><a href="/?page_id=81">Certifications &#038; Approvals</a></li>
    <li id="menu-item-982" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-982"><a href="/?page_id=77">Industries We Serve</a></li>
    <li id="menu-item-983" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-983"><a href="/?page_id=84">Site Map</a></li>
    <li id="menu-item-984" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-984"><a href="/?page_id=702">Privacy Policy</a></li>
</ul>
</li>
<li id="menu-item-985" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-985"><a href="/?page_id=954">Contacts</a>
<ul class="sub-menu">
    <li id="menu-item-986" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-986"><a href="/?page_id=86">Microphoto Contacts</a></li>
</ul>
</li>
</ul>                       </nav>




                    <div id="et_mobile_nav_menu">
                <div class="mobile_nav closed">
                    <span class="select_page">Select Page</span>
                    <span class="mobile_menu_bar mobile_menu_bar_toggle"></span>
                </div>
            </div>              </div> <!-- #et-top-navigation -->
            </div> <!-- .container -->
            <div class="et_search_outer">
                <div class="container et_search_form_container">
                    <form role="search" method="get" class="et-search-form" action="/">
                    <input type="search" class="et-search-field" placeholder="Search &hellip;" value="" name="s" title="Search for:" />                 </form>
                    <span class="et_close_search_field"></span>
                </div>
            </div>
        </header> <!-- #main-header -->

        <div id="et-main-area">
<div id="main-content">



                <article id="post-1020" class="post-1020 page type-page status-publish hentry">


                    <div class="entry-content">
                    <div class="et_pb_section et_pb_fullwidth_section  et_pb_section_0 et_section_regular">



                    <div class="et_pb_fullwidth_code et_pb_module  et_pb_fullwidth_code_0">
                <div class="banner" style="height:300px;"> <!– begin slider content –> <div class="slider_content"> <!– begin slider items –> <div id="slideshow" class="sliders_full" style="position: relative; width: 1361px; height: 300px;"> <div class="slider_item" id="slider1" style="height: 300px; position: absolute; top: 0px; left: 0px; display: none; z-index: 10; opacity: 0; width: 1361px;"></div> </div> <!– end slider items –> </div> <!– end slider content –> <!– begin slider buttons –> <div class="slider_nav" style="top:115px;"> <div id="nav"> <div id="recentimages_xpos"> <ul id="recentimages"> <li class="recentimages"><div class="hover"></div></li> <li class="recentimages selected"><div class="hover"></div></li> <li class="recentimages"><div class="hover"></div></li> <li class="recentimages"><div class="hover"></div></li> <li class="recentimages"><div class="hover"></div></li> <li class="recentimages"><div class="hover"></div></li> <li class="recentimages"><div class="hover"></div></li> <li class="recentimages"><div class="hover"></div></li> <li class="recentimages"><div class="hover"></div></li> <li class="recentimages"><div class="hover"></div></li> </ul> </div> </div> </div> <!– end slider buttons –> </div>
            </div> <!-- .et_pb_fullwidth_code -->

            </div> <!-- .et_pb_section -->
                    </div> <!-- .entry-content -->


                </article> <!-- .et_pb_post -->



</div> <!-- #main-content -->


            <footer id="main-footer">



                <div id="footer-bottom">
                    <div class="container clearfix">
                <ul class="et-social-icons">

    <li class="et-social-icon et-social-facebook">
        <a href="#" class="icon">
            <span>Facebook</span>
        </a>
    </li>
    <li class="et-social-icon et-social-twitter">
        <a href="#" class="icon">
            <span>Twitter</span>
        </a>
    </li>
    <li class="et-social-icon et-social-google-plus">
        <a href="#" class="icon">
            <span>Google</span>
        </a>
    </li>
    <li class="et-social-icon et-social-rss">
        <a href="/?feed=rss2" class="icon">
            <span>RSS</span>
        </a>
    </li>

</ul>
                        <p id="footer-info">Designed by <a href="http://www.elegantthemes.com" title="Premium WordPress Themes">Elegant Themes</a> | Powered by <a href="http://www.wordpress.org">WordPress</a></p>
                    </div>  <!-- .container -->
                </div>
            </footer> <!-- #main-footer -->
        </div> <!-- #et-main-area -->


    </div> <!-- #page-container -->

    <script type='text/javascript' src='/wp-includes/js/admin-bar.min.js?ver=4.6'></script>
<script type='text/javascript' src='/wp-content/themes/microphoto/includes/builder/scripts/frontend-builder-global-functions.js?ver=4.6'></script>
<script type='text/javascript' src='/wp-content/themes/microphoto/includes/builder/scripts/jquery.mobile.custom.min.js?ver=4.6'></script>
<script type='text/javascript' src='/wp-content/themes/microphoto/js/custom.js?ver=4.6'></script>
<script type='text/javascript' src='/wp-content/themes/microphoto/includes/builder/scripts/jquery.fitvids.js?ver=4.6'></script>
<script type='text/javascript' src='/wp-content/themes/microphoto/includes/builder/scripts/waypoints.min.js?ver=4.6'></script>
<script type='text/javascript' src='/wp-content/themes/microphoto/includes/builder/scripts/jquery.magnific-popup.js?ver=4.6'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var et_pb_custom = {"ajaxurl":"http:\/\/\/microphoto\/wp-admin\/admin-ajax.php","images_uri":"http:\/\/\/microphoto\/wp-content\/themes\/microphoto\/images","builder_images_uri":"http:\/\/\/microphoto\/wp-content\/themes\/microphoto\/includes\/builder\/images","et_frontend_nonce":"13541fcbf1","subscription_failed":"Please, check the fields below to make sure you entered the correct information.","et_ab_log_nonce":"6e7121ae3a","fill_message":"Please, fill in the following fields:","contact_error_message":"Please, fix the following errors:","invalid":"Invalid email","captcha":"Captcha","prev":"Prev","previous":"Previous","next":"Next","wrong_captcha":"You entered the wrong number in captcha.","is_builder_plugin_used":"","is_divi_theme_used":"1","widget_search_selector":".widget_search","is_ab_testing_active":"","page_id":"1020","unique_test_id":"","ab_bounce_rate":"5","is_cache_plugin_active":"no","is_shortcode_tracking":""};
/* ]]> */
</script>
<script type='text/javascript' src='/wp-content/themes/microphoto/includes/builder/scripts/frontend-builder-scripts.js?ver=4.6'></script>
<script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.6'></script>
    <script type="text/javascript">
        (function() {
            var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');

            request = true;

            b[c] = b[c].replace( rcs, ' ' );
            b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
        }());
    </script>

</body>
</html>

Thanks!

like image 574
Travis Avatar asked Sep 06 '16 14:09

Travis


Video Answer


3 Answers

Uncaught SyntaxError: Unexpected token < essentially means a 404 since the path you have defined in your second argument is invalid.

Wordpress documentation notes that get_template_directory_uri() returns the theme root without a trailing slash.

Let's say I have a theme called Green Fields and I want to load main.js with wp_enqueue_script. The tree for my theme looks something like this:

greenfields
  |_comments.php
  |_footer.php
  |_functions.php
  |_inc
  |  |_customizer.php
  |_page.php
  |_single.php
  |_src
  |  |_css
  |  |  |_custom.scss
  |  |_js
  |  |  |_main.js
  |_style.css

And let's say I'm not paying attention so I register and enqueue my script like this:

    <?php

    function loadJs() {
        wp_register_script(
            'main',
            get_template_directory_uri() . '/js/main.js',
            array('jquery'),
            null,
            false
        );
        wp_enqueue_script('main');
    }

    add_action("wp_enqueue_scripts", "loadJs");

    ?>

When I refresh my page, I'm going to get the error we are talking about.

However, if I open the Network tab in Chrome's inspector, highlight main.js and click on Headers, I see this:

enter image description here

Although I get a 200 status code for the GET request made at http://localhost:8080/wp-content/themes/greenfields/js/main.js, this path is incorrect.

The correct path is http://localhost:8080/wp-content/themes/greenfields/src/js/main.js (for the record, I do not know why I get a 200 when the path is clearly invalid).

Once I revise the 2nd argument with get_template_directory_uri() . '/src/js/main.js', there is no error and my js file loads as expected.

I think the comment by Rory McCrossan above is probably correct. The < is HTML coming from a 404 page and since the code is expecting to execute JavaScript, this throws an error.

Although your particular issue is dealing with a child theme and your syntax is slightly different from the example I have given, the issue is the same– your path is incorrect.

Since I am posting this nearly 2 years after you asked the question, you've probably already figured this out but hopefully others will find this answer useful.

like image 171
samurai_jane Avatar answered Sep 19 '22 08:09

samurai_jane


For child themes, use get_stylesheet_directory_uri()

Whan a child theme calls get_template_directory_uri() it returns the directory of the parent theme. Since that's not where your targeted .js file is located, it causes the "Unexpected Token" error to occur.

Instead, to get the child theme's directory use get_stylesheet_directory_uri()

So, your code should be:

function child_theme_scripts() {
      wp_enqueue_script( 'script-name', get_stylesheet_directory_uri() . '/js/custom-child.js', array(), '1.0.0', true );
  }
  add_action( 'wp_enqueue_scripts', 'child_theme_scripts' );
like image 23
ElmerCat Avatar answered Sep 17 '22 08:09

ElmerCat


After examinating your html code, it could be possible that your comments in the code are causing the error. Look at this:

W3 Validator

You have several code comments that are wrong:

<!– end slider items –>

should be

<!–- end slider items -->

I hope this will fix the issue.

like image 30
Adrian Lambertz Avatar answered Sep 18 '22 08:09

Adrian Lambertz