WordPress JavaScript import error Cannot use import statement outside a module

Question

Before posting a new question, I already explored the existing question on Stack Overflow but unfortunately they didn't work.

So I'm getting the Uncaught SyntaxError: Cannot use import statement outside a module error, the question that I reviewed tell to use type=module in script tag or use any Babel tool etc.

But the main thing is I'm using this in my WordPress project and for the reason above methods doesn't work in my case. Here is my file in which I'm trying to import jquery but getting the import error.

import $ from 'jquery';
class Search {
    constructor() {
            console.log('Custom constructor called');
            this.openButton = $(".js-searh-trigger");
            this.closeButton = $(".js-search-overlay__close");
            this.searchOverlay = $(".search-overlay");
            this.events();
        }
        // 2. Evetns
    events() {
            this.openButton.on('click', this.openOverlay)
            this.closeButton.on('click', this.closeOverlay)
        }
        // 3. Methods
    openOverlay() {
        this.searchOverlay.addClass('search-overlay--active')
    }
    closeOverlay() {
        this.searchOverlay.removeClass('search-overlay--active')
    }
}
export default Search;
alert('search js working')
console.log(
    'custom working'
)

Nate G · Accepted Answer · 2020-06-11 00:01:01Z

2

Do you mean that you're using it on the client side? In that case, you should load jQuery using a script tag, rather than use import. E.g:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

answered Jun 11, 2020 at 0:01

Nate G

1425 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lint Over a year ago

no, although it can be added like this, but by doing so I won't be able to access jquery functions in my js file

Nate G Over a year ago

Is it client side or server side?

Collectives™ on Stack Overflow

WordPress JavaScript import error Cannot use import statement outside a module

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related