Next.js中如何在useEffect中初始化依赖window的模块？

你遇到的var.func is not a function错误，核心原因通常是动态导入的模块导出方式和调用方式不匹配，或是状态更新的异步特性导致调用时机错误。以下是针对性解决方案：

1. 导入后直接调用（推荐） #

先明确模块的导出类型，再对应调用：

情况A：模块为默认导出 #

若模块代码类似：

// MODULE_PATH.js
export default {
  init: async () => {
    // 依赖window的初始化逻辑
  }
}

调用时需取.default属性：

useEffect(() => {
  const runInit = async () => {
    const module = await import('MODULE_PATH');
    if (typeof module.default.init === 'function') {
      try {
        await module.default.init();
      } catch (e) {
        console.error('初始化失败:', e);
      }
    } else {
      console.error('init不是可调用函数');
    }
  };
  runInit();
}, []);

情况B：模块为命名导出 #

若模块代码类似：

// MODULE_PATH.js
export async function init() {
  // 依赖window的初始化逻辑
}

可直接解构获取函数：

useEffect(() => {
  const runInit = async () => {
    const { init } = await import('MODULE_PATH');
    if (typeof init === 'function') {
      try {
        await init();
      } catch (e) {
        console.error('初始化失败:', e);
      }
    } else {
      console.error('init不是可调用函数');
    }
  };
  runInit();
}, []);

2. 存入状态后调用（处理异步更新） #

你之前的方案2错误在于setMod是异步更新，调用mod.init()时mod仍为初始null。可通过监听状态变化解决：

import { useState, useEffect } from 'react';

const YourComponent = () => {
  const [mod, setMod] = useState(null);

  // 导入模块并存入状态
  useEffect(() => {
    const importModule = async () => {
      const module = await import('MODULE_PATH');
      setMod(module);
    };
    importModule();
  }, []);

  // 监听mod变化后调用初始化函数
  useEffect(() => {
    if (!mod) return;
    
    // 兼容默认导出与命名导出
    const initFunc = mod.default?.init || mod.init;
    if (typeof initFunc === 'function') {
      initFunc().catch(e => console.error('初始化失败:', e));
    } else {
      console.error('init不是可调用函数');
    }
  }, [mod]);

  return <div>你的组件内容</div>;
};

export default YourComponent;

排查技巧 #

若仍不确定，可在导入后打印模块对象查看结构：

const module = await import('MODULE_PATH');
console.log('导入的模块:', module);

根据打印结果定位init函数位置，再调整调用方式。

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