使用react-materialize时出现TypeError: $(...).sideNav is not a function问题求助

这个错误我帮不少开发者排查过，本质就是Materialize的JavaScript方法没成功挂载到jQuery上，大概率是加载顺序不对、依赖安装有问题，或者你手动调用了不该自己操作的DOM方法。下面给你一步步解决：

1. 先清理并重装兼容版本的依赖 #

版本冲突或安装不完整是常见诱因，先卸载现有包再重装指定版本（亲测这套版本组合稳定兼容）：

# 卸载现有相关包
npm uninstall react-materialize jquery materialize-css
# 重装兼容版本
npm install react-materialize@3.9.9 jquery@3.6.0 materialize-css@1.0.0

用Yarn的话把npm替换成yarn即可。

2. 调整index.html的资源加载顺序 #

Materialize的JS必须在jQuery之后加载，否则它找不到jQuery来挂载方法。修改你的index.html，严格按以下顺序引入：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="theme-color" content="#000000">
  <!-- 先引入Materialize样式 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <!-- 必须优先加载jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- 最后加载Materialize的JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
  <div id="root"></div>
</body>
</html>

别随意调整顺序，jQuery在前、Materialize JS在后是核心规则。

3. 放弃手动调用jQuery，直接用react-materialize封装的组件 #

很多人踩坑是因为自己写$('.side-nav').sideNav()，但react-materialize已经把侧边栏封装成了组件，直接使用它的SideNav组件即可，内部会自动处理初始化逻辑：

import React from 'react';
import { SideNav, SideNavItem, Button } from 'react-materialize';

function MySideNav() {
  return (
    <div>
      {/* 触发按钮，data-target需和SideNav的id对应 */}
      <Button data-target="slide-out" className="btn">打开侧边栏</Button>
      {/* 侧边栏组件 */}
      <SideNav id="slide-out">
        <SideNavItem userView>
          <div className="background">
            <img src="https://placehold.it/400x200" alt="侧边栏背景" />
          </div>
          <a href="#user"><img className="circle" src="https://placehold.it/100x100" alt="用户头像" /></a>
          <a href="#name"><span className="white-text name">张三</span></a>
          <a href="#email"><span className="white-text email">zhangsan@example.com</span></a>
        </SideNavItem>
        <SideNavItem href="#!" icon="dashboard">控制台</SideNavItem>
        <SideNavItem href="#!second">我的收藏</SideNavItem>
        <SideNavItem divider />
        <SideNavItem subheader>更多选项</SideNavItem>
        <SideNavItem href="#!third">设置</SideNavItem>
      </SideNav>
    </div>
  );
}

export default MySideNav;

完全不需要你手动操作DOM或调用jQuery方法，组件会帮你处理好所有细节。

4. 自定义Webpack配置需全局暴露jQuery #

如果你自己配置了Webpack，要确保jQuery被全局注入，否则Materialize无法找到它。在webpack.config.js中添加以下配置：

const webpack = require('webpack');

module.exports = {
  // 你的其他Webpack配置...
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    })
  ]
};

按上面的步骤操作，基本就能解决这个错误了。如果还是不行，可以检查浏览器控制台有没有资源加载失败的提示，说不定是某个CDN链接无法访问导致的。

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