Multiple Error Messages Running Parcel 2.13.2 on GSAP 3

February 28, 2025

Admittedly, I installed Parcel after the project was underway. However, as you can see in the screenshot, I receive error messages only in reference to conflcts with code inside GSAP modules. I love GSAP. I am having a blast. But I do not understand these compatibility issues, and I don't want to touch the code inside the GSAP modules.

In addition, I also receive a MODULE NOT FOUND or a "Build Failed" error regardless of whether I use "npm" or "npx" and whether I run "npx parcel index.html", "npx parcel build"; or I use the script names in package.json as in "npx run dev (or build)". It does not seem to matter. The conflicts remain the same.

I searched the docs and I reviewed the other questions in this forum. I added the code below to help resolve the resolver-default issues.

It was suggested in several forums:

"@parcel/resolver-default": {
"packageExports": true
}

But it does not solve the problem.

I have uploaded index.html and package.json file for this project.

Please note Parcel insisted I place "type=module" before the extracted GSAP modules, or Parcel would not run. So that's not the problem, I assume. The index.html file has all the Javascript above the closing body tag. It works perfectly in my local development server and on Codepen without the build tool.

Do I need a build tool? I'm new.

If you have any insights or - even better - solutions, I would appreciate any feedback when you can respond.

The screenshot above shows the error messages I receive. I have not seen others except as noted above.

I added the Codepen link, though I have not installed parcel there. I will work on making a Codepen with the current code. Since the problem lies in the package.json file, it's probably not that helpful. to produce a second codepen. Otherwise, the problematic changes are in the uploaded documents below.

(EDIT: I have now forked the functional site, pasted in the code from the dysfunctional site with Parcel, and replaced the Codepen link above).

I duplicated the project before I installed the build tool. I'm glad for that!

Thank you ,

Robert

index.html package-lock.json

See the Pen xbxgrBP by robertpfaff (@robertpfaff) on CodePen.

February 28, 2025

Hi,

If you use parcel you have to install GSAP using the .npmrc file at the root of your project or use the gsap-bonus.tgz file you'll find in the download section of your account dashboard. That of course if you want to use import statements. Otherwise you can use the regular files you can find in the src folder of the ZIP file you can download as regular script tags. Just remember to put them before the project's main JS file, something like this:

<body>
  <!-- ALL YOUR HTML HERE -->
  <script src="./src/gsap/gsap.min.js"></script>
  <script src="./src/gsap/DrawSVGPlugin.min.js"></script>
  <!-- This points to a file in this folder src/app.js -->
  <script type="module" src="app.js"></script>
</body>

Then in your app.js file there is no need to import anything from GSAP, just use it in the same way you do it on codepen.

To clarify the errors you're getting is because you're using a regular JS file as an ES Module. For that you could use the content in the esm folder of the ZIP file you can download in your dashboard but, you'd also need to add a bunch of other files. For that as I mentioned is better to either install using the .npmrc file or just install the .tgz file as stated in the installation guide:

https://gsap.com/docs/v3/Installation?tab=npm&module=esm&method=zip&tier=club&club=true&require=false&trial=true&club-plugins=DrawSVGPlugin

But I think in this case is just easier to just use the files in the src folder of the ZIP file, then when you bundle this parcel will include the required files only.

Hopefully this clear things up.

Happy Tweening!

February 28, 2025

Thanks for your timely response. I have watched the installation video several times (LOL). I did place an .npmrc file at the root of the project, and I remember installing the gsap-bonus.tgz file in the original site. I assume it carried over to the duplicated site I used to experiement with Parcel.

I need to regroup with a fresh head when I can focus. I'm exhausted, but I wanted to say thanks.

I greatly appreciate your time and guidance.

March 3, 2025

Hey! I'd love to help with this. But could I ask what you're trying to achieve first?

Why did you reach for parcel in the first place? Are you just trying to get your code working in a repository you can host somewhere outside of codepen?

I've sent you a DM with a folder which has the very very simplest setup necessary - no build tooling, no modules, no imports. Just script tags and minified JS. See how you get on with that!

March 3, 2025

Hi,

If you installed the .tgz file originally and if you want to switch to the regular npm installation, you should've uninstalled the tgz file first with npm uninstall gsap -s, delete the package-lock.json file and then install using the .npmrc file.

I'm far from being an expert in bundling systems but my best guess is that it shouldn't be recommendable to install a bundling/compiling system on a project that already has one. The devops branch of web/app development is what deals with this(and other things as well) and these days is an entire separate area, but is a complex one nonetheless. For simple mortals like us is better to create a new folder and install the new bundling system there. You might end up with two folders for the same project but is the cleanest and simplest way to do that.

Happy Tweening!

March 4, 2025

12 hours ago, Rodrigo said:

Hi,

If you installed the .tgz file originally and if you want to switch to the regular npm installation, you should've uninstalled the tgz file first with npm uninstall gsap -s, delete the package-lock.json file and then install using the .npmrc file.

I'm far from being an expert in bundling systems but my best guess is that it shouldn't be recommendable to install a bundling/compiling system on a project that already has one. The devops branch of web/app development is what deals with this(and other things as well) and these days is an entire separate area, but is a complex one nonetheless. For simple mortals like us is better to create a new folder and install the new bundling system there. You might end up with two folders for the same project but is the cleanest and simplest way to do that.

Happy Tweening!

Lesson learned. Thanks. I uninstalled Parcel, and returned to a backed-up version of the site before I installed it. I did not start over from scratch, but I could. To be honest, this is my first stab at a "professional" portfolio site. The codes needs to look likea professional designed it.

Personally, it represents a huge transistion from disability back to the working world. I can't afford to look like an amateur. I understood using a build tool would help to leave the right impression. I had weighed the risks of installing one after the project was already underway, as noted in the original post.

I duplicated the folder/project before I installed Parcle for those same reasons.

As I asked above, "Do I really need one?" I don't know. I read the docs.

Parcel seemed like a simple way to start with vanilla JS. It apparently bundles the files into a single file to enhance performance in many ways. The biggest challenge in teaching yourself how to code is assessing what you need to know, what order you should proceed, and how to use apply it best. I could have tripped and fallen into the wrong rabbot hole here (It would not be the first time) but it seemed like something I needed to understand.

The other build tools, like Vite, seem designed to use with React, which I have not learned yet. It's next on my list.

It looks like I took a wrong turn, so i returned to the project I duplicated.

Now I am struggling to learn stacking contexts.

March 4, 2025

Hi Cassie,

I woud love to have your help! I have wached your videos and seen your other responses.

Thanks for reaching out.

This my first attempt at a "professional" portfolio site and a big transistion in my life and career. The animation is a simple (or so I thought) landing page animation of my company name (Splash) with a handwriting effect. It works perfectly on my local development server.

It's already working outside Codepen, but...only if I place my GSAP code above the closing body tag in the html page. I was never able to make it work in an external javascript page.

The portfolio site needs to be next level. It must leave the right impression. It is part of the Codecademy class on Full-Stack Engineering. They say you get extra credit for hosting it online... but I have never received a grade from them ever (LOL). They say they offer assistance. I asked for assistance once in my first year as a paid member. I received "customer service" but no assistance with the programming issue.

The reception here has been wonderful. That's hard to find and it makes all the difference in the world to me.

I want to host it online. I need to learn these skills for deeply personal reasons.

If the absence of a build tool, like Parcel, will make the site appear amateurish, then I need to stop and learn build tools. I am trying to transistion from disability back to the workforce after a 15-year absence.

I cannot look like a hobbyist. I am very self-directed and work on my skill level every day, but it's not an easy path to trod when you're teaching yourself. That's not a sob story - just the reality. The code will be public on Github for a while to show I know how to work with SVG images in complex animations.

(Right now, I'm struggling with stacking contexts as I try to animate other words of varying opacities, but that's another can of worms. I mention it in case you know of a great tutorial, or in case I have missed something obvious. I don't see much in the docs. Have I missed something?)

I duplicated the project before I reached for Parcel, so I just returned to a previous version.

I reached for it becase it seems to be the simplest build tool - one without configuration that combines your files into one long file to enhance performance in many ways. That was my understanding. The other build tools, like Vite, seem designed to work best with React (?). It's next on my list, but I am still using vanilla JS at the point.

Parcel seemed like the best fit for a non-React site with no configuration needs.

Thanks for the folder! I have not explored it yet. I just got your message.

But I can't wait, seriously. I am so on top of it.

Thank you again.

Robert

Thank you again.

March 4, 2025

5 hours ago, Robert Pfaff said:

Personally, it represents a huge transistion from disability back to the working world. I can't afford to look like an amateur. I understood using a build tool would help to leave the right impression. I had weighed the risks of installing one after the project was already underway, as noted in the original post.

I would first get your project up and running like you want it to work. Then you have something to compare to when installing a build tool, because all it is doing is the same thing like you would normally build a website, but then with some extra features, but the end result is kinda the same. So having a working version first allows you to compare the two.

What is the goal? Do you want to get hired? Or start your own business? With the first I think maybe it is good that you know build tools exist, but every company has there own process and you will probably never touch the build tools or you want to be hired as a build tool expert 😭 but after setting one up for my self I would not wish that on anyone.

5 hours ago, Robert Pfaff said:

The other build tools, like Vite, seem designed to use with React, which I have not learned yet. It's next on my list.

Vite is build by the Vue.js team, so not React specific at all. To me this seems like the easiest tool and just moved all my projects over to

4 hours ago, Robert Pfaff said:

(Right now, I'm struggling with stacking contexts as I try to animate other words of varying opacities, but that's another can of worms. I mention it in case you know of a great tutorial, or in case I have missed something obvious. I don't see much in the docs. Have I missed something?)

it. But again every company has their own workflow and you just get thought theirs and then never touch the build tools again.

4 hours ago, Robert Pfaff said:

It's already working outside Codepen, but...only if I place my GSAP code above the closing body tag in the html page. I was never able to make it work in an external javascript page.

In Codepen you can export your pen, which gets you all the files in a .zip of which your demo is made of. This would load an external .js file which gets imported in the .html via a <script src="your.js"> and thus load via an external .js file.

4 hours ago, Robert Pfaff said:

If the absence of a build tool, like Parcel, will make the site appear amateurish, then I need to stop and learn build tools. I am trying to transistion from disability back to the workforce after a 15-year absence.

These skills take years to master, so my advise don't try to learn them all at the same time. Build tools are great, if you have an issue you're trying to solve, just adding a build tool for having a build tool doesn't really boat well to me. If you would for instance say that you tested your site via some page speed tool and it would state that you get minus points for not minifying your JS, then I could see a need for a build tool.

But I would start by creating websites and not worry about build tools at the moment then when you have some spare time on a rainy day try some things. Get your site on Github (another skill valuable to learn), but I would be more impressed with a good working site than if it has a build tool or not.

4 hours ago, Robert Pfaff said:

(Right now, I'm struggling with stacking contexts as I try to animate other words of varying opacities, but that's another can of worms. I mention it in case you know of a great tutorial, or in case I have missed something obvious. I don't see much in the docs. Have I missed something?)

That sound like a CSS question and in theory has nothing to do with GSAP, but another skill to learn. CSS is really important when working with GSAP, but it is not something you'll find in our docs. But check out our own @Carl's tutorial on adding staggers to text that is stacked right on top of each other with CSS.

4 hours ago, Robert Pfaff said:

Parcel seemed like the best fit for a non-React site with no configuration needs.

Could be, there are probably hundreds of them out there. There is no one better than the other just different preferences and learning one doesn't guarantee success with others. It might allow you to learn the concept behind them, but it is a different skill all together and you probably never going to touch a build tool again after setting it up the first time.

Good luck in your journey and keep on tweening (much more fun then setting up build tools)

March 4, 2025

Thanks. Your responses have helped to place a lot in perspective.

Since I started down this road about three years ago, I've wanted is to launch a boutique firm that works with 4-5 customers on website design and management. Long, stronger and focused relationships with a few clients. If it grows into something bigger, I would not mind. But it's not my present goal.

Unfortunately, I have a rare neurological issue. My nervous system inflames easily.

You would not wish this much pain on anyone; but the career killer is the adverse effect on my temperment. That alone precludes me from working in a traditional corporate environment. I need as much control over stress levels as possible. I need my hand on the valve.

Though website design and JS coding can be stressful, I can work at home. I can take breaks as I see fit. No client will ever see or hear me lose it. I do have an International MBA or Master's in Financial Statistics (e.g. portfolio and securities management) with several years of Python training.

However, I did not work in the financial industry for long before the 2009 meltdown.

I understand Python is the preferred language of the financial world. I thought my education would serve as good angle for attracting corporate clients. I have tons of experience in fundraising and communcations, including designing and managing websites for nonprofits, which goes back 25 years.

I am still climbing the learning curve, but I am over the hump. I feel like I am almost ready to start. It might take me longer, but I can solve most problems or hire someone to help me. It's time to take the plunge!

My website should be up and running in a month.

My skills are growing. I have a ton of "certificates" from almost every major learning platform in almost everything related to web design; but I don't broadcast it. My impression is no one cares about your certificates.

They care that you've demonstrated a professional skill level that fits their needs. That brings me full circle to my portfolio site. It must pass the smell test with other coders and designers. What you said about "build tools" tells me I don't need to know "build tools" before I start working again.

I don't need to prove I know them with my portfolio site (though I will probably at least take a course in Vite). I heard you say it depends on whether the scope and nature of a client's site demands one. In my case, it does not. My starter portfolio site is not a huge corporate undertaking.

Everyone's responses have been so helpful. As always, I am grateful for your feedback.

I welcome more should it spring to mind.

Much appreciated,

Robert

March 4, 2025

I echo everything that @mvaneijgen said. I'll add a little bit of advice here after a good few years of learning. 💚

There are a lot of different bits and pieces and tools and techniques out there to help people build websites. They all exist to help with frustrations people encounter while building for the web. While you're learning, it's best to do things as simply as possible and experience the frustration before reaching for a tool! Then it's easy to understand WHY that tool exists.

In terms of parcel and other build tools here's a table with some of the WHY's.

If you take a look and realise that multiple things in the right column are regularly annoying you - it might be time to choose a build tool. If it turns out that none of them are annoying yet, stick with a simpler no-build system for now. (They will annoy you given enough time, and for now it's easier to be annoyed with something simple than something more complex. )

It's even a computing rule/methodology 😉 - https://en.wikipedia.org/wiki/Rule_of_least_power

Feature	Parcel 🛠️	Vanilla (No Build) 🌿
Setup Complexity	Requires `npm install parcel`	No setup—just write HTML, CSS, and JS
Performance	Automatic minification, tree shaking, lazy loading	Must manually optimize assets & minify code
Hot Reloading	Instant refresh with state preserved (HMR)	Manual browser refresh needed
Modern JS Support	Supports ES6+, TypeScript, JSX out of the box	Manual script tags or native ES modules
Code Splitting	Automatic	Manual (`<script>` tags or dynamic `import()`)
Asset Handling	Bundles and optimizes images, fonts, CSS, etc.	Must manually manage file paths and optimize assets
Production Builds	Optimized, tree-shaken, hashed files	Must manually optimize files

Good luck with your learning and thanks for being such a polite friendly presence in the forums 🌟 You're welcome any time.

March 4, 2025

Thanks again. What a great table. It's a useful tool.

If anyone asks, I can tell them why or why not they need a build tool.

Sincerely, it helps a bunch.

Take care,

Robert

Notifications

Messages

Multiple Error Messages Running Parcel 2.13.2 on GSAP 3

Recommended Posts

Robert Pfaff

Rodrigo

Robert Pfaff

Cassie

Rodrigo

Robert Pfaff

Robert Pfaff

mvaneijgen

Robert Pfaff

Cassie

Robert Pfaff

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members