Multiple Locales Error page

Developing with Prismic
1

HI there,

I'm developing a website in English and Spanish, and I'm having trouble displaying a custom error page.

English is the default language and resolves without locale codes in the URL. eg /page/

I can correctly get the error page to display at both /en-us/fdfd and /es-ar/fdfd, but if I just visit /fdfd then it doe snot display and I get an error: 'Cannot read properties of undefined (reading 'data')'

I'm using a link-resolver as follows:

export default function (doc) {
  if (doc.type === "home") {
    return `/${doc.lang}`;
  }

  if (doc.type === "page") {
    return `/${doc.lang}/${doc.uid}`;
  }

  if (doc.type === "preview") {
    return "/preview" + doc.uid;
  }
  if (doc.isBroken) {
    return "/error";
  }

  return "/";
}

And in my nuxt.config

  generate: {
    fallback: "404.html",
  },

The actual error page is as follows, error,vue

<template>
  <div class="page page-error">
    <prismic-rich-text :field="errorMessage" v-if="errorMessage" />
    <div class="error-images">
      <ImageBasic
        v-if="errorImage"
        :imageObject="errorImage"
        :aspectRatio="
          errorImage?.dimensions?.width / errorImage?.dimensions.height
        "
        class="error-image-big"
      />
      <ImageBasic
        v-if="errorImageSmall"
        :imageObject="errorImageSmall"
        :aspectRatio="
          errorImageSmall?.dimensions?.width /
          errorImageSmall?.dimensions.height
        "
        class="error-image-small"
      />
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      errorMessage: null,
      errorImage: null,
      errorImageSmall: null,
    };
  },
  async mounted() {
    try {
      const language = this.$route.params.lang;
      const global = await this.$prismic.api.getSingle("global", {
        lang: language,
      });
      this.errorMessage = global.data.error_message;
      this.errorImage = global.data.error_image;
      this.errorImageSmall = global.data.error_image_small;
    } catch (err) {
      console.error("Failed to fetch data: ", err);
    }
  },
};
</script>

How do I get the error page working for the default locale without the locale code in the URL?

2

Hi @grafik ,

I'll try my best to help :slight_smile:

Can you add some logs in your components to better understand when the issue happens?

Thanks.