Preview not working with multi language

[mackenzies1818]

I'm unable to access the preview functionality for any of the languages. I have set up the project similarly to the languages example. My gatsby config:

{
  resolve: 'gatsby-source-prismic-graphql',
  options: {
    repositoryName: 'scenarex', 
    accessToken : `${process.env.API_KEY}`,
    defaultLang: 'en-ca', 
    langs: ['en-ca', 'fr-ca'],
    path: '/preview', 
    previews: true, 
    pages: [{ 
      type: 'Member',
      match: '/:lang/:uid', 
      path: '/member', 
      component: require.resolve('./src/templates/member.js'),
    },
    { 
      type: 'Home', 
      match: '/:lang', 
      path: '/home', 
      component: require.resolve('./src/templates/home.js'),
    },
  ],
  }
}

This is my home template:

import React from "react"
import { graphql, Link } from "gatsby";
import Layout from "../components/layout"
import { RichText } from 'prismic-reactjs'
import { linkResolver } from "../prismic/linkResolver";

const IndexPage = ({ data }) => {
  console.log(data);
  const doc = data.prismic.allHomes.edges.slice(0,1).pop();
  if(!doc) return null;
  let page = doc.node;
  let tools;
  let partners;
  for (let i=0; i<page.body.length; i++) {
    if (page.body[i].__typename === "PRISMIC_HomeBodyPartners") {
      partners = page.body[i]
    }
    else {
      tools = page.body[i]
    }
  }
  return (
  <Layout title={page.title[0].text} path="/">
    <main>
      <section className="masthead">
        {RichText.render(page.text)}
      </section>
      <section className="masthead upper-border">
        <div className="big">{RichText.render(page.partnerstitle)}</div>
        {partners.fields.length > 0 &&
        <div className="row flex-item ml-4 mb-4">
          {(partners.fields).map((partner,i) =>
            <div className="flex-item pl-2 p-0" key={i}>
              <a href={partner ? partner.link.url : ""}>
                <img className="grey" src={partner.img.url} style={{maxHeight: "60px"}} alt=""/>
              </a>
            </div>
          )}
        </div>
        }
      </section>
      <section className="masthead upper-border">
        <div className="big">{RichText.render(page.toolstitle)}</div>
        {tools.fields.length > 0 &&
        <div className="row flex-item">
          {(tools.fields).map((tool,i) =>
            <div className="md:w-3/12 w-full ml-0 pl-6 block md:flex-item" key={i}>
              <span className="fa-layers fa-fw fa-8x">
                <i className="fa fa-circle icon-background"></i>
                <i className={tool.icon[0].text} data-fa-transform="shrink-6"></i>
              </span>
              <h2><a href={tool.link.url}>{RichText.render(tool.name)}</a></h2>
              {RichText.render(tool.text1)}
            </div>
            )}
        </div>
        }
      </section>
    </main>
  </Layout>
  )
}

export const homeQuery = graphql`
query homeQuery($id: String) {
prismic {
  allHomes(id: $id) {
    edges {
      node {
        title
        _meta {
          uid
          id
          lang
          }
        text
        partnerstitle
        toolstitle
        body {
          __typename
          ... on PRISMIC_HomeBodyTools {
            fields {
              name
              icon
              text1
              link {
              ... on PRISMIC__ExternalLink{
                    url
                  }
              }
            }
          }
          ... on PRISMIC_HomeBodyPartners{
            fields {
              link {
                ... on PRISMIC__ExternalLink{
                      url
                    }
              }
              img
            }
          }
        }
        }
      }
    }
  }
}
`
IndexPage.query = homeQuery;
export default IndexPage

and my member template:

import React from "react";
import { graphql } from "gatsby";
import Layout from "../components/layout";
import { RichText } from 'prismic-reactjs';

export const MemberTemplate = props => {
  return (
    <div className="row">
     <div className="row">
       <div className="md:w-6/12 w-full px-12">
         <img src={props.page.img.url} alt=""/>
         <a href={`mailto:${props.page.email[0].text}`}><i className="fas fa-envelope"></i> {props.page.email[0].text}</a>
       </div>
       <div className="md:w-6/12 w-full px-12 mt-0">
         <div className="big">{RichText.render(props.page.name)}</div>
         {RichText.render(props.page.description)}
       </div>
     </div>
   </div>
  )
}

const MemberPage = ({ data }) => {
  console.log(data)
  const doc = data.prismic.allMembers.edges.slice(0,1).pop();
  if(!doc) return null;
  return (
    <Layout title={doc.node.name.text} path="/" >
      <MemberTemplate page={doc.node} />
    </Layout>
  );

};

export const peopleQuery = graphql`
query peopleQuery($id: String) {
prismic {
  allMembers(id: $id) {
    edges {
      node {
        name
        description
        img
        email
        _meta {
          uid
          id
          lang
          }
        }
      }
    }
  }
}
MemberPage.query = peopleQuery;
export default MemberPage

I am using Gatsbyv2.12.2 and gatsby-source-prismic-graphqlv3.4.0-beta.0. When trying to access the preview from the prismic dashboard I receive this error in the gatsby-browser:

[adam404]

Not specific to languages. Related to #56. Fixed in code, however, the maintainer @birkir has not bumped a version since the fixes were implemented or published the fixes to NPM. Not sure if publishing to NPM also requires bumping the version number, not an NPM expert.

[birkir]

3.4.0-beta.1 now has updated deps