{"record":{"id":"2bf6d1041afc59d3","repo":"vuejs/core","slug":"on-the-fly-template-compilation-is-not-supported-i","errorCode":null,"errorMessage":"On-the-fly template compilation is not supported in the ESM build of @vue/server-renderer. All templates must be pre-compiled into render functions.","messagePattern":"On-the-fly template compilation is not supported in the ESM build of @vue/server-renderer\\. All templates must be pre-compiled into render functions\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/server-renderer/src/helpers/ssrCompile.ts","lineNumber":28,"sourceCode":"\nimport * as Vue from '@vue/runtime-dom'\nimport * as helpers from '../internal'\n\ntype SSRRenderFunction = (\n  context: any,\n  push: PushFn,\n  parentInstance: ComponentInternalInstance,\n) => void\n\nconst compileCache: Record<string, SSRRenderFunction> = Object.create(null)\n\nexport function ssrCompile(\n  template: string,\n  instance: ComponentInternalInstance,\n): SSRRenderFunction {\n  // TODO: this branch should now work in ESM builds, enable it in a minor\n  if (!__CJS__) {\n    throw new Error(\n      `On-the-fly template compilation is not supported in the ESM build of ` +\n        `@vue/server-renderer. All templates must be pre-compiled into ` +\n        `render functions.`,\n    )\n  }\n\n  // TODO: This is copied from runtime-core/src/component.ts and should probably be refactored\n  const Component = instance.type as ComponentOptions\n  const { isCustomElement, compilerOptions } = instance.appContext.config\n  const { delimiters, compilerOptions: componentCompilerOptions } = Component\n\n  const finalCompilerOptions: CompilerOptions = extend(\n    extend(\n      {\n        isCustomElement,\n        delimiters,\n      },\n      compilerOptions,","sourceCodeStart":10,"sourceCodeEnd":46,"githubUrl":"https://github.com/vuejs/core/blob/a2b40db9a83b36ed9da3a16403cf8f040262d73f/packages/server-renderer/src/helpers/ssrCompile.ts#L10-L46","documentation":"Thrown by ssrCompile in @vue/server-renderer when the ESM build of the package is asked to compile a template string on the fly. On-the-fly SSR template compilation requires the compiler, which the ESM build deliberately excludes; the CJS build (__CJS__) still supports it. ssrCompile.ts:28 hard-fails for non-CJS builds. The intended workflow is to pre-compile templates into render functions.","triggerScenarios":"Passing a `template` string option on a component that then gets server-rendered through renderToString/renderToStream from the ESM build of @vue/server-renderer. Using in-DOM/string templates in an SSR pipeline.","commonSituations":"Authoring components with the `template` option instead of render functions/<template> SFC blocks; running SSR through the ESM entry (default for modern Node ESM projects) instead of CJS; upgrading an SSR pipeline that previously bundled the CJS build.","solutions":["Pre-compile all templates: use SFC <template> blocks compiled by @vue/compiler-sfc at build time, or write render functions.","If on-the-fly compilation is unavoidable, import the CJS build of @vue/server-renderer (and register the compiler) so __CJS__ is true.","Register a runtime compiler via the app's compilerOptions only when using a build that supports it (CJS).","Remove the `template` option from runtime components and replace with an imported render function."],"exampleFix":"// before (ESM build)\nconst App = { template: '<div>{{ msg }}</div>' }\nawait renderToString(createApp(App))\n\n// after\nimport { h } from 'vue'\nconst App = { render: () => h('div', msg.value) }\nawait renderToString(createApp(App))","handlingStrategy":"validation","validationCode":"// Reject string templates before SSR when using the ESM build.\nfunction assertNoStringTemplate(component: any) {\n  if (typeof component.template === 'string') {\n    throw new Error('Pre-compile templates; the ESM SSR build cannot compile on the fly.')\n  }\n}","typeGuard":"function hasStringTemplate(component: unknown): boolean {\n  return !!component && typeof (component as any).template === 'string'\n}","tryCatchPattern":null,"preventionTips":["Author components as SFCs or render functions; never set the `template` option for SSR.","If you need runtime compilation, use the CJS build of @vue/server-renderer and register the compiler.","Lint against the `template` option in SSR-bound components."],"tags":["vue","server-renderer","ssr","esm-build","template-compilation","configuration"],"backgroundTag":null,"analyzedSha":"a2b40db9a83b36ed9da3a16403cf8f040262d73f","analyzedAt":"2026-08-12T14:21:14.989Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}