Building IO page not including in vite manifest

Bugs
1

Using a normal laravel installation with inertiajs, vue, and vite.

Running in development mode, no errors occur.

After running npm run build, the page with builder.io on it will show “Unable to locate file in Vite manifest:”. The manifest under app.js dynamic imports shows “_builderio-BBsY8Wyc.js”, when it should show “resources/js/Pages/LandingPages/builderio.vue”.

The page is as simple as can be. If I take out the builder.io imports for content and fetchOneEntry, the page builds fine. But obviously doesn’t work as intended. I’ve tried with and without typescript.

Any help would be greatly appreciated.

Thanks!

<script setup lang="ts">
import {
    Content,
    fetchOneEntry,
    isPreviewing,
    type BuilderContent,
    getBuilderSearchParams,
} from '@builder.io/sdk-vue';
import { onMounted, ref } from 'vue';

const BUILDER_PUBLIC_API_KEY = 'sdfgsdfgsdfgsdfg';
const content = ref<BuilderContent | null>(null);
const canShowContent = ref(false);
const model = 'page';

onMounted(async () => {
    content.value = await fetchOneEntry({
        model,
        apiKey: BUILDER_PUBLIC_API_KEY,
        options: getBuilderSearchParams(new URL(location.href).searchParams),
        userAttributes: {
            urlPath: window.location.pathname,
        },
    });
    canShowContent.value = content.value ? true : isPreviewing();
});
</script>

<template>
</template>
<style scoped>
</style>
2

Here’s a repository that replicates the issue.

It’s a default laravel installation with the home page setup as a very simple builder.io page.

3

Hello @s937717,

The error “Unable to locate file in Vite manifest:” suggests that there’s an issue with Vite resolving dynamic imports. When you run npm run build, Vite generates a manifest to map your source files to the bundled output, but it’s currently failing to find the correct mappings for scripts used by Builder.io.

Suggested Solutions

Here are a few potential solutions to address this issue:

  1. Ensure Vite Configuration is Correct:
    Make sure your Vite configuration (vite.config.js) is correctly set up to handle dynamic imports and Vue components.

  2. Check Vite Manifest:
    Sometimes, the manifest might not correctly map your files, especially when using dynamic imports. You may need to manually inspect the generated manifest to verify the mappings.

  3. Use Vite Plugin for Vue:
    Ensure you have the correct Vite plugin for Vue installed and configured.

  4. Refactor Dynamic Imports:
    Try simplifying or refactoring the way you’re importing Builder.io components to see if that resolves the issue.

Implementation Example

Here’s an example of refining the setup within the scripts:

<script setup lang="ts">
import { Content, fetchOneEntry, isPreviewing, type BuilderContent, getBuilderSearchParams } from '@builder.io/sdk-vue';
import { onMounted, ref } from 'vue';

const BUILDER_PUBLIC_API_KEY = 'your-api-key-here';
const content = ref<BuilderContent | null>(null);
const canShowContent = ref(false);
const model = 'page';

onMounted(async () => {
  try {
    content.value = await fetchOneEntry({
      model,
      apiKey: BUILDER_PUBLIC_API_KEY,
      options: getBuilderSearchParams(new URL(location.href).searchParams),
      userAttributes: {
        urlPath: window.location.pathname,
      },
    });
    canShowContent.value = !!content.value || isPreviewing();
  } catch (error) {
    console.error('Error fetching entry:', error);
  }
});
</script>

<template>
  <div v-if="canShowContent">
    <Content v-if="content" :content="content" :model="model" />
  </div>
</template>
<style scoped>
</style>

Additional Steps

  1. Install and Configure Vite Plugin for Vue:

    If not already installed, add the Vite plugin for Vue:

    npm install @vitejs/plugin-vue

    Then, configure it in vite.config.js:

    import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    manifest: true,
  },
  // Any additional configuration needed
});

  2. Inspect Vite Manifest:

    After running npm run build, inspect the Vite-generated manifest.json file located in the dist directory to ensure mappings are correct.

  3. Adjust Imports:

Modify the way Builder.io components are imported. Make sure you use the correct syntax for dynamic imports supported by Vite.

Thanks,

4

I tried your script with the same result as before.

I believe the project is setup properly to handle vue components. All other components work fine. It also works fine running as npm run dev. Only npm run build causes an issue which relies on the manifest.json.

The manifest.json is definitely not generated correctly when builder.io is imported. I have no idea why though. I’ve never seen this happen with any other libraries.

Is there some specific condition that builder.io needs?

5

Hello @s937717,

Given the issue you’re experiencing with Vite and Builder.io while building your project, you can do some specific checks that might help resolve the manifest issue:

  1. Run the build and inspect the manifest.json:

    npm run build

  2. Check dist/manifest.json to ensure the files are correctly mapped.

Check Console for Errors

  1. Ensure that your console does not show any issues regarding missing files or mapping issues.

  2. If it does, manually verify the missing mappings in the manifest.json.

If the issue persists, please consider sharing a minimal reproduction repository to facilitate troubleshooting.

6

I don’t get any errors in console. I tried setting verbose and still didn’t get anything.

The manifest file is certainly not mapped correctly though. The file with builder.io becomes _Welcome-BTLVuuJ.js when it should be Welcome.vue similar to the terms of service page above it.

"dynamicImports": [
      "resources/js/Pages/TermsOfService.vue",
      "_Welcome-BTL2vuuJ.js"
]```
7

Hello @s937717,

I just wanted to let you know that we are trying to reproduce the reported issue on our end using your repository and figuring out a possible workaround. I will be sure to keep you updated as soon as we make any progress.

Thanks,

8

Hello @s937717,

Unfortunately, I’m still unable to reproduce the issue. Can you please confirm if you have found any potential workarounds and if this is still an issue?

9

Hello @s937717,

Please feel free to let us know if you are still experiencing issues including Builder.io pages in the Vite manifest.

10

I still experience the same issue. Did you run npm run build and visit the home page of the test project?