XSplit Overlay开发：npm安装xjs-framework后require加载失败求助

Hey Ben, let's work through why your require() calls for the xjs-framework are failing—this is a common gotcha with XSplit Overlays because of how they run under the hood!

The Core Problem: XSplit Overlays Aren't Node.js Environments #

XSplit Overlays are essentially web pages running in XSplit's built-in browser, not Node.js. That means Node-specific functions like require() aren't natively supported here. Your attempts to use require() (even with absolute paths) will throw errors because the browser doesn't recognize that syntax.

Fix 1: Load the Framework with a <script> Tag #

Instead of using require(), directly include the xjs.js file in your index.html using a standard <script> tag. Here's how:

Option A: Use a relative path to node_modules (simplest if you keep the package installed)

If your index.html is in the root of your Xsplit_fortnite_CURRENT folder, add this line inside the <head> or <body> of your HTML:

<script src="./node_modules/xjs-framework/dist/xjs.js"></script>

Option B: Copy the file to your project (for portability)

1. Copy node_modules/xjs-framework/dist/xjs.js to a subfolder in your project (e.g., ./lib/xjs.js)
2. Add this script tag instead:

<script src="./lib/xjs.js"></script>

Once loaded, the xjs variable will be available globally in your overlay's JavaScript—no need to declare it with var xjs = ....

Fix 2: Verify the Path & Debug with Dev Tools #

If the framework still doesn't load:

• Open XSplit's Developer Tools (press F12 while your overlay is active)
• Check the Console tab for 404 errors—this will tell you if the browser can't find the xjs.js file at the path you specified
• Adjust the relative path in your <script> tag to match the actual file structure (e.g., if your index.html is in a src subfolder, you'd use ../node_modules/...)

Fix 3: Test for Successful Loading #

Add a quick test script to confirm the framework is loaded:

<script>
  window.addEventListener('load', function() {
    if (typeof xjs !== 'undefined') {
      console.log('✅ xjs framework loaded successfully!');
    } else {
      console.error('❌ Failed to load xjs framework—check your script path!');
    }
  });
</script>

Bonus: Ensure Version Compatibility #

If you're still having issues, try reinstalling the framework to make sure you have a compatible version:

npm uninstall xjs-framework
npm install xjs-framework

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