search

Renovamen / vuepress-theme-gungnir

A blog theme for VuePress 2.
https://v2-vuepress-theme-gungnir.vercel.app
Apache License 2.0
353 stars 79 forks source link

[Bug report] Build shows multiple 'Error: usePageFrontmatter() is called without provider.' messages #69

Closed mveenman closed 2 years ago

mveenman commented 2 years ago

✅ Checklist

🔎 Description

Concise Description

When executing the npm run build command it completes successfully, however it shows multiple times the following message: Rendering pages⠋ Rendering pages /Error: usePageFrontmatter() is called without provider. at usePageFrontmatter (C:\code\vue-press-poc\src\.vuepress\.temp\.server\app.js:309:11) at setupSidebarItems (C:\code\vue-press-poc\src\.vuepress\.temp\.server\app.js:1806:23) at Object.setup (C:\code\vue-press-poc\src\.vuepress\.temp\.server\app.js:2606:5) at setup (C:\code\vue-press-poc\src\.vuepress\.temp\.server\app.js:2749:59) at callWithErrorHandling (C:\code\vue-press-poc\node_modules\@vue\runtime-core\dist\runtime-core.cjs.prod.js:119:22) at setupStatefulComponent (C:\code\vue-press-poc\node_modules\@vue\runtime-core\dist\runtime-core.cjs.prod.js:5783:29) at setupComponent (C:\code\vue-press-poc\node_modules\@vue\runtime-core\dist\runtime-core.cjs.prod.js:5764:11) at renderComponentVNode (C:\code\vue-press-poc\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:169:17) at Object.renderToString (C:\code\vue-press-poc\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:443:26) at renderPage (C:\code\vue-press-poc\node_modules\@vuepress\bundler-vite\lib\build\renderPage.js:20:63)

As a result the site won't show. Using the npm run dev command does not show the messages and the site does show in the browser. Occasionally the console shows the same error though and usually a page refresh fixes this.

Expected behavior

Steps to reproduce

Screenshots or Screen Recording (if possible)

📄 Environment info (npx vuepress info)

System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz
    Memory: 7.25 GB / 15.60 GB
  Binaries:
    Node: 14.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
  Utilities:
    Git: 2.35.1.
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.22000.120.0), Chromium (101.0.1210.53)
  npmPackages:
    @vuepress/bundler-vite:  2.0.0-beta.45 
    @vuepress/bundler-webpack: Not Found
    @vuepress/cli:  2.0.0-beta.45
    @vuepress/client:  2.0.0-beta.45
    @vuepress/core:  2.0.0-beta.45
    @vuepress/markdown:  2.0.0-beta.45
    @vuepress/plugin-active-header-links:  2.0.0-beta.45
    @vuepress/plugin-back-to-top:  2.0.0-beta.45
    @vuepress/plugin-container:  2.0.0-beta.45
    @vuepress/plugin-docsearch: Not Found
    @vuepress/plugin-external-link-icon:  2.0.0-beta.45
    @vuepress/plugin-git:  2.0.0-beta.45
    @vuepress/plugin-google-analytics:  2.0.0-beta.45
    @vuepress/plugin-medium-zoom:  2.0.0-beta.45
    @vuepress/plugin-nprogress:  2.0.0-beta.45
    @vuepress/plugin-palette:  2.0.0-beta.45
    @vuepress/plugin-prismjs:  2.0.0-beta.45
    @vuepress/plugin-pwa:  2.0.0-beta.45
    @vuepress/plugin-pwa-popup:  2.0.0-beta.45
    @vuepress/plugin-register-components: Not Found
    @vuepress/plugin-search: Not Found
    @vuepress/plugin-shiki: Not Found
    @vuepress/plugin-theme-data:  2.0.0-beta.45
    @vuepress/plugin-toc: Not Found
    @vuepress/shared:  2.0.0-beta.45
    @vuepress/theme-default:  2.0.0-beta.45
    @vuepress/utils:  2.0.0-beta.45
    vue:  3.2.34
    vue-loader: Not Found
    vue-router:  4.0.15
    vuepress: ^2.0.0-beta.45 => 2.0.0-beta.45
    vuepress-vite:  undefined (2.0.0-beta.45)
    vuepress-webpack: Not Found

🔗 Reproduction link / repo:

No response

mveenman commented 2 years ago

Additional info: the error on the browsers console is observed whenever a page is reloaded due to an edit. Simply refreshing the same page in the browser resolves the issue.

rainbowatcher commented 2 years ago

have you created a config.ts or config.js in .vuepress folder? if not, create it and configure the personal info part.

mveenman commented 2 years ago

Thank you for the reply. I'm using config.ts and also have the personal info in my theme options (assuming that's what you mean):

import { App, defineUserConfig, Page } from 'vuepress';
import gungnirTheme, { GungnirThemeOptions } from 'vuepress-theme-gungnir';

const gungnirOptions: GungnirThemeOptions = {
    navbarTitle: "Stark", // Optional, default: "$ cd /home/"
    // home: '', // Home path of current locale, used as the link of back-to-home.
    // hitokoto: false, // Enable hitokoto or not?
    // searchIcon: 'ri-search-2-line', // Icon for search button (should be registered first). "false" for no icon (default "ri-search-2-line").
    searchText: 'Search',
    // langIcon: 'hi-translate', // Icon for language seletor (should be registered first). "false" for no icon (default "hi-translate").
    personalInfo: {
        name: "Stark Industries", // required: nickname, will be showed on home page, mobile sidebar and author info of articles.
        avatar: "/images/avatar.jpg", // required: avatar, will be showed on home page and mobile sidebar.
        description: 'Advanced weapons and military technologies', // required: a description, will be showed on home page.
        sns: {
            github: 'StarkIndustries',  // Github
            linkedin: 'tony-stark',  // Linkedin
            facebook: 'stark-industries',  // Facebook
            twitter: 'stark-industries',  // Twitter
            email: 'tony@stark-industries.com',  // Email
        }
    },
    homeHeaderImages: [
        {
            "path": "/images/wallpaper-2.jpg",
            "mask": "rgba(40, 57, 101, .4)",
        },
    ],
    pages: {
        tags: { // tags page
            title: 'Articles',
            subtitle: 'Some nice articles to read', // optional: subtitle of tags page
            bgImage: { // optional: paths to and masks of the tags page cover images
                path: '/images/wallpaper-4.jpg',
                // mask: 'rgba(211, 136, 37, .5)',
            },
        },
    },
    catalog: true, // Display catalog for all posts or not. Catalog can also be configured in page frontmatter.
    blogNumPerPage: 10, // Maximum number of blogs per page.
    navbar: [], // Navbar config. Set to 'false' to disable navbar in current locale.
    sidebar: false, // Sidebar config. Set to 'false' to disable sidebar in current locale.
    sidebarDepth: 2,
    editLink: false, // Page meta - edit link config. Whether to show "Edit this page" or not.
    // editLinkPattern: '', // Page meta - edit link config. Pattern of edit link (example ':repo/edit/:branch/:path'). 
    // docsRepo: '', // Page meta - edit link config. Use 'repo' config by default. Set this config if your docs is placed in a different repo.
    // docsBranch?: string; // Page meta - edit link config. Set this config if the branch of your docs is not 'main'.
    // docsDir: '', // Page meta - edit link config. Set this config if your docs is placed in sub dir of your 'docsRepo'.
    lastUpdated: false, // Page meta - last updated config. Whether to show "Last Updated" or not.
    contributors: false, // Page meta - contributors config. Whether to show "Contributors" or not.
    footer: '&copy; <a href="#" target="_blank">Stark Industries</a> 2022', // Footer, support HTML.
};

export default defineUserConfig({
    lang: 'en-US',
    title: 'Stark Industries',
    description: 'Advanced weapons and military technologies',
    dest: './dist',
    theme: gungnirTheme(gungnirOptions),
});

I used to have it without the sns property, but added it just to be sure that didn't cause the issue. However, with the config.ts above I still have the error when executing npm run build.

zhang13pro commented 2 years ago

I must say i have same trouble image

✔ Compiling with vite - done
⠋ Rendering pages⠋ Rendering pages /links/Error: usePageHead() is called without provider.
    at usePageHead (D:\w\bobo.me\blog\.vuepress\.temp\.server\app.js:195:11)
    at setupUpdateHead (D:\w\bobo.me\blog\.vuepress\.temp\.server\app.js:15673:16)
    at setup (D:\w\bobo.me\blog\.vuepress\.temp\.server\app.js:15691:7) 
    at callWithErrorHandling (D:\w\bobo.me\node_modules\.pnpm\@vue+runtime-core@3.2.36\node_modules\@vue\runtime-core\dist\runtime-core.cjs.prod.js:119:22)
    at setupStatefulComponent (D:\w\bobo.me\node_modules\.pnpm\@vue+runtime-core@3.2.36\node_modules\@vue\runtime-core\dist\runtime-core.cjs.prod.js:5784:29)
    at setupComponent (D:\w\bobo.me\node_modules\.pnpm\@vue+runtime-core@3.2.36\node_modules\@vue\runtime-core\dist\runtime-core.cjs.prod.js:5765:11)
    at renderComponentVNode (D:\w\bobo.me\node_modules\.pnpm\@vue+server-renderer@3.2.36_vue@3.2.36\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:169:17)
    at Object.renderToString (D:\w\bobo.me\node_modules\.pnpm\@vue+server-renderer@3.2.36_vue@3.2.36\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:443:26)
    at renderPage (D:\w\bobo.me\node_modules\.pnpm\@vuepress+bundler-vite@2.0.0-beta.45\node_modules\@vuepress\bundler-vite\lib\build\renderPage.js:20:63)
    at async D:\w\bobo.me\node_modules\.pnpm\@vuepress+bundler-vite@2.0.0-beta.45\node_modules\@vuepress\bundler-vite\lib\build\build.js:54:13  
[Vue warn]: Component VuepressApp is missing template or render function.
Renovamen commented 2 years ago

@mveenman @zhang13pro Hi, the latest theme version (2.0.0-alpha.24) should be compatible with VuePress v2.0.0-beta.46, please have a try. Thanks!

shuguang-lv commented 2 years ago

Hi, I've updated the theme version to 2.0.0-alpha.24 with VuePress updated to v2.0.0-beta.46. The project can run successfully under dev mode, but it failed to build when npm run build was executed. The error message is now different from the ones above:

TypeError: excerpt.replaceAll is not a function
    at getExcerpt (F:\Blog\docs\.vuepress\.temp\.server\app.js:29338:22)
    at F:\Blog\docs\.vuepress\.temp\.server\app.js:29364:48
    at renderComponentSubTree (F:\Blog\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:250:13)   
    at renderComponentVNode (F:\Blog\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:185:16)     
    at Object.ssrRenderComponent (F:\Blog\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:605:12)
    at F:\Blog\docs\.vuepress\.temp\.server\app.js:29406:30
    at Object.ssrRenderList (F:\Blog\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:666:13)     
    at F:\Blog\docs\.vuepress\.temp\.server\app.js:29405:22
    at renderComponentSubTree (F:\Blog\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:250:13)   
    at renderComponentVNode (F:\Blog\node_modules\@vue\server-renderer\dist\server-renderer.cjs.prod.js:185:16)

Environment Info

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-11300H @ 3.10GHz
    Memory: 4.28 GB / 15.78 GB
  Binaries:
    Node: 14.17.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.18 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.20.0 - C:\Program Files\nodejs\npm.CMD
  Utilities:
    Git: 2.34.0.
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.53)
  npmPackages:
    @vuepress/bundler-vite: 2.0.0-beta.46 => 2.0.0-beta.46
    @vuepress/bundler-webpack: Not Found
    @vuepress/cli: 2.0.0-beta.46 => 2.0.0-beta.46
    @vuepress/client: 2.0.0-beta.46 => 2.0.0-beta.46
    @vuepress/core:  2.0.0-beta.46
    @vuepress/markdown:  2.0.0-beta.46
    @vuepress/plugin-active-header-links:  2.0.0-beta.46
    @vuepress/plugin-back-to-top:  2.0.0-beta.46
    @vuepress/plugin-container:  2.0.0-beta.46
    @vuepress/plugin-docsearch: Not Found
    @vuepress/plugin-external-link-icon:  2.0.0-beta.46
    @vuepress/plugin-git:  2.0.0-beta.46
    @vuepress/plugin-google-analytics:  2.0.0-beta.46
    @vuepress/plugin-medium-zoom: ^2.0.0-beta.46 => 2.0.0-beta.46
    @vuepress/plugin-nprogress:  2.0.0-beta.46
    @vuepress/plugin-palette:  2.0.0-beta.46
    @vuepress/plugin-prismjs:  2.0.0-beta.46
    @vuepress/plugin-pwa:  2.0.0-beta.46
    @vuepress/plugin-pwa-popup:  2.0.0-beta.46
    @vuepress/plugin-register-components: Not Found
    @vuepress/plugin-search: ^2.0.0-beta.46 => 2.0.0-beta.46
    @vuepress/plugin-shiki: Not Found
    @vuepress/plugin-theme-data:  2.0.0-beta.46
    @vuepress/plugin-toc: Not Found
    @vuepress/shared:  2.0.0-beta.46
    @vuepress/theme-default:  2.0.0-beta.46
    @vuepress/utils:  2.0.0-beta.46
    vue: ^3.2.33 => 3.2.36
    vue-loader: Not Found
    vue-router:  4.0.15
    vuepress: ^2.0.0-beta.46 => 2.0.0-beta.46
    vuepress-vite:  2.0.0-beta.46
    vuepress-webpack: Not Found
Renovamen commented 2 years ago

@shuguang-lv Oh, that may be because replaceAll is not supported in Node 14:

https://github.com/Renovamen/vuepress-theme-gungnir/blob/a089ec3dae954128b91c22feafc13a055f65c3a3/packages/theme/src/client/components/PostListItem.vue#L41-L42

I'll use an alternative in the next version. Before that, you can try upgrading to Node 15 or higher.

shuguang-lv commented 2 years ago

@Renovamen I updated my Node version to 16. The project can now be built successfully. Thank you!

mveenman commented 2 years ago

@Renovamen tested an can confirm this worked. I've also added an engines section to my package.json in order to make the CI/CD pipeline use at least Node version 15. Closing the bug, thank you for the support.