Next.js 13（App目录）：TypeError读取prototype属性未定义问题求助

为啥会报错？ #

你用的Next.js 13.2.4是服务端渲染模式，downshift的useSelect钩子在服务端执行时，会尝试访问浏览器环境才有的window对象，服务端不存在这个对象，所以直接触发报错。

怎么修复？ #

方法1：动态导入组件（最推荐） #

把用到useSelect的组件改成动态导入，强制它只在浏览器端渲染：

import dynamic from 'next/dynamic'

// 替换成你自己的组件路径
const MySelect = dynamic(() => import('./MySelect'), {
  ssr: false,
})

这样组件不会在服务端执行，自然不会碰到window的问题。

方法2：先判断环境再调用钩子 #

在组件里先检查当前是否处于浏览器环境，确认后再调用useSelect：

import { useSelect } from 'downshift'

export default function MySelect() {
  // 服务端返回占位内容，避免报错
  if (typeof window === 'undefined') {
    return <div>加载中...</div>
  }

  const {
    isOpen,
    selectedItem,
    getToggleButtonProps,
    getMenuProps,
    highlightedIndex,
    getItemProps,
  } = useSelect({
    items: ['苹果', '香蕉', '橙子'], // 替换成你的选项数据
  })

  // 以下是官方示例的渲染逻辑，直接复用即可
  return (
    <div>
      <button {...getToggleButtonProps()}>
        {selectedItem ? selectedItem : '选择水果'}
      </button>
      <ul {...getMenuProps()}>
        {isOpen &&
          items.map((item, index) => (
            <li
              {...getItemProps({ item, index })}
              style={{
                backgroundColor:
                  highlightedIndex === index ? '#bde4ff' : 'white',
                fontWeight: selectedItem === item ? 'bold' : 'normal',
              }}
            >
              {item}
            </li>
          ))}
      </ul>
    </div>
  )
}

方法3：配置Next.js转译downshift（不推荐） #

如果确认是Babel编译导致的问题，可以在next.config.js中配置让Next.js转译downshift包，但可能引发其他兼容问题，谨慎使用：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['downshift'],
}

module.exports = nextConfig

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