WordPress JavaScript 导入错误 不能在模块外使用导入语句

Question

在发布新问题之前，我已经探索了 Stack Overflow 上的现有问题，但不幸的是它们没有用。

所以我得到了Uncaught SyntaxError: Cannot use import statement outside a module错误，我审查的问题告诉我在脚本标签中使用type=module或使用任何Babel工具等。

但最主要的是我在我的WordPress项目中使用它，并且由于上述方法在我的情况下不起作用。 这是我尝试导入jquery但出现导入错误的文件。

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

Answer 1

你是说你在客户端使用它吗？ 在这种情况下，您应该使用脚本标签加载 jQuery，而不是使用导入。 例如：

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