Vue Webpack环境下CDN引入TweenMax报错：TweenMax未定义

Let's break down why you're hitting this error and walk through the fixes step by step:

1. Check Script Loading Order #

Your wp_enqueue_script loads TweenMax in the footer (the final true parameter), but if your Webpack bundle loads before TweenMax, it’ll try to access a variable that doesn’t exist yet. That’s a common culprit here.

Fix: Add Dependency to Your Webpack Script #

Update your WordPress script enqueue to make your Webpack bundle depend on TweenMax—this ensures TweenMax loads first:

// Enqueue TweenMax first
wp_enqueue_script( 'tweenmax', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js', array(), false, true );
// Enqueue your Webpack bundle with TweenMax as a dependency
wp_enqueue_script( 'your-vue-bundle', 'path/to/your/dist/main.app.js', array('tweenmax'), false, true );

2. Adjust Webpack Externals Configuration #

Your current externals config assumes TweenMax is directly available as a module, but GSAP exposes it as a global window variable. Plus, you’re using Power1 (another GSAP global) in your animation—you need to include that in externals too if you plan to import it.

Updated externals in webpack.dev.config.js: #

module.exports = {
  // ... rest of your existing config
  externals: {
    jquery: 'jQuery',
    // Map imports to their global window counterparts
    TweenMax: 'window.TweenMax',
    Power1: 'window.Power1'
  }
}

For broader module compatibility, you can also use the object format for externals:

externals: {
  jquery: 'jQuery',
  TweenMax: {
    root: 'TweenMax', // Global variable in the browser
    commonjs: 'TweenMax',
    commonjs2: 'TweenMax',
    amd: 'TweenMax'
  },
  Power1: {
    root: 'Power1',
    commonjs: 'Power1',
    commonjs2: 'Power1',
    amd: 'Power1'
  }
}

3. Correct Your Vue Component Code #

With externals set up properly, make sure you import both TweenMax and Power1 in your .vue file:

<script>
import TweenMax from 'TweenMax'
import Power1 from 'Power1'

export default {
  // ... your component logic
  methods: {
    animateElements(el, time, delay) {
      const that = this;
      $(el).each(function(i){
        TweenMax.from($(this), time, {
          opacity: 0, 
          x: 0, 
          y: that.random(-200, 200), 
          z: that.random(500, 1000),
          delay: i * delay, 
          yoyo: true, 
          repeat: -1, 
          repeatDelay: time * 10, 
          ease: Power1.easeOut
        });
      });
    }
  }
}
</script>

Alternative: Skip Imports and Use Global Variables Directly #

If you want to avoid import/externals confusion entirely, you can reference the global window variables directly—since you’ve loaded TweenMax via CDN, it’s already attached to the window object:

<script>
export default {
  methods: {
    animateElements(el, time, delay) {
      const that = this;
      $(el).each(function(i){
        window.TweenMax.from($(this), time, {
          opacity: 0, 
          x: 0, 
          y: that.random(-200, 200), 
          z: that.random(500, 1000),
          delay: i * delay, 
          yoyo: true, 
          repeat: -1, 
          repeatDelay: time * 10, 
          ease: window.Power1.easeOut
        });
      });
    }
  }
}
</script>

This approach skips Webpack externals entirely and relies on the CDN-loaded global variables directly.

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