NextJS集成Swiper报错：react模块未提供useEffect命名导出

问题现象 #

按照Swiper官方文档编写基础配置的Swiper组件，将组件引入原本可正常运行的NextJS页面后，程序抛出错误，提示无法从React中找到useEffect；移除该Swiper组件后，项目可恢复正常运行。

报错信息 #

核心报错内容如下：

SyntaxError: The requested module 'react' does not provide an export named 'useEffect'

调用栈指向项目依赖目录下的文件：

file:///[...]/<project_root>/node_modules/swiper/react/use-isomorphic-layout-effect.js

相关代码 #

自定义Swiper组件（Swiper.js） #

import { Swiper, SwiperSlide } from 'swiper/react';

import 'swiper/css';

export default () => {
  return (
    <Swiper
      spaceBetween={50}
      slidesPerView={3}
      onSlideChange={() => console.log('slide change')}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      ...
    </Swiper>
  );
};

抛出错误的依赖文件（use-isomorphic-layout-effect.js） #

import { useEffect, useLayoutEffect } from 'react';

function useIsomorphicLayoutEffect(callback, deps) {
  // eslint-disable-next-line
  if (typeof window === 'undefined') return useEffect(callback, deps);
  return useLayoutEffect(callback, deps);
}

export { useIsomorphicLayoutEffect };

环境信息与已尝试方案 #

运行环境 #

• NextJS版本：12.1.6
• React版本：18.1.0
• Swiper版本：^8.3.0
• 模块规范：项目默认使用ES Modules

已验证内容与尝试过的修复方案 #

• 项目其他业务代码中多处使用useEffect均正常，可确认React本身存在该导出
• 已尝试开启NextJS官方提供的ES Modules支持，问题未解决
• 已尝试直接引入Swiper源文件，问题未解决
• 检索全网公开资料未找到该特定场景的有效解决方案，需要明确问题根因与可落地的修复方法

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