在统一的移动和 Web 项目中动态加载 React 组件时出现问题：Web 上的 expo-barcode-generator 的模块解析失败错误

Question

我有一个项目，其中移动应用程序和网络应用程序都集成到同一服务器和存储库中。 React 组件是根据环境动态加载的，如下所示：

import React from "react";
class Sheet extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

      componentLoaded: false,
      Component: null,
    };
  }
  componentDidMount() {

    if (!!process.env.EXPO_PUBLIC_PROJECT_ROOT) {
      this.setState({ Component: require('./mobile').default, componentLoaded: true });
    } else {
      this.setState({ Component: require('./web').default, componentLoaded: true });
    }
  };
  render = () => {
    if (!this.state.componentLoaded) {
      return null; // or a loading indicator, e.g. <div>Loading...</div>
    }
    return React.createElement(this.state.Component, this.props);
  };
}
export default Sheet;

此设置在移动设备上运行良好，但是当我运行 Web 应用程序时，遇到以下与 expo-barcode-generator 库相关的错误：

：模块解析失败：意外的标记 (44:4) | | 返回（

以下是引用expo-barcode-generator 和react-native-view-shot 库的文件：

import * as Print from 'expo-print';
import * as FileSystem from 'expo-file-system';
import { captureRef } from 'react-native-view-shot';

import ProductionOrderSheet from "../../ProductionOrderSheet"

const printSheet = async (viewRef) => {
    try {
        const uri = await captureRef(viewRef, {
            format: "png",
            quality: 1.0
        })...
};

const Sheet = (props) => {
    const { appContext, type, sheet } = props;
    
    switch (type) {
        case "productionOrderSheet":
            return (
                <ProductionOrderSheet
                    {...sheet}
                    type={"productionOrderSheet"}
                    printSheet={printSheet}
                    appContext={appContext}
                />
            );

        default:
            throw new Error(`(Sheet) the sheet type ${type} not found`);
    }
}

export default Sheet

import Table from "../../Table";
import Button from '../../Button';
import Container from "../../Container"
import TextFormatter from "../../TextFormatter"
import { Barcode } from 'expo-barcode-generator';

const MobileProductionOrderSheet = (props) => {
    ...
    const getHeader = () => {
        return (
                    <Barcode
                        value={productionLot}
                        options={{ format: 'CODE128', background: 'white', height: 70, fontSize: 18 }}
                    />
                </Container>
            </Container>
        )
    }
    ...

package.json：

{
  "name": "@monorepo/appmobile",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@apollo/client": "^3.10.8",
    "@expo/ngrok": "^4.1.3",
    "@fortawesome/fontawesome-svg-core": "^6.5.2",
    "@fortawesome/free-solid-svg-icons": "^6.5.2",
    "@fortawesome/react-native-fontawesome": "^0.3.2",
    "@react-native-community/datetimepicker": "8.0.1",
    "@react-native-picker/picker": "2.7.5",
    "@react-navigation/drawer": "^6.6.15",
    "@react-navigation/material-top-tabs": "^6.6.13",
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/native-stack": "^6.10.0",
    "core-js": "^3.37.1",
    "expo": "~51.0.21",
    "expo-barcode-generator": "^3.0.2",
    "expo-navigation-bar": "^3.0.6",
    "expo-print": "^13.0.1",
    "expo-screen-orientation": "~7.0.5",
    "expo-secure-store": "~13.0.2",
    "expo-status-bar": "~1.12.1",
    "graphql": "^16.9.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.74.3",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-media-query": "^2.0.1",
    "react-native-pager-view": "6.3.0",
    "react-native-reanimated": "~3.10.1",
    "react-native-safe-area-context": "4.10.5",
    "react-native-screens": "3.31.1",
    "react-native-svg": "15.2.0",
    "react-native-tab-view": "^3.5.2",
    "react-native-vector-icons": "^10.1.0",
    "react-native-view-shot": "^3.8.0",
    "react-native-web": "~0.19.10",
    "socket.io-client": "^4.7.5"
  },
  "devDependencies": {
    "@babel/core": "7.19.6",
    "@types/react-native": "^0.73.0"
  },
  "private": true
}

注释掉库导入：我注释掉了expo-barcode-generator 和react-native-view-shot 的导入，并且该代码在网络上有效，但在移动设备上无效，因为该组件无法使用。 // 从 'expo-barcode-generator' 导入 { Barcode }; // 从 'react-native-view-shot' 导入 { captureRef };

注释掉条件移动导入：我还尝试注释掉移动设备的条件导入，这使得网络可以工作，但后来我无法在移动设备上使用该组件。

if (!!process.env.EXPO_PUBLIC_PROJECT_ROOT) {
  // this.setState({ Component: require('./mobile').default, componentLoaded: true });
} else {
  this.setState({ Component: require('./web').default, componentLoaded: true });
}

最后，我尝试对库使用动态 require，如下所示：

if (!!process.env.EXPO_PUBLIC_PROJECT_ROOT) {
    const Barcode = require('expo-barcode-generator');
}

但它不起作用

Answer 1

出现此错误是因为 nextJs 尝试在构建阶段解析和处理所有导入。 转到下一个配置自定义 webpack 配置并创建一个别名以忽略导入，这样：

nextConfig = {
   webpack: (config) => {

       config.resolve.alias['react-native-view-shot'] = false;
       config.resolve.alias['expo-barcode-generator'] = false;
   }
}