使用Capacitor导入插件遇问题：Plugins已弃用且Alert.show报错

问题描述 #

首次使用Capacitor开发移动端应用，添加弹窗功能时遇到两个问题：

• Plugins 已被弃用
• Alert.show() 抛出错误：

TypeError: Cannot read properties of undefined (reading 'show')

弹窗相关代码：

import { Plugins } from '@capacitor/core';
const { Alert } = Plugins;

export async function ShowPopup() {
  const result = await Alert.show({
    title: 'Location permission required',
    message: 'Please allow the app to access your location',
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel'
      },
      {
        text: 'OK'
      }
    ]
  });
  console.log('User clicked ' + result);
}

调用弹窗的Map组件代码：

import { useState, useEffect } from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import { ShowPopup } from "./popup";
import { Geolocation } from '@capacitor/geolocation';
import im from "../images/myloc.png"

function Map() {
  const [position, setPosition] = useState(null);
  useEffect(() => {
    const getPosition = async () => {
      try {
        const { coords } = await Geolocation.getCurrentPosition();
        setPosition({ lat: coords.latitude, lng: coords.longitude });
      } catch (error) {
      }
    };
    getPosition();
  }, []);

  if (!position) {
    return <ShowPopup/>;
  }

  const myIcon = L.icon({
    iconUrl: im,
    iconSize: [38, 38],
    iconAnchor: [19, 38],
    popupAnchor: [0, -38],
  });

  return (
    <MapContainer center={[position.lat, position.lng]} zoom={15} style={{ height: '400px' }}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <Marker position={[position.lat, position.lng]} icon={myIcon}>
        <Popup>
          your current position {position.lat}, {position.lng}
        </Popup>
      </Marker>
    </MapContainer>
  );
}

export default Map

解决方案 #

1. 替换弃用的Plugins导入方式 #

Capacitor 3+版本已弃用Plugins统一导入模式，需单独导入对应插件。对于Alert功能，直接从@capacitor/alert导入：

import { Alert } from '@capacitor/alert';

若未安装Alert插件，先执行以下命令：

npm install @capacitor/alert
npx cap sync

2. 修复弹窗方法调用错误 #

新版Alert插件的弹窗触发方法为Alert.present()，而非旧版的Alert.show()，同时返回结果为包含role字段的对象，需调整代码：

import { Alert } from '@capacitor/alert';

export async function ShowPopup() {
  const result = await Alert.present({
    title: 'Location permission required',
    message: 'Please allow the app to access your location',
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel'
      },
      {
        text: 'OK'
      }
    ]
  });
  console.log('User clicked ' + result.role);
}

3. 修复React组件调用逻辑 #

ShowPopup是异步函数，不能直接作为React组件返回（React组件需返回JSX）。需修改Map组件，在获取位置失败时调用弹窗函数：

useEffect(() => {
  const getPosition = async () => {
    try {
      const { coords } = await Geolocation.getCurrentPosition();
      setPosition({ lat: coords.latitude, lng: coords.longitude });
    } catch (error) {
      // 获取位置失败时触发弹窗
      await ShowPopup();
    }
  };
  getPosition();
}, []);

if (!position) {
  // 返回加载提示或空占位组件
  return <div>加载中...</div>;
}

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