React项目引入BlotterJS后提示外部脚本方法未定义求助

It looks like you're hitting a classic script loading timing issue here. Let's break down why this happens and walk through solutions to get BlotterJS working in your React component:

Why the Error Happens #

When you call generateText in componentWillMount, there's a high chance the BlotterJS script hasn't finished loading yet. componentWillMount runs right before your component mounts, and external scripts added via <script> tags load asynchronously by default. On top of that, in React's module-based environment, directly referencing Blotter won't work—you need to explicitly access it from the global window object.

Step-by-Step Fixes #

1. Replace componentWillMount with componentDidMount (Class Components) #

componentWillMount is deprecated in modern React, and more importantly, it runs too early (before the component is attached to the DOM and before external scripts are guaranteed to load). Switching to componentDidMount ensures your code runs after the component mounts, giving BlotterJS time to load:

class Home extends React.Component {
  componentDidMount() {
    // Check if Blotter is already available
    if (window.Blotter) {
      this.generateText();
    } else {
      // Fallback: Wait for the script to finish loading
      const blotterScript = document.querySelector('script[src="https://rawgit.com/bradley/Blotter/master/build/blotter.min.js"]');
      blotterScript.addEventListener('load', () => this.generateText());
    }
  }

  generateText() {
    // Explicitly access Blotter from the window object
    const Blotter = window.Blotter;
    
    // Your Blotter instance setup code
    const material = new Blotter.LiquidDistortMaterial();
    const blotter = new Blotter(material, {
      texts: "Your Blotter Text"
    });
    
    // Render to your target container
    const textScope = blotter.forText("Your Blotter Text");
    textScope.appendTo(document.getElementById('blotter-container'));
  }

  render() {
    return <div id="blotter-container"></div>;
  }
}

2. Use useEffect for Function Components #

If you're using a function component, useEffect with an empty dependency array acts like componentDidMount—it runs once after the component mounts:

import { useEffect } from 'react';

function Home() {
  useEffect(() => {
    const initBlotter = () => {
      const Blotter = window.Blotter;
      
      // Initialize Blotter text here
      const material = new Blotter.LiquidDistortMaterial();
      const blotter = new Blotter(material);
      const textScope = blotter.forText("Hello BlotterJS");
      textScope.appendTo(document.getElementById('blotter-container'));
    };

    // Check if Blotter is already loaded
    if (window.Blotter) {
      initBlotter();
    } else {
      // Optional: Dynamically load the script if you don't want it in index.html
      const script = document.createElement('script');
      script.src = "https://rawgit.com/bradley/Blotter/master/build/blotter.min.js";
      script.crossOrigin = "";
      script.onload = initBlotter;
      document.body.appendChild(script);
    }
  }, []);

  return <div id="blotter-container"></div>;
}

3. Adjust Script Order in index.html #

If you prefer keeping the script in index.html, make sure BlotterJS loads before your React bundle. This guarantees window.Blotter exists when React initializes:

<!-- index.html -->
<script crossorigin src="https://rawgit.com/bradley/Blotter/master/build/blotter.min.js"></script>
<!-- Load React bundle AFTER BlotterJS -->
<script src="/static/js/bundle.js"></script>

Key Takeaways #

• Always access globally loaded libraries via window.[LibraryName] in React modules—this avoids scoping-related "undefined" errors.
• Use post-mount lifecycle methods (componentDidMount or useEffect) to ensure external scripts have loaded before using them.
• If scripts load asynchronously, add a fallback to wait for the load event before running dependent code.

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