AI coding assistants like Cursor, Claude, and GitHub Copilot have made software creation feel effortless. With a single natural language prompt, an AI can stream hundreds of lines of code across dozens of files—generating frontend components, API routes, database schemas, and utility functions in seconds.
Your application renders perfectly on localhost. It feels like magic—until you decide to add a custom feature yourself.
You create a new file, write a small utility function, attempt to import it into your main component, and instantly hit a wall:
Uncaught SyntaxError: Cannot use import statement outside a module
// or
TypeError: (0 , _utils.calculateTotal) is not a function
Suddenly, the application breaks. The AI generated thousands of lines of complex architecture effortlessly, but you are stuck on a single line at the top of your file: import { calculateTotal } from './utils'.
The Abstracted Wiring Problem in AI Development
When an AI assistant generates an entire project structure, it manages the module wiring behind the scenes. It creates the directory tree, connects import statements, sets up export declarations, and resolves relative paths automatically.
Because the AI connects those files programmatically, the developer never gets hands-on practice with how data and functions move across file boundaries. Module imports and exports are the plumbing of modern software engineering; when an AI builds the house, all the pipes are hidden behind the drywall.
4 Common Import/Export Errors That Trip Up Vibe Coders
JavaScript and TypeScript module systems appear simple, but subtle syntax differences lead to frequent runtime failures for non-traditional developers.
1. Named Exports vs. Default Exports
Developers frequently confuse how a function is exported with how it must be imported:
// utils.js
export const calculateTotal = () => { ... }; // Named Export
export default function analytics() { ... }; // Default Export
Importing a named export without curly braces (or a default export with curly braces) leads to silent undefined errors or broken execution:
// ❌ BROKEN
import calculateTotal from './utils';
// ✅ CORRECT
import { calculateTotal } from './utils';
2. CommonJS (require) vs. ES Modules (import)
Modern frontend frameworks (like Next.js, React, and Vite) utilize ES Modules (import/export). Legacy Node.js environments often use CommonJS (require/module.exports).
Because AI models are trained on both paradigms, they occasionally mix CommonJS syntax into ES Module projects (or vice versa), causing immediate module resolution crashes.
3. Relative Paths vs. Path Aliases (@/)
AI tools frequently use path aliases to keep import statements clean:
import { db } from '@/lib/db'; // Path alias pointing to project root
import { User } from '../../types/user'; // Relative path navigationCopying an alias-based import into a custom file without understanding where @/ resolves (configured in tsconfig.json or vite.config.js) causes bundler failures.
4. Circular Dependencies
As applications grow, File A may import File B, while File B secretly imports File A back. AI assistants frequently introduce circular dependencies without throwing explicit build errors, causing imported functions to evaluate to undefined at runtime.
How to Master File Wiring when Coding with AI
3 Checklist Items Before Importing AI Code
- Verify Export Style First: Open the target file and check whether it uses
export defaultor namedexport const. - Check package.json Settings: If
"type": "module"is declared in your config, strictly useimport/exportstatements. - Trace Imports Manually: Spend 60 seconds inspecting the file structure generated by the AI before asking it to build the next feature.
Conclusion
Building software with AI isn't just about describing UI elements—it requires understanding how distinct modules communicate. While an AI assistant can generate boilerplate instantly, your ability to create, edit, and wire custom files by hand is what separates a passive prompter from an independent developer.
#VibeCoding #AICoding #JavaScript #TypeScript #WebDevelopment #SoftwareEngineering #Cursor #QubesTech
