search

prismicio-community / nuxt-starter-prismic-blog

Blog project with Nuxt & Prismic
https://nuxt-starter-prismic-blog.vercel.app
Apache License 2.0
55 stars 32 forks source link

Generate pages fails with: Cannot read property 'split' of undefined. #8

Closed mvdschee closed 4 years ago

mvdschee commented 4 years ago

I have migrated to the new implementation for Nuxt, but when I'm running a build or generate it fails with:

FATAL  Cannot read property 'split' of undefined                                                                                   
  at extractPayload (modules/static/index.js:9:26)
  at modules/static/index.js:53:27
  at node_modules/hable/lib/hookable.js:50:45
  at node_modules/hable/lib/utils.js:15:67
  at runNextTicks (internal/process/task_queues.js:58:5)
  at listOnTimeout (internal/timers.js:501:9)
  at processTimers (internal/timers.js:475:7)
  at async Nuxt.callHook (node_modules/hable/lib/hookable.js:50:7)
  at async Generator.generateRoute (node_modules/@nuxt/generator/dist/generator.js:264:5)
  at async node_modules/@nuxt/generator/dist/generator.js:120:13
  at async Promise.all (index 0)
  at async Generator.generateRoutes (node_modules/@nuxt/generator/dist/generator.js:115:7)
  at async Generator.generate (node_modules/@nuxt/generator/dist/generator.js:48:20)
  at async Object.run (node_modules/@nuxt/cli/dist/cli-generate.js:103:24)
  at async NuxtCommand.run (node_modules/@nuxt/cli/dist/cli-command.js:2575:7)

   ╭──────────────────────────────────────────────────────────╮
   │                                                          │
   │   ✖ Nuxt Fatal Error                                     │
   │                                                          │
   │   TypeError: Cannot read property 'split' of undefined   │
   │                                                          │
   ╰──────────────────────────────────────────────────────────╯

error Command failed with exit code 1.

logging chunks[0] will return an string:

[ 
<!doctype html>                                                                                                                      15:03:06
<html>
  <head>
    <title>website</title><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content="website"><link data-n-head="1" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/_nuxt/e7fdf3df281ae824687b.js" as="script"><link rel="preload" href="/_nuxt/3cbd4a77f9f7971031a0.js" as="script"><link rel="preload" href="/_nuxt/9da01e9244986ae9c38e.js" as="script"><link rel="preload" href="/_nuxt/90f48cfec504134a8a60.js" as="script">
  </head>
  <body>
    <div id="__nuxt"><style>#nuxt-loading{visibility:hidden;opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;flex-direction:column;animation:nuxtLoadingIn 10s ease;-webkit-animation:nuxtLoadingIn 10s ease;animation-fill-mode:forwards;overflow:hidden}@keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}@-webkit-keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}#nuxt-loading>div,#nuxt-loading>div:after{border-radius:50%;width:5rem;height:5rem}#nuxt-loading>div{font-size:10px;position:relative;text-indent:-9999em;border:.5rem solid #f5f5f5;border-left:.5rem solid #3edb58;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:nuxtLoading 1.1s infinite linear;animation:nuxtLoading 1.1s infinite linear}#nuxt-loading.error>div{border-left:.5rem solid #ff4500;animation-duration:5s}@-webkit-keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><script>window.addEventListener("error",function(){var e=document.getElementById("nuxt-loading");e&&(e.className+=" error")})</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div></div>
  <script type="text/javascript" src="/_nuxt/e7fdf3df281ae824687b.js"></script><script type="text/javascript" src="/_nuxt/3cbd4a77f9f7971031a0.js"></script><script type="text/javascript" src="/_nuxt/9da01e9244986ae9c38e.js"></script><script type="text/javascript" src="/_nuxt/90f48cfec504134a8a60.js"></script></body>
</html>
]

logging chunks[1] will return undefined

Dependencies: 

"dependencies": {
    "@nuxtjs/axios": "^5.9.6",
    "@nuxtjs/prismic": "^1.1.1",
    "@nuxtjs/style-resources": "^1.0.0",
    "kinet": "^2.2.1",
    "nuxt": "^2.12.1",
    "nuxt-property-decorator": "^2.5.1",
        "prismic-javascript": "^2.1.5",
    "prismic-vue": "^2.0.0"
},
"devDependencies": {
    "@nuxt/typescript-build": "^0.6.1",
    "@nuxtjs/stylelint-module": "^3.2.2",
    "@types/prismic-dom": "^2.1.1",
    "@vue/test-utils": "^1.0.0-beta.32",
    "babel-jest": "^25.2.4",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.10.1",
    "eslint-plugin-prettier": "^3.1.2",
    "jest": "^25.2.4",
    "node-sass": "^4.13.1",
    "prettier": "^2.0.2",
    "sass-loader": "^8.0.2",
    "stylelint": "^13.2.1",
    "stylelint-config-standard": "^20.0.0",
    "tslint": "^6.1.0",
    "vue-jest": "^3.0.5"
}
phillysnow commented 4 years ago

Hey this seems like it might been an issue specific to your set up. If you can reach out to me on the chat window here https://prismic.io/dashboard/

I'll be happy to have a look at your project and investigate more.

graux commented 4 years ago

Hi there, We are also experiencing this same issue. Our Nuxt site is available in 3 languages, but our blog is only available in one of them. Could this be the issue?

The error is reported in: modules/static/index.js: let extractPayload = function({ html, route }, windowNamespace){ let chunks = html.split(``<script>window.${windowNamespace}=``) let pre = chunks[0] let payload = chunks[1].split('</script>').shift() <== Cannot read property 'split' of undefined let post = chunks[1].split('</script>').slice(1).join('</script>') let path = route === '/' ? '' : route

This only happens when generating using target => static.

Any ideas about how to deal with this issue would be appreciated, thank you.

phillysnow commented 4 years ago

Hey @graux ,

I think the error is that the latest nuxt has the static module built in. So you can go ahead a delete the 'static' and 'crawler' files and this should stop the error.

I'll create an issue for us to update this example.

graux commented 4 years ago

Yes, that is correct. Removing the static and crawler modules fixes the issue and the prismic integration works fine. The documentation and example project should be updated to reflect that because it is really confusing: https://prismic.io/docs/vuejs/getting-started/prismic-nuxt Thank you

phillysnow commented 4 years ago

New updates to this project remove these and solve the issue. The nuxt-link in the html resolver issue has also been resolved. Plus it's using the new full static implementation.