Bare Import Warnings

Symptom

After deploying, the deploy panel or Problems panel shows a warning:

"gsap" is not bundled — make sure it's loaded via a <script> tag before your code

At runtime, the browser console may show Uncaught ReferenceError: gsap is not defined or a similar error for the unresolved module.

Likely Causes

1. Missing external dependency: Your code imports an npm package by name (import gsap from 'gsap'), but the package is not added to the project's external dependencies. Odyn does not bundle npm packages from bare specifiers. It expects them to be loaded via <script> tags before your code.

2. Typo in import specifier: The import path has a typo (e.g., import { animate } from 'gasp' instead of 'gsap').

3. Missing dependency plugin: You import a sub-package (e.g., gsap/ScrollTrigger) but only added the core GSAP library as a dependency, not the plugin.

Checks

1. Identify the bare specifier from the warning message (e.g., "gsap").
2. Open the Dependencies panel (Dependencies icon in the left activity bar).
3. Check whether the library is in the dependency list.
4. If the library is listed, verify the version and URL are correct.
5. Check the embed code: the library's <script> tag must appear before your project's bundle script tag. Load order matters.

Fixes

Add the dependency

1. Open the Dependencies panel.
2. Use Curated Presets for common libraries (GSAP, Swiper, Lenis, Barba.js) or npm Search to find the package.
3. Add the library. It appears in the dependency list and in the generated embed code.
4. Redeploy.

The generated embed code places dependency <script> tags before your bundle, ensuring the library is available when your code executes.

Fix import style for CDN-loaded libraries

When a library is loaded via a CDN <script> tag, it typically attaches to the global scope (e.g., window.gsap). You can reference it directly:

// Instead of:
import gsap from 'gsap';

// Use the global:
const { gsap } = window;
// or simply reference gsap directly if it's on the global scope.

However, Odyn's bundler treats bare import specifiers as external and excludes them from the bundle. The warning is informational: if the library is loaded via a <script> tag and exposes a global, your code works at runtime even with the warning present.

Add GSAP plugins

For GSAP sub-packages like ScrollTrigger, add the plugin via the curated preset (GSAP preset includes a plugin picker for ScrollTrigger, Flip, Draggable, Observer, and others). Each plugin gets its own <script> tag in the embed code.

Verify load order

In your embed code, dependencies must appear before the project bundle:

<!-- Dependencies first -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>

<!-- Then your bundle -->
<script src="https://cdn.odyn.dev/p/{project}/bundle.js" defer></script>

If your bundle loads before the dependency, the global is not yet defined when your code runs.

What to Capture for Escalation

1. The exact warning message from the deploy panel.
2. The import statement in your code that triggers the warning.
3. The contents of the Dependencies panel (which libraries are listed, in what order).
4. The generated embed code (check whether the dependency script tag is present and ordered correctly).
5. Browser console errors when loading the page.