nuxt-modules / prismic

Easily connect your Nuxt.js application to your content hosted on Prismic
https://prismic.nuxtjs.org
MIT License
244 stars 48 forks source link

Issues with deployment of site #73

Closed KristianJohansenVakwerk closed 4 years ago

KristianJohansenVakwerk commented 4 years ago

Hey, thanks for a great module!

I'm having some issues when I generate the static site for deployment. When I run the npm run generate does i run with no errors, but it is not generating all the nested children, only some of them. Also the site works perfect on my local front-end.

My pages folder looks like this.

pages index.vue --| _navigation (folder) --| index.vue ----| _category (folder) ----| index.vue ------| _project (folder) ------| index.vue

I don't know if has something to do with link-resolver, but the doc.type is always navigation when I log it, and it fires multiple times. Not sure that the issue.

Cheers,

lihbr commented 4 years ago

Hi @KristianJohansenVakwerk

Can you elaborate what you mean by "only some of them"? Also can you provide us a link to your repo or at least your nuxt.config.js and your link-resolver.js please? It'll help us figure out what going on here :)

Thanks~

KristianJohansenVakwerk commented 4 years ago

I know it's a very vague description. But I essentially have three sections (_navigation) which has multiple projects each with different categories assigned. And when I run the npm run generate does it only create static files for some of the projects and categories but it doesn't throw any errors in the projects that doesn't get created. I hope that make sense.

I have used this demo as a starting point. https://github.com/Atinux/nuxt-prismic-showcase. From my understanding do I not need to add the generate property in my nuxt.config.js when I use the @nuxtjs/prisimc, right?

Here is my link-resolver.js

`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/_cateogry/${doc.uid} }

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

return '/' }`

and my nuxt.config.js

`export default { head() { return { meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' } ] } },

css: [ '~plugins/3.5.10-plyr.css', ],

loading: { color: '#fff', height: '0px' },

build: { extend (config, { isDev, isClient, loaders: { vue } }) { if (isClient) { vue.transformAssetUrls.img = ['data-src', 'src'] vue.transformAssetUrls.source = ['data-srcset', 'srcset'] } } },

plugins: [ '~/components/index', '~/plugins/vue-lazysizes.client.js', '~/plugins/vue-plyr', { src: '~/plugins/vue-flickity.js', ssr: false}, { src: '~/plugins/waypoints.js', ssr: false} ],

/* * Nuxt.js Build Modules / buildModules: [ '~/modules/crawler', '~/modules/static', // Doc: https://prismic-nuxt.js.org/ // Doc: https://github.com/nuxt-community/eslint-module // '@nuxtjs/eslint-module' ],

modules: [ '@nuxtjs/prismic', '@nuxtjs/style-resources' ],

styleResources: { scss: [ '~/assets/scss/reset.scss', '~/assets/scss/main.scss' ] },

prismic: { endpoint: 'URL_TO_API', preview: '/preview/', // because we use nuxt generate linkResolver: '~/app/prismic/link-resolver.js', htmlSerializer: '~/app/prismic/html-serializer.js' },

}`

lihbr commented 4 years ago

Ok, thanks for sharing your config @KristianJohansenVakwerk

First of all I don't know if that's a typo related to copy/pasting or if this is the actual code but there's one in your link resolver for projects (I don't think you wanted to spell category this way):

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

As for what's going on beyond that I'm a bit puzzled as I don't think the linkResolver function is able to handle multi-params navigation this way: /_navigation/_cateogry/${doc.uid} (or perhaps I'm just not aware of it but this looks strange to me), and I wasn't able to find a recommended way to handle this type of multi-params navigation through Prismic doc / blog, all the examples are just about /blog/${doc.uid} hmm...

Perhaps the solution looks something like this:

if (doc.type === '_project') {
  const category = resolveCategory(doc);
  const navigation = resolveNavigation(category);
  return `/${navigation.uid}/${category.uid}/${doc.uid}`
}

But I don't see how you would implement the resolveCategory and resolveNavigation functions without them being async (you don't want multiple HTTP calls to be fired on each link of your page...)

So... perhaps I'm totally wrong on all of that or I am missing something but I'm afraid you'll have to wait for someone who knows more about Prismic and this module than me, I'm sorry~

KristianJohansenVakwerk commented 4 years ago

Thanks for your reply @lihbr

I discovered some else that is odd, when I log the doc.type is always navigation regardless, not sure how the link-resolver gets some of them right then?

Thanks for you time I will wait and see if someone else can help me in here.

hypervillain commented 4 years ago

Hey @KristianJohansenVakwerk, can you share your module configuration here? I think you could use the new routes resolver, that helps Nuxt generate the correct routes. Otherwise, out of the box, Nuxt can't predict which values are valid for navigation, category and doc uids

lihbr commented 4 years ago

As pointed out by @hypervillain I think this is something that can be easily solved by the new routes resolver, if it doesn't work feel free to reach out to us again (your repo is probably not on the new clusters supporting this feature and we'll happily migrate it to it 🙂)

Anyway, in the meantime I'll close this issue and mark it as stale because it has not had recent activity, will happily reopen it if necessary~

Thanks for your contribution!