Expo 相机在移动 Web 版本上因 React 错误而中断答案

【问题标题】：Expo camera breaks on mobile web version with React errorExpo 相机在移动 Web 版本上因 React 错误而中断
【发布时间】：2021-11-28 19:32:16
【问题描述】：

我正在尝试将expo-camera 用于网络。作为参考，这在我的手机上的 Expo Go 上 100% 有效。但是，当我访问具有相同构建的网站（托管在 AWS 上）时，由于此错误，我在接受相机权限后会出现白屏

无效的挂钩调用。 Hooks 只能在 a 的主体内部调用功能组件。这可能发生在以下情况之一原因：1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM） 2. 你可能违反了 Hooks 3. 你可能在同一个应用程序中拥有多个 React 副本请参阅https://reactjs.org/link/invalid-hook-call 以获取有关如何操作的提示调试并修复此问题。

我可以在 chrome 工具（连接到我的手机）中看到这个错误，但它看起来不像我正在做的任何事情..

react-native-logs.fx.ts:34 Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at V (react.production.min.js:19)
    at Object.t.useRef (react.production.min.js:25)
    at ExponentCamera.web.tsx:30
    at na (react-dom.production.min.js:157)
    at Ia (react-dom.production.min.js:176)
    at Bs (react-dom.production.min.js:271)
    at Sl (react-dom.production.min.js:250)
    at _l (react-dom.production.min.js:250)
    at wl (react-dom.production.min.js:250)
    at dl (react-dom.production.min.js:243)

这是它所指的代码，当然是expo的一部分

const ExponentCamera = React.forwardRef(
  (
    { type, pictureSize, poster, ...props }: CameraNativeProps & { children?: React.ReactNode },
    ref: React.Ref<ExponentCameraRef>
  ) => {
    const video = React.useRef<HTMLVideoElement | null>(null);

    const native = useWebCameraStream(video, type as CameraType, props, {
      onCameraReady() {
        if (props.onCameraReady) {
          props.onCameraReady();
        }
      },
      onMountError: props.onMountError,
    });

这是我的代码

import React from 'react';
import { StyleSheet, Text } from 'react-native';
import { NavigationProp, ParamListBase } from '@react-navigation/native';
import { BarCodeScanningResult, Camera, PermissionResponse, PermissionStatus } from 'expo-camera';

export interface BarCodeScannerScreenProps {
    navigation: NavigationProp<ParamListBase>
}

export const BarCodeScannerScreen = (props: BarCodeScannerScreenProps) => {
    const [cameraPermission, setCameraPermission] = React.useState<string>(PermissionStatus.UNDETERMINED);

    const getPermission = async () => {
        const response: PermissionResponse = await Camera.requestCameraPermissionsAsync();
        setCameraPermission(response.status);
    };

    const onBarCodeScanned = (event: BarCodeScanningResult) => {
        props.navigation.navigate("BookSearch", {searchValue: event.data});
    };

    React.useEffect(() => {
        getPermission();
    }, []);

    if(cameraPermission === PermissionStatus.UNDETERMINED){
        return <Text>Requesting camera permission</Text>;
    }
    else if(cameraPermission === PermissionStatus.GRANTED){
        return (
            <Camera
                onBarCodeScanned={onBarCodeScanned}
                style={StyleSheet.absoluteFill}
            />
        );
    }
    else {
        return <Text>No access to camera</Text>;
    }
}

也许我的代码中有一些无效的钩子或其他东西？但我不明白为什么它会在 Expo Go 上正常工作。

【问题讨论】：

标签： reactjs react-native expo

【解决方案1】：

React issue comment 的食谱对我有用：

expo customize:web
select webpack (PRESS SPACE)
enter

然后这样修改webpack.config.js文件：

const createExpoWebpackConfigAsync = require('@expo/webpack-config');
const path = require('path');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  // Customize the config before returning it.
  config.resolve.alias = {
    react: path.resolve('./node_modules/react')
  }
  return config;
};

【讨论】：