Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
gaggo

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

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

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.
×