Uncaught SyntaxError: jquery.sticky-sidebar.js:1 Unexpected identifier

Question

Uncaught SyntaxError: jquery.sticky-sidebar.js:1 Unexpected identifier

contempoinc opened this issue 5 years ago · comments

I'm getting this in the console when loading the jQuery plugin on line 1 which is "import StickySidebar from './sticky-sidebar';" anyone have any insight on this?

Console screenshot https://cl.ly/f180423d68ab

It's running in a WP environment but I don't think that would cause any issues.

cc @abouolia

Chris Robinson · Answer 1 · Wed Jul 03 2019 22:46:35 GMT+0800 (China Standard Time)

@abouolia Is anyone still maintaining this repo?

Jesse · Answer 2 · Fri Sep 13 2019 04:59:36 GMT+0800 (China Standard Time)

@contempoinc - I was getting the same issue in a WP environment. I think that it has to do with ES6, Node, and the WP Environment.

Either way, here's how I solved the issue:

I only included the sticky-sidebar.js script and opted not to use jquery.
When I did enqueued that file, I got an error "unexpected token export", which I solved by commenting out this line:

/* export default StickySidebar; */

Then, in the footer of my site, I just added the following:

<script type="text/javascript"> var stickySidebar = new StickySidebar('#stickySidebar', {*insert your options here*}); </script>

After that, it worked as expected.

Chris Robinson · Answer 3 · Fri Sep 13 2019 05:13:28 GMT+0800 (China Standard Time)

@jflores1

Hi, thanks so much for the reply that solved the previous problem but now I'm getting:

Cannot read property 'parentElement' of null
    at new StickySidebar (jquery.sticky-sidebar.js?ver=1.0:85)

Console screenshot: https://cl.ly/366ad4f6ead8
Code screenshot its erroring on: https://cl.ly/1a8832bca40a

Options screenshot: https://cl.ly/b873686f296a

Am I missing something?

Jesse · Answer 4 · Sat Sep 14 2019 05:09:20 GMT+0800 (China Standard Time)

@contempoinc - Interesting. I hadn't seen that error because I was only looking on the blog where I was testing the sidebar.

Your post had me look deeper and I saw it on all of my pages where I didn't initiate the stickySlider (for instance, my homepage). The error was being thrown because there was no stickySlider element to grab on to.

Here's what I did.

I moved the code that called the slider out of my footer and moved it to the stickySlider code itself:

sticky-sidebar.js:

...
window.StickySidebar = StickySidebar;

new StickySidebar('#stickySidebar',{options});

In functions.php:

I updated my function so that this file only loads on the blog (e.g., post_type='post')

function child_enqueue_scripts(){
if(is_singular(array('post'))) {
wp_enqueue_script('jquery.sticky-sidebar.js', get_stylesheet_directory_uri() . '/js/sticky->sidebar/sticky-sidebar.js',array('jquery'));
}
}

That got rid of the error on the non-post pages and made it work ok on the blog.

Chris Robinson · Answer 5 · Sat Sep 14 2019 05:30:06 GMT+0800 (China Standard Time)

Tried inside the sidebar.js and outside still get the parentElement null, unfortunately…

@abouolia I know there hasn't been a commit to this in 2 years but any idea on this?

Chris Robinson · Answer 6 · Sat Sep 14 2019 05:35:21 GMT+0800 (China Standard Time)

If anyone out there can lend a hand I'm more than happy pay to get this solved.

Daniel de Souza · Answer 7 · Wed Jun 09 2021 20:15:06 GMT+0800 (China Standard Time)

@contempoinc Had a similar problem. In my case I was invoking the script before the DOM elements where rendered.