Build Errors

TL;DR

Solutions for common build errors including linting failures, TypeScript errors, and bundling issues.

Linting Errors

Problem: Module cannot be found.

Solution:

# Install missing dependencies
bun add <package-name>

# Or check import path
// Check: import { x } from 'manicjs' vs 'manicjs/router'

Solution:

// Either use the variable
const value = usedVariable;

// Or add underscore prefix to indicate intentional non-use
const _unused = something;

Solution:

# Add types
bun add -d @types/<package>

# Or create type declaration
// app/types.d.ts
declare module 'some-package';

Solution:

// Extend the type
declare module 'manicjs' {
  interfaceRouteParams {
    id: string;
  }
}

Solution:

// Simplify complex types
// Or use any with comment
// @ts-expect-error - complex type
const value: any = complexValue;

Solution:

# Check full error message
bun build 2>&1

# Clear cache and rebuild
rm -rf .manic
bun build

Solution:

// Enable code splitting
// Use dynamic imports
const Heavy = import('./HeavyComponent');

Solution:

// Ensure target supports dynamic import
// manic.config.ts
export default defineConfig({
  build: {
    target: 'es2022',
  },
});

Check:

Unexpected token
  --> app/routes/index.tsx:5:3

Solution:

// Check for missing or extra braces
// ✓ Correct
return (
  <div>Hello</div>
);

// ✗ Incorrect - missing >
return (
  <div>Hello</div>
);

bun build --verbose 2>&1 | head -50

bunx tsc --noEmit

bunx oxlint .

Check the full error message - it usually points to the exact location.

Restart the dev server after installing new dependencies.

Use --verbose for detailed build output.