React中处理运行时全局变量问题——Overwolf应用迁移遇API调用难题

Hey there! I’ve built a few Overwolf apps with React, so I know exactly the hoops you need to jump through here. Let’s walk through solving both the runtime API usage and build-time global variable issues step by step.

1. Fix Build-Time Errors: Tell Your Tools About the Global Variable #

First, your build tool (Webpack, Vite, etc.) and linter don’t know about the overwolf global injected at runtime by the Overwolf Browser. Here’s how to fix that:

For JavaScript Projects (ESLint) #

Add overwolf to your ESLint globals so it doesn’t throw "undefined variable" errors:

• Open your .eslintrc.js (or equivalent config file)
• Add this to the globals section:

  globals: {
    overwolf: "readonly"
  }
  

For TypeScript Projects #

Create a type declaration file (e.g., src/types/overwolf.d.ts) to define the global overwolf variable. This gives you type hints and stops TypeScript from complaining:

declare global {
  interface Window {
    overwolf: any; // Replace `any` with official Overwolf types if available for better type safety
  }
}

export {};

2. Safely Use the overwolf API in React Components #

Since overwolf is only available when your app runs in the Overwolf Browser (not in local dev servers like Chrome), you need to guard against it being undefined to avoid runtime crashes.

Use useEffect for Runtime Checks #

Wrap your API calls in useEffect to ensure the component has mounted (and the overwolf global is available):

import { useEffect, useState } from 'react';

function OverwolfStatus() {
  const [isOverwolfEnv, setIsOverwolfEnv] = useState(false);

  useEffect(() => {
    // Check if overwolf exists before using it
    if (window.overwolf) {
      setIsOverwolfEnv(true);
      // Example: Call an Overwolf API method
      window.overwolf.settings.getPlatformInfo(info => {
        console.log('Overwolf Platform Info:', info);
      });
    } else {
      setIsOverwolfEnv(false);
      console.log('Running outside Overwolf Browser');
    }
  }, []);

  return (
    <div>
      {isOverwolfEnv ? 'Running in Overwolf!' : 'Not in Overwolf environment'}
    </div>
  );
}

export default OverwolfStatus;

Create a Reusable Custom Hook #

To avoid repeating the existence check across components, wrap the overwolf API in a custom hook. This makes your code cleaner and easier to maintain:

import { useMemo } from 'react';

export function useOverwolf() {
  const overwolfApi = useMemo(() => {
    if (typeof window !== 'undefined' && window.overwolf) {
      return window.overwolf;
    }
    // Optional: Return a mock version for local development
    return {
      settings: {
        getPlatformInfo: (callback) => callback({ mock: 'development-data' })
      }
    };
  }, []);

  return overwolfApi;
}

Then use it in any component like this:

import { useOverwolf } from './hooks/useOverwolf';

function GameTracker() {
  const overwolf = useOverwolf();

  const getRunningGame = () => {
    overwolf.games.getRunningGame(info => {
      console.log('Current Running Game:', info);
    });
  };

  return (
    <button onClick={getRunningGame}>Fetch Running Game</button>
  );
}

3. Handle Development vs. Production #

When developing locally, you won’t have access to the real overwolf API. To avoid breaking your dev server:

• Use mock implementations like the one in the custom hook above
• Add a conditional render to show a "Dev Mode" message when running outside Overwolf

That’s it! By declaring the global variable for your build tools and adding runtime checks, you’ll be able to use the Overwolf API seamlessly in React.

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