❌ Runtime code defined in config file

If you get an error like this:

[Wrong Usage] title defined by /pages/+config.js must be defined using a separate file +title.js

Then this means you're trying to define runtime code inside a config file (e.g. +config.js) which is forbidden.

// pages/+config.js
 
export default {
  // ❌ Forbidden: the function title() is runtime code
  title: (pageContext) => pageContext.data.title
}

// pages/+config.ts
 
import type { Config, PageContextServer } from 'vike/types'
 
export default {
  // ❌ Forbidden: the function title() is runtime code
  title: (pageContext: PageContextServer) => pageContext.data.title
} satisfies Config

The title() function is called at runtime (when the page is rendered) and not at config time (when Vike loads +config.js files).

Instead do this:

// pages/+title.js
 
// ✅ Allowed: Vike is able to lazily load this function at runtime
 
export default (pageContext) => pageContext.data.title

// pages/+title.ts
 
// ✅ Allowed: Vike is able to lazily load this function at runtime
 
import type { PageContextServer } from 'vike/types'
 
export default (pageContext: PageContextServer) => pageContext.data.title

Or this:

// pages/+config.js
 
// ✅ Allowed: same as defining +title.js
 
import title from './title' with { type: 'pointer' }
 
export default {
  title
}

// pages/+config.ts
 
// ✅ Allowed: same as defining +title.ts
 
import type { Config } from 'vike/types'
import title from './title' with { type: 'pointer' }
 
export default {
  title
} satisfies Config

🚧
The with { type: 'pointer' } import attribute isn't implement yet, see workaround at #1500.

See API > Config Files > Pointer imports to understand why you cannot define runtime code inside +config.js.

❌ Runtime code defined in config file

See also