Error in function AsLink - LinksResolver is not a function

[thejuniperstudio (Juniper Studio)]

I know there have been issues with previews recently - but I decided to check previews again locally today to see if the issues have been resolved.

Onload I get this error message...

My Gatsby config...

{
      resolve: 'gatsby-source-prismic',
      options: {
        repositoryName: process.env.GATSBY_PRISMIC_MAIN_REPOSITORY_NAME,
        lang: process.env.GATSBY_PRISMIC_LANG,
        linkResolver: require('./src/utils/linkResolver').linkResolver,
        schemas: {
          blogpost: require('./src/schemas/blogpost.json'),
          navigation: require('./src/schemas/navigation.json'),
          page: require('./src/schemas/page.json'),
          social: require('./src/schemas/social.json'),
        },
      },
    },

My LinkResolver...

exports.linkResolver = (doc) => {
  var lang = ''
  if (doc.lang !== 'en-gb') {
    lang = doc.lang.slice(0, 2) + '/'
  }

  if (doc.uid !== 'index' && doc.type === 'page') return `/${lang}${doc.uid}/`
  if (doc.uid === 'index' && doc.type === 'page') return `/${lang}`
  if (doc.type === 'blogpost') return `/${lang}blog/${doc.uid}/`
  return '/'
}

What am I doing wrong? or is this a bug?

[Pau]

Hello @thejuniperstudio, thanks for reaching out!

This looks like a different problem. Maybe it's related to your preview configuration. You need to check if the withPrismicPreviewResolver or withPrismicPreview functions are correctly set up. Similar errors occur when the Link Resolver isn't being passed.

Could you send us your preview.js file and the page template that is printing that error?

[thejuniperstudio (Juniper Studio)]

Preview.js

import * as React from 'react'
import { withPrismicPreviewResolver } from 'gatsby-plugin-prismic-previews'
import { repositoryConfigs } from '../utils/prismicPreviews'

const PreviewPage = () => {
  return (
    <div>
      <h1>Loading preview…</h1>
    </div>
  )
}

export default withPrismicPreviewResolver(PreviewPage, repositoryConfigs)

prismicPreviews.js (repositoryConfigs)

import { linkResolver } from './linkResolver'

export const repositoryConfigs = [
  {
    repositoryName: process.env.GATSBY_PRISMIC_MAIN_REPOSITORY_NAME,
    linkResolver
  }
]

[thejuniperstudio (Juniper Studio)]

Interestingly, when I run this on Netlify I don't see the error appear on-screen. but I do have an error in the console...

[angeloashmore]

Hey @thejuniperstudio,

Your preview.js and prismicPreviews.js files look okay to me. They should not cause any errors.

At what point do you see the error appear? Based on your code and screenshot, I would guess it is happening on your page template.

Can you post the code for your page template where you see this error? This should be the file where you use `withPrismicPreview.

The error in your screenshot should only happen if you pass linkResolver something that isn't a function. This could happen by not importing the function correctly or passing it to withPrismicPreview incorrectly.

---

Regarding seeing the error on-screen vs. in the console: You'll only see the on-screen error during development (it will also be printed to the console in development). This is Gatsby's error modal that makes it more obvious when an error occurs. This is not included during production (i.e. on Netlify), so you'll only see the error in the console.

The error appears to be the same during development and production. The message is slightly different just due to code minification (linkResolver => e).