TypeError: The specifier “@builder.io/sdk-vue” was a bare specifier, but was not remapped to anything.

behzadsp commented 8 months ago

Describe the bug I'm encountering an issue in my Vue 3 + InertiaJS + Laravel project when using the latest version of Builder.io (0.11.4). The error message in the browser console is as follows and the page doesnt render: TypeError: The specifier “@builder.io/sdk-vue” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”.

To Reproduce Steps to reproduce the behavior:

Include Builder.io in a Vue 3 + InertiaJS + Laravel project with the latest version (0.11.4).
Run the SSR server.
Visit the page created via Builder.io
Open the browser console and observe the error.

Expected behavior I expected to use the Builder.io library without encountering any bare specifier errors. The integration should work seamlessly with Vue 3 + InertiaJS + Laravel.

Screenshots

Additional context Vue version: 3.4.3 InertiaJS version: 1.0.14 Vite version: 4.5.1 Builder.io version: 0.11.4

samijaber commented 8 months ago

Can you share the integration code for Builder.io in your repo? Can you share a minimum reproduction in github?

behzadsp commented 8 months ago

sure, this is my builder file

import { RenderContent, getContent, isPreviewing } from "@builder.io/sdk-vue"
import Hero from "@/views/components/Hero.vue"
import NavBar from "@/views/components/NavBar.vue"
import MainFooter from "@/views/components/MainFooter.vue"
import VpsHeader from "@/views/components/VpsHeader.vue"
import { onMounted } from "vue"

const props = defineProps<{
  slug: string
}>()

const BUILDER_PUBLIC_API_KEY = "my-api-key"

let canShowContent = ref(false)
let content = ref(null)
let title = ref(null)
let apiKey = ref(BUILDER_PUBLIC_API_KEY)

onMounted(() => {
  getContent({
    model: "test",
    apiKey: BUILDER_PUBLIC_API_KEY,
    userAttributes: {
      urlPath: "/" + props.slug + "/",
    },
    options: { enrich: true },
  }).then((res) => {
    content.value = res
    canShowContent.value = content.value || isPreviewing()
    title.value = (content.value && content.value.data && content.value.data.title) || "Unpublished"
  })
})

const REGISTERED_COMPONENTS = [
  {
    component: VpsHeader,
    name: "Vps Header",
    canHaveChildren: true,
    inputs: [
      {
        name: "description",
        type: "richText",
        hideFromUI: false,
        helperText: "This is an editable region.",
        defaultValue: "<b>This text is bold</b>",
      },
      {
        name: "image",
        type: "file",
        allowedFileTypes: ["jpeg", "jpg", "png", "svg", "webp"],
        required: false,
        defaultValue: "https://1gbits.com/build/assets/vps-hero-2f222f0f.svg",
      },
    ],
  },
  {
    component: Hero,
    name: "Hero",
    canHaveChildren: false,
  },
  {
    component: NavBar,
    name: "NavBar",
    canHaveChildren: false,
  },
  {
    component: MainFooter,
    name: "MainFooter",
    canHaveChildren: false,
  },
]

const getRegisteredComponents = () => {
  return REGISTERED_COMPONENTS
}
</script>

<template>
  <Head>
    <title>{{ title }}</title>
  </Head>
  <RenderContent
    v-if="canShowContent"
    model="page"
    :content="content"
    :api-key="apiKey"
    :enrich="true"
    :include-refs="true"
    :customComponents="getRegisteredComponents()" />
  <div v-else>Content not Found</div>
</template>

I'll try to make a minimum reproduction on github and let you know when its done!

behzadsp commented 8 months ago

@samijaber I've added you to the project test repo new1gbitstest

samijaber commented 8 months ago

I've never setup a laravel project, but I see you're externalizing the SDK which makes no sense:

        build: {
            rollupOptions: {
                external: ['@builder.io/sdk-vue'],
            },
        },

You need to remove that config

behzadsp commented 8 months ago

Thanks for the quick fix! Removing that config did the trick for the bare specifier issue.

I realized I left that config in there from some previous testing. but now, the content isn't rendering as SSR. Any ideas on how to get SSR on track?

samijaber commented 8 months ago

I am not familiar with the inertiaJS stack, so I cannot tell you how/why SSR is not working in that techstack. However, Builder's SDK works in SSR by default without any additional configuration. So this would typically be an issue with how the server is configured.

If you still need help, please provide a more detailed explanation of what you're seeing.

behzadsp commented 8 months ago

Got it, thanks for the heads up! In my setup, everything is rendering as SSR except the Builder.io RenderContent component. Seems like it's specific to that part.

when I disable the Javascript on browser

<div v-else>Content not Found</div>

is rendering instead of the contents.

samijaber commented 8 months ago

You are most likely not providing the correct URL path as an argument to the data-fetching function (getContent/fetchOneEntry). In SSR, you need to use whatever solution your router library offers to pass the path.

Refer to the Nuxt example:

https://github.com/BuilderIO/builder/blob/f9d2be3fedfc9aedc07efef36c35066559c03446/examples/vue/nuxt-3-catchall/pages/[...app].vue#L48-L56

see:

userAttributes: {
      urlPath: route.path,
    },

Closing this issue as the original error is resolved/

BuilderIO / builder

TypeError: The specifier “@builder.io/sdk-vue” was a bare specifier, but was not remapped to anything. #2940