Trying BAML with Nuxt setup

[bolerio]

I started with Nuxt sample project (baml-examples/nuxt-starter), but wanted to modify it so that the client sends some text which is then analyzed via a call to BAML. The setup where the client calls a function and gets back a result works when the function just returns some mock, hard-coded data. But as soon as I do:

import { b } from "../../baml_client"

// function declaration, boilerplate etc.

const resume =  await b.ExtractResume(text)

The page doesn't load and I get the following error in the browser:

Cannot find module '/Users/borislav/code/bamlplay/node_modules/@boundaryml/baml/safe_imports' imported from /Users/borislav/code/bamlplay/.nuxt/dev/index.mjs Did you mean to import "/Users/borislav/code/bamlplay/node_modules/@boundaryml/baml/safe_imports.js"?

I added `module_format "esm" in my BAML generator config. Here is the complete file:

// This helps use auto generate libraries you can use in the language of
// your choice. You can have multiple generators if you use multiple languages.
// Just ensure that the output_dir is different for each generator.
generator target {
    // Valid values: "python/pydantic", "typescript", "ruby/sorbet"
    output_type "typescript"
    // Where the generated code will be saved (relative to baml_src/)
    output_dir "../"
    // The version of the BAML package you have installed (e.g. same version as your baml-py or @boundaryml/baml).
    // The BAML VSCode extension version should also match this version.
    version "0.205.0"
    // Valid values: "sync", "async"
    // This controls what `b.FunctionName()` will be (sync or async).
    // Regardless of this setting, you can always explicitly call either of the following:
    // - b.sync.FunctionName()
    // - b.async_.FunctionName() (note the underscore to avoid a keyword conflict)
    default_client_mode async

    module_format "esm" 
}

I also tried some ideas from ChatGTP like declaring aliases in nuxt.config.js like this:

export default defineNuxtConfig({
  vite: {
    resolve: {
      alias: {
        '@boundaryml/baml/safe_imports': fileURLToPath(
          new URL('./node_modules/@boundaryml/baml/safe_imports.js', import.meta.url)
        )
      }
    }
  }
})

But that didn't work either.

Can anyone help? It seems related to BAML and I saw some other issues reported here around "safe_imports"

[bolerio]

The temporary hack I am using to workaround at the moment is to create symbolic links (ln -s) from all *.js file under @boundaryml/baml to same names but without the extensions (e.g. ln -s safe_imports.js safe_imports). That makes it work. I tried many different ways to tell Nuxt to import with the .js extension, but all failed. In general, there seems to be some incompatibility between the code baml-cli generates and the module system.

The main difference between the "working" Nuxt example and what I am doing is that in my case there is server-side request handling code (and API endpoint, compiled by Nuxt + Vite) trying to call BAML, rather than code used to generated the static HTML portion of the page, which is what the example does.

[sxlijin]

Hi - sorry for the slow response. I'm glad that baml-examples helped! I would suggest reading the tsconfig.json files in that example as well as the nuxt config - the baml library only works on the server side, not the frontend, and I suspect what you're doing is trying to put code on the frontend or messing with the vite packaging somehow.

I'd also recommend asking on https://boundaryml.com/discord and searching there: we're a lot more active there.