@nuxtjs/prismic generate not working

Hi!

Not sure if this is the right place to ask this question but maybe there are some of you who have had the same problem.

When i run npm run generate does it not generate all the pages. I doesn’t give me any errors, i just ignores some of my projects.

Here is my rooutes structure inside page:

pages (folder)
index.vue
…_navigation (folder)
…index.vue)
… …_category (folder)
… …index.vue
… … …_project (folder)
… … …index.vue

I guess it has something to do with the link-resolver.js?

I hope someone can help me.

Cheers

Warning: dynamic routes are ignored by the generate command: API Configuration generate
and

Hi Kristian,

I think you might be right in that it’s related to the link resolver. Would you mind sharing you link resolver with us so we can help?

Also can you show me how you included the linkresolver in the module configurations in your nuxt.config.js file?

Hi Marko,

It was correct in the past that Nuxt wouldn’t generate dynamic routes, but now thanks to the work done on the prismic-nuxt module these are generated for you in your project.

Hey Phil,

Thanks for your reply. Of cause please find my link-resolver here:

   export default function (doc) {


  if (doc.type === 'homepage') {
    return '/'
  }

  if (doc.type === 'navigation') {
    return `/${doc.uid}`
  }

  if (doc.type === '_category') {
    return `/_navigation/${doc.uid}`
  }

  if (doc.type === '_project') {
    return `/_navigation/_category/${doc.uid}`
  }

  if (doc.type === 'ui') {
    return `/ui/components`
  }

 
  return '/'
}

And I include it like this in my nuxt.config.js

linkResolver: '~/app/prismic/link-resolver.js'

But I’ve actually fixed the issue or discovered why “npm run generate” didn’t generate all the routes. The reason was that some of pages have a slider where I need the window element, so I had to use the tag. With a inside. Not sure but my guess is that the generate doesn’t see/ignores those routes and don’t generates the static files!?

Ah yes ok. That sounds like it would be the issue as you know now that the window isn’t available in SSR and Static.

Same here, mine ignores all pages that uses the doc.uid.

nuxt.config.js

modules: [
	'@nuxtjs/axios',
	'@nuxtjs/style-resources',
	'@/modules/static',
	'@/modules/crawler',
	'@nuxtjs/prismic',
],
prismic: {
	endpoint: process.env.endpoint,
	preview: '/preview',
	linkResolver: '@/plugins/link-resolver',
	htmlSerializer: '@/plugins/html-serializer',
},

link-resolver.js

export default function (doc) {
if (doc.isBroken) return '/404';

// custom pages
if (doc.type === 'home') return '/';
if (doc.type === 'contact') return '/contact';
if (doc.type === 'about_us') return '/over-ons';
if (doc.type === 'services') return '/services';
if (doc.type === 'default') return `/${doc.uid}`;

// overview pages
if (doc.type === 'case') return '/cases';
if (doc.type === 'opinion') return '/opinies';
if (doc.type === 'actual') return '/actueel';

// detail pages
if (doc.type === 'case_post') return `/cases/${doc.uid}`;
if (doc.type === 'opinion_post') return `/opinies/${doc.uid}`;
if (doc.type === 'news_post') return `/actueel/${doc.uid}`;
if (doc.type === 'event_post') return `/actueel/${doc.uid}`;

return '/404';
}

If I add one of the cases to the generate function it will generate all of the other childeren, @Phil why does this work?

 generate: {
	fallback: '404.html',
	routes: ['/cases/case-1'],
},

btw I don’t know how they are going to be called in the future so is there a good way to make this dynamic?

Hi @max, (and welcome to the community)

Sorry about the long delay in the reply.

The @nuxtjs/prismic should generate these routes for you, so there’s no need to add routes: ['/cases/case-1'], to your nuxt config file, in fact it would break the automatic generation done in the plugin.

All this would suggest to me that the issue is coming your ‘UID’ pages that are doing the queries to Prismic, maybe they have a component that is calling the window element like the user above.

Can you share with me the code of one of these pages?

Thanks.

<template>
<main class="case-post">
	<Hero v-if="hero.title.length > 0 && hero.title[0].text" :data="hero" />
	<Intro v-if="intro.image && intro.image.url" :data="intro" />
	<Emphatize v-if="emphatize.title.length > 0 && emphatize.title[0].text" :data="emphatize" />
	<LiveQuote v-if="livequote.title.length > 0 && livequote.title[0].text" :data="livequote" />
	<Harmonize v-if="harmonize.title.length > 0 && harmonize.title[0].text" :data="harmonize" />
	<Nurture v-if="nurture.title.length > 0 && nurture.title[0].text" :data="nurture" />
	<UpNext v-if="upnext.type" :data="upnext" />
</main>
</template>
<script>
  import { Component, Vue } from 'nuxt-property-decorator';
  import { Hero, Intro, Emphatize, Harmonize, LiveQuote, Nurture, UpNext } from '@/components/modules';

@Component({
components: {
	Hero,
	Intro,
	Emphatize,
	Harmonize,
	LiveQuote,
	Nurture,
	UpNext,
},
})
export default class CasePost extends Vue {
async asyncData({ $prismic, params, error }) {
	try {
		const doc = await $prismic.api.getByUID('case_post', params.uid, {
			fetchLinks: ['case_post.title', 'case_post.subtitle'],
		});

		const data = {
			hero: {
				//title required
				type: doc.type,
				title: doc.data.title,
				subtitle: doc.data.subtitle,
				image: doc.data.page_image,
				description: doc.data.description,
			},
			intro: {
				//title image
				image: doc.data.intro_image,
			},
			emphatize: {
				//title required
				title: doc.data.emphatize_title,
				list: doc.data.emphatize_list,
			},
			livequote: {
				//title required
				title: doc.data.livequote_title,
				video: doc.data.livequote_video,
			},
			harmonize: {
				//title required
				title: doc.data.harmonize_title,
				list: doc.data.harmonize_list,
			},
			nurture: {
				//title required
				title: doc.data.nurture_title,
				image: doc.data.nurture_image,
				headline: doc.data.nurture_headline,
				text: doc.data.nurture_text,
				list: doc.data.nurture_list,
			},
			upnext: {
				//type required
				...doc.data.upnext,
			},
		};
		return data;
	} catch (e) {
		console.error(e);
		error({ statusCode: 404, message: 'Page not found' });
	}
  }
}
</script>

this is one of the pages, I gave you access on GitHub to view a copy of project.

I had a long look at this, I’m not sure where exactly the issue is coming from, I have a few ideas, but I can’t be sure.

Though I couldn’t get the project to generate or run for me at all I kept getting the error:
TypeError: Cannot read property 'replace' of undefined

I’m going to have to pass this to @team-tech-support to get some help with this.

Thanks.

If you want to use the new generate, I believe you have to drop the link-resolver in profit of an apiOptions.routes parameter in your Nuxt config file. The routes are then passed the to API and for each document, a url is created.

You can see how it’s used here although it has not been properly documented yet:

it should be easy enough to infer what’s right for you. If not, I’d be happy to investigate what’s expected there exactly :+1:

the .env file is not set yet, there is an .env.example ther with the url

I rewrote it to the new version it still doesn’t render all other pages, I also checked the index.html and i see that components won’t be render as plain HTML is this by design?

Alright, I got things sorted out!

The new routes resolver has not been propagated on all clusters yet, which is the reason why adopting the new syntax didn’t do the trick for you. So, what I did is that I cloned your test repo on another cluster, went to your Nuxt config, replaced the endpoint and wrote the routes parameter:

prismic: {
    // https://tfe-new-resolver-test.prismic.io/api/v2
	endpoint: process.env.endpoint,
	apiOptions: {
	  routes: [
	    { type: 'case_post', path: '/cases/:uid' }
	  ]
    },
},

and I checked that dist/cases folder was correctly populated. If you can, feel free to move to this repo during your test phase, and by then we should have propagated the resolver everywhere. Also, make sure you update @nuxtjs/prismic to its latest version and replace prismic-vue with @prismicio/vue!

If you can’t change your endpoint:
you will have to provide a function that fetches all Prismic documents and calls your linkResolver, and pass the result of this function to generate.routes in your Nuxt config file. This would probably look like what I did it here in Next: https://github.com/prismicio/nextjs-blog/blob/master/utils/queries.js. I can definitely do it for you Nuxt folks if more people are interested.

Voilà, hope it helps :wink:

1 Like

Thanks for looking in to it and also @Phil props to you! switching endpoints works and is no problem in my case.

2 Likes