Error when importing MotionPathPlugin

[Matt Moon]

I'm getting a strange error after importing and registering the MotionPathPlugin: "Cannot use import statement outside of a module". 

 

import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import {gsap} from 'gsap';

import { MotionPathPlugin } from "gsap/MotionPathPlugin.js";
gsap.registerPlugin(MotionPathPlugin);

Any ideas?

[ZachSaucier]

Hey Matt and welcome to the forums! Thanks for being a Club GreenSock member.

 

I think it's because of the .js at the end of MotionPathPlugin. I don't believe it should be there. 

 

As a side note, you should check out our new install helper! It help make importing and such more straightforward: https://greensock.com/docs/v3/Installation?checked=core,motionPath#modules

[Matt Moon]

Thanks for your reply, Zach. Unfortunately that didn't fix the issue. I'm able to make things work by using the CDN to load the plugin, but if you're able to come to a fix, that'd be welcomed. 

[ZachSaucier]

@OSUblake might be able to help more as he has more experience with build tools.

 

What directory in your GSAP downloads did you get this MotionPathPlugin from? and where'd you put it in your modules directory?

[Matt Moon]

I dragged the gsap-bonus.tgz file into my root of my project. Then installed it. Maybe I goofed?

[GreenSock]

Hey Matt! It kinda sounds like you're trying to use module syntax OUTSIDE of a module or something. It's difficult to troubleshoot blind, but my guess is that maybe it's one of the following issues:

1. Using "import" in a <script> tag that doesn't have type="module"? That will definitely throw an error like that. Totally unrelated to GSAP. 
2. Perhaps your build system is set up in a way that doesn't work well with ES modules? So maybe try using the UMD files instead, so instead of importing from "gsap/MorphSVGPlugin.js", it'd be "gsap/dist/MorphSVGPlugin.js" (the "dist" directory has all the UMD stuff). 
3. Maybe you need to configure your build system to accommodate ES modules or transpile them or something? But again, you could just use the UMD files instead of that's a pain point. (see #2)

By the way, it's totally fine to have that ".js" on the end of the import. In fact, that can be even more compatible with things, like if you're using it directly in the browser (at least in my experience). 

[Matt Moon]

Ah, OK. That seems to resolve it. Although Webstorm seems to say it can't resolve the plugin, it does work. Thanks!

[OSUblake]

26 minutes ago, Matt Moon said:

Although Webstorm seems to say it can't resolve the plugin, it does work.

 

That might be from the TypeScript definitions, so do not put a .js on the end as "gsap/MotionPathPlugin.js" is not a real path.