{"record":{"id":"ce16cb0f3ab75ce1","repo":"BoundaryML/baml","slug":"cannot-import-name-from-boundaryml-baml-in-browser","errorCode":null,"errorMessage":"Cannot import ${name} from '@boundaryml/baml' in browser environment. Please import from '@boundaryml/baml/browser' instead.","messagePattern":"Cannot import (.+?) from '@boundaryml/baml' in browser environment\\. Please import from '@boundaryml/baml/browser' instead\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"engine/language_client_typescript/index.js","lineNumber":25,"sourceCode":"    }\n    Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n    if (k2 === undefined) k2 = k;\n    o[k2] = m[k];\n}));\nvar __exportStar = (this && this.__exportStar) || function(m, exports) {\n    for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.BamlCtxManager = exports.BamlStream = exports.TraceStats = exports.Timing = exports.StreamTiming = exports.Usage = exports.LlmStreamCall = exports.LlmCall = exports.FunctionLog = exports.Collector = exports.ClientRegistry = exports.invoke_runtime_cli = exports.Video = exports.Pdf = exports.Audio = exports.Image = exports.FunctionResultStream = exports.FunctionResult = exports.BamlRuntime = void 0;\n__exportStar(require(\"./safe_imports\"), exports);\n__exportStar(require(\"./errors\"), exports);\n__exportStar(require(\"./logging\"), exports);\n// Detect if we're in a Node.js environment\nconst isNode = typeof process !== 'undefined' && process.versions != null && process.versions.node != null;\nif (!isNode) {\n    const browserError = (name) => {\n        throw new Error(`Cannot import ${name} from '@boundaryml/baml' in browser environment. Please import from '@boundaryml/baml/browser' instead.`);\n    };\n    // Provide helpful error messages for browser imports\n    Object.defineProperty(exports, 'Image', {\n        get: () => browserError('Image'),\n        enumerable: true,\n    });\n    Object.defineProperty(exports, 'Audio', {\n        get: () => browserError('Audio'),\n        enumerable: true,\n    });\n    Object.defineProperty(exports, 'Pdf', {\n        get: () => browserError('Pdf'),\n        enumerable: true,\n    });\n    Object.defineProperty(exports, 'Video', {\n        get: () => browserError('Video'),\n        enumerable: true,\n    });","sourceCodeStart":7,"sourceCodeEnd":43,"githubUrl":"https://github.com/BoundaryML/baml/blob/bd85ce9dee1463ff04d27efd20531013a4ff46c1/engine/language_client_typescript/index.js#L7-L43","documentation":"The @boundaryml/baml main entry point detects a browser (non-Node) environment and replaces exports like Image with getters that throw. The full runtime requires Node native bindings, so browser code must import the browser-safe subset from '@boundaryml/baml/browser'.","triggerScenarios":"Importing anything (e.g. Image, BamlImage) from '@boundaryml/baml' in a bundler targetting browser (webpack/vite/esbuild with browser field) or running in Deno/worker where `process.versions.node` is undefined.","commonSituations":"Using BAML client code in a React/Next.js client component, a browser extension, or an SSR bundler resolving the browser condition; importing Image/Pdf helpers in frontend code instead of only calling a backend API.","solutions":["Change the import to `import { Image } from '@boundaryml/baml/browser'`.","Move BAML calls (b.FunctionName(...)) to a server-side module / API route and call your backend from the browser.","Configure your bundler alias so '@boundaryml/baml' resolves to its browser build only for allowed symbols."],"exampleFix":"// before\nimport { Image } from '@boundaryml/baml';\n// after\nimport { Image } from '@boundaryml/baml/browser';","handlingStrategy":"fallback","validationCode":"const isBrowser = typeof process === 'undefined' || process.versions?.node == null;\nconst mod = isBrowser ? await import('@boundaryml/baml/browser') : await import('@boundaryml/baml');","typeGuard":"function isNodeRuntime(): boolean {\n  return typeof process !== 'undefined' && process.versions != null && process.versions.node != null;\n}","tryCatchPattern":"let Baml;\ntry {\n  Baml = await import('@boundaryml/baml');\n} catch (e) {\n  if (String(e.message).includes(\"in browser environment\")) {\n    Baml = await import('@boundaryml/baml/browser');\n  } else throw e;\n}","preventionTips":["Only import BAML in server-side code (API routes, server actions, background jobs).","Keep any frontend that needs BAML results calling your own backend endpoint, not the library.","Check your bundler's browser-field resolution for '@boundaryml/baml'."],"tags":["typescript","browser","import","environment"],"backgroundTag":"unsupported-platform","analyzedSha":"bd85ce9dee1463ff04d27efd20531013a4ff46c1","analyzedAt":"2026-09-12T03:38:25.718Z","contentChangedAt":"2026-09-12T03:38:25.718Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}