项目升级到 3.6.1 之后，Input 组件只要设置 focus 属性就会报错

[imwangpan]

相关平台

H5

浏览器版本: Chrome 110
使用框架: React

复现步骤

项目升级到最新的 3.6.1 之后，Input 组件设置 focus 属性后（如下所示），控制台就会报错“Uncaught TypeError: Cannot assign to read only property 'focus' of object '#'”，且整个页面空白。

<Input focus></Input>

期望结果

Input 组件能正常设置 focus 属性

实际结果

Input 组件设置 focus 属性后报错

环境信息

$ taro info
👽 Taro v3.6.1


  Taro CLI 3.6.1 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 16.18.0 - C:\Program Files\nodejs\node.EXE
      Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
      npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD

---

补充信息

3.5.X 中是正常的

[yoyo837]

请提供一个复现解决起来更快

[imwangpan]

请提供一个复现解决起来更快

就按照官方文档里提供的示例：
<Input type='text' placeholder='将会获取焦点' focus/>
yarn dev:h5 运行就会直接报错

[songwenhui]

同样的问题，官方模板生成的项目，如下

const Index: React.FC<PropsWithChildren> = () => {
  const [focus, setFocus] = useState<boolean>(false);

  useEffect(() => {
    // 延迟一下然后设置 input 获取焦点
    setTimeout(() => setFocus(true), 1000);
  }, []);

  return (
    <View className="index">
      <Text>Hello world!</Text>
      <Input type='text' placeholder='测试获取焦点' focus={focus} />
    </View>
  );
};

就会报上述错误

[ZakaryCode]

同样的问题，官方模板生成的项目，如下

const Index: React.FC<PropsWithChildren> = () => {
  const [focus, setFocus] = useState<boolean>(false);

  useEffect(() => {
    // 延迟一下然后设置 input 获取焦点
    setTimeout(() => setFocus(true), 1000);
  }, []);

  return (
    <View className="index">
      <Text>Hello world!</Text>
      <Input type='text' placeholder='测试获取焦点' focus={focus} />
    </View>
  );
};

就会报上述错误

以上这几种方式都无法复现相关问题，请确定以下几点：

• 是否引入其它组件库，或使用相关依赖导致的版本错误
• 附上详细错误与调用栈
• 附上完整 DEMO，官方模板请说明具体哪一个模板

[yujingwyh]

可以试试这个插件，临时处理了focus https://www.npmjs.com/package/taro-plugin-string-style

[zhouzyc]

同样的问题，官方模板生成的项目，如下

const Index: React.FC<PropsWithChildren> = () => {
  const [focus, setFocus] = useState<boolean>(false);

  useEffect(() => {
    // 延迟一下然后设置 input 获取焦点
    setTimeout(() => setFocus(true), 1000);
  }, []);

  return (
    <View className="index">
      <Text>Hello world!</Text>
      <Input type='text' placeholder='测试获取焦点' focus={focus} />
    </View>
  );
};

就会报上述错误

以上这几种方式都无法复现相关问题，请确定以下几点：

• 是否引入其它组件库，或使用相关依赖导致的版本错误
• 附上详细错误与调用栈
• 附上完整 DEMO，官方模板请说明具体哪一个模板

相同问题 此demo 可以复现 https://gitee.com/JS-VeryHappy/vh-mobile-demo.git
运行：pnpm start
进入页面：http://xxxxxx/pages/test/index

[sjhleo]

@ZakaryCode 大佬这个问题复现了么

[ganyanchuan1989]

Taro@3.6.2, taro-ui@3.1.0-beta.4 AtInput 存在类似问题。

[spadeACE7]

还没解决吗？

[ZakaryCode]

@ZakaryCode 大佬这个问题复现了么

还没解决吗？

该问题未能复现，经可复现的社区开发者沟通在最新的测试版本中已无该问题，将在 3.6.3 中合并（本周内会发布）

[spadeACE7]

@ZakaryCode 大佬这个问题复现了么

还没解决吗？

该问题未能复现，经可复现的社区开发者沟通在最新的测试版本中已无该问题，将在 3.6.3 中合并（本周内会发布）

好的

[Jeff-Tian]

@ZakaryCode 大佬这个问题复现了么

还没解决吗？

该问题未能复现，经可复现的社区开发者沟通在最新的测试版本中已无该问题，将在 3.6.3 中合并（本周内会发布）

请问怎么使用最新的测试版呀？

[spadeACE7]

@ZakaryCode 大佬这个问题复现了么

还没解决吗？

该问题未能复现，经可复现的社区开发者沟通在最新的测试版本中已无该问题，将在 3.6.3 中合并（本周内会发布）

都周四了 3.6.3什么时候发布呀 ☺️☺️

[ZakaryCode]

都周四了 3.6.3什么时候发布呀 ☺️☺️

可以看 milestone 哦，处理完了就会发布

[TheKonka]

着急的同学可以先 升级 到 3.6.2-canary.2 这个版本，我试了没有报错了

[Jeff-Tian]

着急的同学可以先 升级 到 3.6.2-canary.2 这个版本，我试了没有报错了

我试了这个版本，还是同样的错误呢。

[TheKonka]

着急的同学可以先 升级 到 3.6.2-canary.2 这个版本，我试了没有报错了

我试了这个版本，还是同样的错误呢。

https://github.com/TheKonka/taro-test.git
我把我本地运行正常的仓库上传了，麻烦您有空再试下看看

[Jeff-Tian]

着急的同学可以先 升级 到 3.6.2-canary.2 这个版本，我试了没有报错了

我试了这个版本，还是同样的错误呢。

https://github.com/TheKonka/taro-test.git 我把我本地运行正常的仓库上传了，麻烦您有空再试下看看

感谢！ 我今天在 Mac 上试了还是一样的错误。看了你分享的代码，没有 taro-ui，应该是我还用了 taro-ui 的关系。

[Jeff-Tian]

请问在 npm mirror 如何批量更新 @tarojs/* 下的包呀？`

[Jeff-Tian]

另外我试了在 Windows 上、以及 Mac 上，升级到 3.6.3 之后，yarn dev:h5 会出现这样的错误（Google 搜索这个错误信息没有任何相关资料……）：

Error 1 of 1
ReferenceError
react_development$1 is not defined
Call Stack
 eval
  node_modules/@tarojs/components/lib/react/_virtual/react.development.js:5:15
 ./node_modules/@tarojs/components/lib/react/_virtual/react.development.js
  taro.a995341e0c8c451d8291.js:1420:1
 __webpack_require__
  app.ccb89f7cd8ee9dbbd0e0.js:857:31
 fn
  app.ccb89f7cd8ee9dbbd0e0.js:151:20
 eval
  node_modules/@tarojs/components/lib/react/node_modules/.pnpm/registry.npmjs.org_react@18.2.0/node_modules/react/index.js:8:87
 ./node_modules/@tarojs/components/lib/react/node_modules/.pnpm/registry.npmjs.org_react@18.2.0/node_modules/react/index.js
  taro.a995341e0c8c451d8291.js:1612:1
 __webpack_require__
  app.ccb89f7cd8ee9dbbd0e0.js:857:31
 fn
  app.ccb89f7cd8ee9dbbd0e0.js:151:20
 eval
  node_modules/@tarojs/components/lib/react/components.js:84:136
 ./node_modules/@tarojs/components/lib/react/components.js
  taro.a995341e0c8c451d8291.js:1516:1

关闭这个错误信息后是白屏。