Lets just start off by saying I love Lenis. Pause. If you don’t know what it is. Fixing Lenis in Rollup: A Complete Recap

Lenis was not working in our new WordPress theme setup because it was being treated as an external dependency by Rollup. After carefully comparing it with the old working setup, we identified and applied the right fixes.

🔍 The Issues We Faced:

• Lenis Was Missing in `node_modules`

npm list lenis
└── (empty)

This meant Lenis was not installed, preventing Rollup from resolving it.

• Lenis Was Treated as an External Dependency

external: ['gsap/ModifiersPlugin', 'lenis']

This prevented Rollup from bundling Lenis inside main.min.js.

• Wrong Import Path in `lenis.js`

import Lenis from '@studio-freight/lenis';

❌ This was outdated because Lenis had been renamed.

• Lenis Needed to Be Called in `main.js`

Even after fixing the imports, Lenis wasn’t initialized, so we needed to ensure it was properly executed.

🛠️ The Fixes That Worked:

✅ Installed Lenis Properly:

npm install lenis --save

After checking with npm list lenis, it correctly showed:

└── lenis@1.1.20

✅ Removed Lenis from `external` in `rollup.config.js`:

external: ['gsap/ModifiersPlugin'] // ✅ Removed 'lenis'

This forced Rollup to bundle Lenis inside main.min.js.

✅ Fixed Import in `lenis.js`:

import Lenis from 'lenis'; // ✅ Corrected package name

✅ Made Lenis Globally Accessible:

window.lenisInstance = lenis;

Now, we can test it in the browser console.

✅ Fully Rebuilt Everything:

rm -rf node_modules package-lock.json
npm install
npm run build

This ensured all dependencies were correctly linked and Rollup compiled everything properly.

✅ Verified Lenis in DevTools:

console.log(window.lenisInstance);

✅ If it prints an object, Lenis is correctly initialized and working!

🎯 Final Summary:

• 🔹 Issue: Lenis wasn’t working because it was missing, marked as external, and using an outdated import path.
• 🔹 Fixes: Installed Lenis, removed it from external, corrected imports, ensured initialization, and rebuilt.
• 🔹 Verification: console.log(window.lenisInstance); confirmed that Lenis is now working.

✨ Now, Lenis Works Perfectly!

By following these steps, we successfully mirrored the working setup from the old site, ensuring Lenis is correctly bundled in main.min.js.

🚀 Now everything should work as expected! Let me know if you need any additional tweaks.