{"id":"a478923221c86895","repo":"babel/babel","slug":"cannot-load-preset-name-relative-to-dirname","errorCode":null,"errorMessage":"Cannot load preset ${name} relative to ${dirname} in a browser","messagePattern":"Cannot load preset (.+?) relative to (.+?) in a browser","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/babel-core/src/config/files/index-browser.ts","lineNumber":112,"sourceCode":"  name: string,\n  dirname: string,\n): Handler<{\n  filepath: string;\n  value: unknown;\n}> {\n  throw new Error(\n    `Cannot load plugin ${name} relative to ${dirname} in a browser`,\n  );\n}\n\nexport function loadPreset(\n  name: string,\n  dirname: string,\n): Handler<{\n  filepath: string;\n  value: unknown;\n}> {\n  throw new Error(\n    `Cannot load preset ${name} relative to ${dirname} in a browser`,\n  );\n}\n","sourceCodeStart":94,"sourceCodeEnd":116,"githubUrl":"https://github.com/babel/babel/blob/06b6eae39da4ce0689fad64e2c48a6375a464208/packages/babel-core/src/config/files/index-browser.ts#L94-L116","documentation":"Symmetric to loadPlugin, the browser build's loadPreset stub throws 'Cannot load preset ${name} relative to ${dirname} in a browser'. resolvePreset returns null in the browser, so any preset referenced by string name triggers this error when the loader attempts to load the module from disk, which is impossible in a browser environment.","triggerScenarios":"A browser-bundled Babel transform whose options include `presets: ['@babel/preset-env']` or any string preset name, rather than passing an already-imported preset function.","commonSituations":"Using @babel/core (not standalone) in browser code with string preset names; config object shared across Node and browser where Node resolves presets by name from node_modules.","solutions":["Import the preset as a function in the browser and reference it directly: presets: [require('@babel/preset-env')].","Use @babel/standalone, which exposes preset-env and others by string name out of the box.","Resolve presets at build time (Node) and inject the preset functions into the browser bundle."],"exampleFix":"// before - throws error 33 in browser\nbabel.transform(code, { presets: ['@babel/preset-env'] });\n\n// after - use standalone\nimport * as babel from '@babel/standalone';\nbabel.transform(code, { presets: ['env'] });","handlingStrategy":"validation","validationCode":"const isBrowser = typeof window !== 'undefined';\nif (isBrowser) {\n  opts.presets = (opts.presets || []).map(p =>\n    typeof p === 'string' ? require(p) : p\n  );\n}","typeGuard":"function isPresetFunction(value: unknown): boolean {\n  return typeof value === 'function' || (Array.isArray(value) && typeof value[0] === 'function');\n}","tryCatchPattern":"try { babel.transform(code, opts); }\ncatch (err) {\n  if (/Cannot load preset .* in a browser/.test(err.message)) {\n    console.error('Import the preset function instead of using a string name');\n  }\n  throw err;\n}","preventionTips":["Import preset functions directly in browser bundles.","Use @babel/standalone for name-based preset resolution.","Resolve string preset names at Node build time."],"tags":["browser","preset","environment","filesystem"],"analyzedSha":"06b6eae39da4ce0689fad64e2c48a6375a464208","analyzedAt":"2026-08-03T20:13:43.465Z","schemaVersion":2}