在React JS中使用jQuery时遭遇Unexpected token语法错误求助

• 正在学习React.js，尝试为首页添加侧边导航栏，使用jQuery编写交互逻辑时触发ESLint语法错误。
• 已执行npm install jquery --save安装依赖，但问题未解决。
• 已自行搜索排查3小时，未找到有效解决方案。

相关代码示例 #

import $ from 'jquery';

const Sidebar = () => {
  $(document).ready(() => {
    $('.sidebar-toggle').on('click', () => {
      $('.sidebar').toggleClass('expanded');
    });
  });

  return (
    <aside className="sidebar">
      <button className="sidebar-toggle">展开/收起导航</button>
      <ul className="nav-list">
        <li>首页</li>
        <li>我的收藏</li>
        <li>设置</li>
      </ul>
    </aside>
  );
};

export default Sidebar;

ESLint错误信息示例 #

'$' is not defined
'document' is not defined
Unexpected side effect in render function

求助需求 #

请帮忙定位错误根源，并给出可行的修复方案。

内容的提问来源于stack exchange，提问作者Akki Jangir