Preact项目MUI Autocomplete构建后点击报错：Cannot read properties of undefined

问题详情 #

使用Preact-cli搭建的项目引入MUI Autocomplete组件后，执行npm run build构建生产包并通过npm run serve启动时，点击组件输入框会抛出错误：

Failed prop type: Cannot read properties of undefined (reading 'hasOwnProperty')
  in ForwardRef()
  in ForwardRef()
  in MuiPopperRoot
  in ForwardRef()
  in MuiAutocompletePopper
  in ForwardRef() (at /Users/name/code/parlibre/src/components/app.js:23)

测试代码如下：

<Autocomplete
   id="autocomplete"
   options={['1', '2', '3']}
   renderInput={(params) => <TextField {...params} label="autocomplete" />}
/>

开发环境npm run dev中无此问题。

原因分析 #

本质是Preact-cli生产构建的优化策略与MUI依赖的React特性存在兼容冲突，具体是Autocomplete依赖的Popper组件在生产压缩后，内部某个对象未被正确初始化，导致读取hasOwnProperty时出现undefined。

解决方法 #

1. 配置Preact兼容React别名 #

在项目根目录创建preact.config.js（已有则修改），添加React别名指向Preact兼容层：

export default function (config, env, helpers) {
  const alias = config.resolve.alias;
  alias.react = 'preact/compat';
  alias['react-dom'] = 'preact/compat';
}

这能确保MUI的React代码在Preact环境中正确运行，避免生产构建时的适配问题。

2. 更新依赖版本 #

确保preact、preact-cli和@mui/material使用最新稳定版，避免旧版本的兼容bug：

npm update preact preact-cli @mui/material

3. 调整生产压缩配置 #

如果代码压缩导致必要逻辑被误删，修改preact.config.js禁用相关优化：

export default function (config, env, helpers) {
  if (env.production) {
    const terserPlugin = helpers.getPluginsByName(config, 'TerserPlugin')[0].plugin;
    terserPlugin.options.terserOptions.compress = {
      ...terserPlugin.options.terserOptions.compress,
      pure_funcs: [], // 清空纯函数列表，防止误删属性检查代码
      keep_infinity: true
    };
  }
}

4. 显式处理Popper组件属性 #

若问题源于Popper的属性传递，手动确保属性对象存在：

import Popper from '@mui/material/Popper';

// ...

<Autocomplete
  id="autocomplete"
  options={['1', '2', '3']}
  renderInput={(params) => <TextField {...params} label="autocomplete" />}
  PopperComponent={(props) => {
    // 初始化空对象避免undefined
    const safeProps = { ...props, style: props.style || {}, modifiers: props.modifiers || [] };
    return <Popper {...safeProps} />;
  }}
/>

内容的提问来源于stack exchange，提问作者P.Bjur