Jump to content
Search Community

SyntaxError: 'import' and 'export' may only appear at the top level (22:0) while parsing [...]/node_modules/gsap/TweenLite.js

gaggo test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi there, I'm having problems once again with babelify and gsap. When importing any file from gsap:

 

import TweenLite from 'gsap/TweenLite';

 

...I keep getting this error in the console:

 

SyntaxError: 'import' and 'export' may only appear at the top level (22:0) while parsing [...]/node_modules/gsap/TweenLite.js

 

[...] is my local path. The file exists. It works just fine, if I copy the full gsap folder in my project and reference it relatively:

 

import TweenLite from '../gsap/TweenLite';

 

This is not related to the many issues in the internet, that are being solved by installing `babel-preset-es2015`. (One example:  https://github.com/babel/babelify/issues/157#issuecomment-188146766)

Link to comment
Share on other sites

...This also creates problems when I use premium plugins like the ThrowPropsPlugin. I have to re-write this line:

 

import { TweenLite, _gsScope, TweenPlugin, Ease } from "gsap/TweenLite.js";

 

to

 

import { TweenLite, _gsScope, TweenPlugin, Ease } from "../gsap/TweenLite.js";

 

...making it also reference the relative folder outside the default node_modules location.

Link to comment
Share on other sites

OK, I found the solution:

 

  • Browserify expects commonJS modules
  • Babelify runs before the final Browserify process and converts all es6 modules to commonJS – files inside node_modules are ignored by default
  • GSAP V2 uses es6 modules and resides inside node_modules, which caused the errors

 

Adding this to the package.json of the npm GSAP solves this:

 

"browserify": {
  "transform": ["babelify"]
}

 

Could you please put this inside by default? Could save a lot of people some trouble. 
 

Link to comment
Share on other sites

Thanks for the suggestion, @gaggo. Absolutely, we can drop that into the next release. Do you (or anyone) know of any risks of adding that to the package.json? I can't think of any right now. 

 

(Also, for the record, you could use the /umd/ version if that's easier for your setup - you don't have to use ESM)

Link to comment
Share on other sites

Hi @GreenSock, sorry for the late response – was on holidays for the week. I don't know of any risks of adding it to the package.json. I think it would make it much more intuitive to many of us, if it would 'just work', without using the /umd/ files.

  • Like 1
Link to comment
Share on other sites

  • 2 years later...

This is the exact problem I am having now using gsap with this build command...

        "buildx": "npx browserify ./src/main.ts -p tsify -t [ babelify --extensions .ts] > ./dist/index.js"
 

Unfortunately, I am way too dumb to understand the issues here in depth.

 

And the simple fix of editing node_modules/gsap/package.json seems not to change anything at all.

 

Is there a wise sage available to give me some tips about what to try next?

 

Thanks!

-c

 

p.s. Superfluous details you probably don't really need...

 

All was good when I was just importing gsap core. But I am trying to use morpSvg now and I get the error...

C:\...******....\node_modules\gsap\MorphSVGPlugin.js:12
import { getRawPath, reverseSegment, stringToRawPath, rawPathToString, convertToPath as _convertToPath } from "./utils/paths.js";
^ ParseError: 'import' and 'export' may appear only with 'sourceType: module'

 

My typescript code looks like this...

import { gsap } from "gsap";
import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";
    gsap.registerPlugin(MorphSVGPlugin); 
Link to comment
Share on other sites

It's super tough to troubleshoot blind, @Yellow Car, but it sounds like your build system doesn't understand modules so maybe try importing from the /dist/ directory to get the plain ES5 files, like: 

 

import { gsap } from "gsap/dist/gsap";
import { MorphSVGPlugin } from "gsap/dist/MorphSVGPlugin";
gsap.registerPlugin(MorphSVGPlugin); 

 

  • Like 2
Link to comment
Share on other sites

  • 3 weeks later...

Thanks, Jack, but your suggestion did not help.

 

What did help was editing the end of gsap/package.json to look like so....

 

  "version""3.5.1"  
  ,"browserify": {
    "transform": [["babelify", { "presets": ["@babel/preset-env"] }]]
 }
}
  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...