How Tree Shaking Can Break Your No-Code + AI App (and How to Fix It)

As developers lean more into using AI tools like GPT-4 and no-code platforms such as Bubble, Webflow, or FlutterFlow, there's often a little less focus on what's happening under the hood, especially once the app is deployed. But if you're deploying AI-enhanced frontend or backend code to platforms like Vercel, Netlify, or similar, there’s a hidden gremlin you might face: tree shaking gone rogue.

What Is Tree Shaking?

In plain terms, tree shaking is a process done during your app's build step that tries to remove any unused code. It's a brilliant way to make your apps smaller and faster to load. But sometimes, it's a little too clever.

Imagine: you've imported a library like lodash deep within your app, but only use it inside a client-side component. If your serverless deployment platform doesn't see that specific import as necessary for the server-side bundle, it might prune it away. As a result, your app suddenly throws a runtime error like:

Error: Cannot find module 'lodash/isEqual'

Why This Is a Problem for No-Code & AI Workflows

If you're using AI-generated components or relying on no-code tools that auto-generate code, you may not even realize how the codebase is structured behind the scenes. These tools might generate a dynamic import or place dependencies in files that are only called under certain edge conditions.

Worse? You may not even hit the error locally since local builds often include all dependencies by default. It’s only when deployed, using optimized build targets, that the issue emerges.

How to Fix It

First, identify the missing module. In your Vercel (or similar) logs, look for messages like "Cannot find module...". Then you need to explicitly tell your framework's bundler that the dependency is needed on the server side.

For Remix apps, for instance, you can add it to serverDependenciesToBundle in your remix.config.js:

module.exports = {
  serverDependenciesToBundle: ["lodash", "lodash/isEqual"]
};

For other frameworks, look for similar configuration options around server bundling or dependency inclusion. Check your build pipeline documentation.

A Better Workflow for AI + No-Code Projects

To avoid these problems in the future:

• Review auto-generated imports: AI tools often insert reusable packages like lodash or date-fns. Make sure they're included where needed.
• Check framework presets in your deployment platform: This ensures your build aligns with your app's actual structure.
• Use build analysis tools: Platforms like Vercel provide build output logs, read these to see what gets bundled and what doesn’t.
• Separate server & client logic clearly: If your no-code tool lets you organize functions or code into front- and back-end folders, use it. It makes it easier for bundlers to be smart, and you’ll hit fewer invisible walls.

Bonus Tip: Build Once, Test Twice

Before shipping to your live deployment, test your app in a “production-like” preview environment, ideally on the same platform you’ll deploy to (e.g., Vercel). This can help catch tree-shaking and module bundling issues before your users do.

Conclusion

Tree shaking is powerful, but it doesn’t always play nice with AI-generated or no-code applications. By understanding your build tools, even just lightly, you can prevent a class of painful issues that only show up in production. Don't let a missing module crash your next big idea.

Happy shipping!