usePageHead() is called without provider #103

DanielPe05 · 2021-04-08T13:45:12Z

DanielPe05
Apr 8, 2021

Hi, Vuepress fam! I'm seeing this error usePageHead() is called without provider.

I'm using the node API from inside an internal CLI tool which among other things it builds docs using vuepress, the tool is packaged and distributed through NPM. After I publish the package and try running it, It fails with the error.

Weirdly when I use npm link and run it locally it works like a charm. Here is what the app config looks like when it fails:

{
  version: '2.0.0-beta.6',
  options: {
    base: '/cli/',
    lang: 'en-US',
    title: 'CLI Documentation',
    description: "Documentation for CLI",
    head: [],
    locales: {},
    theme: '@vuepress/default',
    themeConfig: { sidebarDepth: 2, sidebar: 'auto' },
    bundler: '@vuepress/vite',
    bundlerConfig: {},
    source: '/Users/**/Work/test-project/docs',
    dest: '/Users/**/Work/test-project/docs/.vuepress/dist',
    temp: '/Users/**/Work/test-project/docs/.vuepress/.temp',
    cache: '/Users/**/Work/test-project/docs/.vuepress/.cache',
    public: '/Users/**/Work/test-project/docs/.vuepress/public',
    markdown: {},
    debug: false,
    host: '0.0.0.0',
    port: 8080,
    open: false,
    evergreen: true,
    pagePatterns: [ '**/*.md', '!.vuepress', '!node_modules' ],
    templateDev: '/Users/**/.nvm/versions/node/v12.18.4/lib/node_modules/cli-package/node_modules/@vuepress/client/templates/index.dev.html',
    templateSSR: '/Users/**/.nvm/versions/node/v12.18.4/lib/node_modules/cli-package/node_modules/@vuepress/client/templates/index.ssr.html',
    shouldPreload: true,
    shouldPrefetch: false
  },
  dir: {
    cache: [Function],
    temp: [Function],
    source: [Function],
    dest: [Function],
    client: [Function],
    public: [Function]
  },
  env: {
    isProd: false,
    isTest: false,
    isDev: false,
    isDebug: false,
    nodeEnv: undefined
  },
  siteData: {
    base: '/cli/',
    lang: 'en-US',
    title: 'CLI Documentation',
    description: "Documentation for CLI",
    head: [],
    locales: {}
  },
  markdown: MarkdownIt {
    inline: ParserInline { ruler: [Ruler], ruler2: [Ruler] },
    block: ParserBlock { ruler: [Ruler] },
    core: Core { ruler: [Ruler] },
    renderer: Renderer { rules: [Object] },
    linkify: LinkifyIt {
      __opts__: [Object],
      __index__: -1,
      __last_index__: -1,
      __schema__: '',
      __text_cache__: '',
      __schemas__: [Object],
      __compiled__: [Object],
      __tlds__: [Array],
      __tlds_replaced__: false,
      re: [Object]
    },
    validateLink: [Function: validateLink],
    normalizeLink: [Function: normalizeLink],
    normalizeLinkText: [Function: normalizeLinkText],
    utils: {
      lib: [Object],
      assign: [Function: assign],
      isString: [Function: isString],
      has: [Function: has],
      unescapeMd: [Function: unescapeMd],
      unescapeAll: [Function: unescapeAll],
      isValidEntityCode: [Function: isValidEntityCode],
      fromCodePoint: [Function: fromCodePoint],
      escapeHtml: [Function: escapeHtml],
      arrayReplaceAt: [Function: arrayReplaceAt],
      isSpace: [Function: isSpace],
      isWhiteSpace: [Function: isWhiteSpace],
      isMdAsciiPunct: [Function: isMdAsciiPunct],
      isPunctChar: [Function: isPunctChar],
      escapeRE: [Function: escapeRE],
      normalizeReference: [Function: normalizeReference]
    },
    helpers: {
      parseLinkLabel: [Function: parseLinkLabel],
      parseLinkDestination: [Function: parseLinkDestination],
      parseLinkTitle: [Function: parseLinkTitle]
    },
    options: {
      html: true,
      xhtmlOut: false,
      breaks: false,
      langPrefix: 'language-',
      linkify: false,
      typographer: false,
      quotes: '“”‘’',
      highlight: null,
      maxNesting: 100
    },
    render: [Function]
  },
  pluginApi: {
    plugins: [],
    hooks: {
      onInitialized: [Object],
      onPrepared: [Object],
      onWatched: [Object],
      onGenerated: [Object],
      extendsPageOptions: [Object],
      extendsPageData: [Object],
      extendsMarkdown: [Object],
      clientAppEnhanceFiles: [Object],
      clientAppRootComponentFiles: [Object],
      clientAppSetupFiles: [Object],
      alias: [Object],
      define: [Object]
    },
    registerHooks: [Function]
  },
  use: [Function: use],
  useByConfig: [Function: useByConfig],
  init: [Function: init],
  prepare: [Function: prepare],
  dev: [Function: dev],
  build: [Function: build]
}

Answered by leandro-costa

Apr 13, 2023

maybe it can help

npx vp-update

https://vuepress-theme-hope.github.io/v2/faq/common-error.html#usexxx-is-called-without-provider

View full answer

meteorlxy · 2021-04-08T13:55:46Z

meteorlxy
Apr 8, 2021
Maintainer

You'd better provide a reproduce repo.

This sounds to be caused by vite's pre-bundling feature. Some packages might be pre-bundled unexpectly.

5 replies

DanielPe05 Apr 8, 2021
Author

Thank you for the response. unfortunately providing a reproduction repo won't be possible since the project is internal :\ I will try to put something together later today if I can't get past this.

I tried it using the Webpack bundler just now but that creates all sorts of errors related to mini-css-extract-plugin. See below:

Module build failed (from ../../.nvm/versions/node/v12.18.4/lib/node_modules/cli-package/node_modules/mini-css-extract-plugin/dist/loader.js):\n' +
    "Error: You forgot to add 'mini-css-extract-plugin' plugin (i.e. `{ plugins: [new MiniCssExtractPlugin()] }`), please read https://github.com/webpack-contrib/mini-css-extract-plugin#getting-started\n" +
    '    at Object.pitch (/Users/**/.nvm/versions/node/v12.18.4/lib/node_modules/cli-package/node_modules/mini-css-extract-plugin/dist/loader.js:50:14)'

DanielPe05 Apr 8, 2021
Author

Also as I mentioned, it only happens after the package has been published and installed locally, if I use npm link I can't reproduce it. That's why also a repro repo wouldn't be of much help :(

Any ideas on the webpack CSS error above? I don't mind using the webpack bundler as long as it works

DanielPe05 Apr 8, 2021
Author

@meteorlxy I got around the webpack issue but forcing NODE_ENV to production at runtime, but even with the webpack bundler, I get the same error outlined above usePageHead() is called without provider.

Any ideas?

meteorlxy Apr 9, 2021
Maintainer

@DanielPe05 Well, I would like to help, but I can't do much without a reproduction

DanielPe05 Apr 9, 2021
Author

See repro steps below. Thank you for all your help!

DanielPe05 · 2021-04-08T16:49:10Z

DanielPe05
Apr 8, 2021
Author

I should have added that this happens during the "Rendering pages" stage. It compiles fine.

Rendering pages /Error: usePageHead() is called without provider

1 reply

DanielPe05 Apr 8, 2021
Author

Specifically, it happens when we call renderToString to render the current page to a string. (which is why this happens with both vite and webpack bundler since they both do this)

DanielPe05 · 2021-04-08T17:09:27Z

DanielPe05
Apr 8, 2021
Author

Another piece of info is that when I run the package (cli) inside the project itself it runs with no issues, the problem only happens when I run it on other projects. This is what that method to build the docs looks like:

import path from 'path'
import fs from 'fs-extra'

process.env.NODE_ENV = 'production'
const TEMP_LOCATION = path.resolve('.temp')

const buildDocs = async (space: string, docsLoc = 'docs') => {
  /**
   * Create the temporary directory and copy docs to it
   */
  await fs.ensureDir(TEMP_LOCATION)
  await fs.copy(`${docsLoc}/.`, TEMP_LOCATION)

  /**
   * Create and build the app from the docs in the temp directory
   */
  const app = createApp({
    source: TEMP_LOCATION,
    bundler: '@vuepress/vite',
    base: `/${space}/`,
    title: `${capitalize(space)} Documentation`,
    themeConfig: { sidebarDepth: 2, sidebar: 'auto' },
    description: `Documentation for ${capitalize(space)} space`
  })

  await app.init()
  await app.prepare()

  return app.build()
}

0 replies

DanielPe05 · 2021-04-09T13:44:03Z

DanielPe05
Apr 9, 2021
Author

@meteorlxy I was able to extract the vuepress portion from our cli and create a reproduction repo, could you please take a quick peek at the problem?

To reproduce, using node v12.18.4:

Step 1: Clone repo

git clone https://github.com/DanielPe05/vuepress-cli-repro.git

Step 2: Change into repo

cd vuepress-cli-repro

Step 3: Install deps and build the project

npm i
npm run build

Step 4: Link CLI locally

npm link

Step 5: Create a target project

cd ..
mkdir target-project
cd target-project
mkdir docs
echo '# Hello VuePress' > docs/README.md

Step 6: Run linked CLI on target project

vuepress-starter run

At this point Vuepress will build successfully but during the render stage you should see the following error:

⠋ Rendering pages⠋ Rendering pages /Error: usePageHead() is called without provider.
    at usePageHead (/Users/**/Work/target-project/.temp/.vuepress/dist/.server/server.js:83:11)
    at useUpdateHead (/Users/**/Work/target-project/.temp/.vuepress/dist/.server/server.js:149:16)
    at setup (/Users/**/Work/target-project/.temp/.vuepress/dist/.server/server.js:1016:7)
    at callWithErrorHandling (/Users/**/Work/vuepress-starter/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:119:22)
    at setupStatefulComponent (/Users/**/Work/vuepress-starter/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:5365:29)
    at setupComponent (/Users/**/Work/vuepress-starter/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:5346:11)
    at renderComponentVNode (/Users/**/Work/vuepress-starter/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:157:17)
    at Object.renderToString (/Users/**/Work/vuepress-starter/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:409:26)
    at Object.renderPage (/Users/**/Work/vuepress-starter/node_modules/@vuepress/bundler-vite/lib/build/renderPage.js:22:50)
    at async /Users/**/Work/vuepress-starter/node_modules/@vuepress/bundler-vite/lib/build/createBuild.js:48:13
[Vue warn]: Component  is missing template or render function.
⠙ Rendering pagesError: usePageHead() is called without provider.
    at usePageHead (/Users/**/Work/target-project/.temp/.vuepress/dist/.server/server.js:83:11)
    at useUpdateHead (/Users/**/Work/target-project/.temp/.vuepress/dist/.server/server.js:149:16)
    at setup (/Users/**/Work/target-project/.temp/.vuepress/dist/.server/server.js:1016:7)
    at callWithErrorHandling (/Users/**/Work/vuepress-starter/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:119:22)
    at setupStatefulComponent (/Users/**/Work/vuepress-starter/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:5365:29)
    at setupComponent (/Users/**/Work/vuepress-starter/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:5346:11)
    at renderComponentVNode (/Users/**/Work/vuepress-starter/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:157:17)
    at Object.renderToString (/Users/**/Work/vuepress-starter/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:409:26)
    at Object.renderPage (/Users/**/Work/vuepress-starter/node_modules/@vuepress/bundler-vite/lib/build/renderPage.js:22:50)
    at async /Users/**/Work/vuepress-starter/node_modules/@vuepress/bundler-vite/lib/build/createBuild.js:48:13
[Vue warn]: Component  is missing template or render function.

However, if you enter the vuepress-starter project and run vuepress-starter run inside of itself, there will be no errors thrown and the assets will be built properly.

I really appreciate the help and I'm sorry to continue pressing on this issue but I have spent countless hours trying to figure out the root cause of the problem without success. So any insight into this issue is highly appreciated.

0 replies

linbudu599 · 2021-05-13T06:06:01Z

linbudu599
May 13, 2021

I'm also encountering this error, I'm developing a nx plugin integration with VuePress, which means I'm using programmatic API export from VuePress instead of VuePress CLI, just like:

import { VuePressBuildSchema, Res } from '../schema';
import { from, Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { build, allowTs } from 'vuepress';

export const startVuePressBuild = (
  schema: VuePressBuildSchema
): Observable<Res> => {
  return new Observable((subscriber) => {
    allowTs();

    from(
      build(schema.root, {
        config: schema.configPath,
      })
    ).pipe(
      tap(() => {
        subscriber.next({
          success: true,
        });
      })
    );
  });
};

And when invoking this, I got same errors above.

using Webpack as compiler.

config:

import { defineUserConfig } from 'vuepress';
import type { DefaultThemeOptions } from 'vuepress';

export default defineUserConfig<DefaultThemeOptions>({
  lang: 'en-US',
  title: 'Hello VuePress',
  description: 'Just playing around',

  themeConfig: {
    logo: 'https://vuejs.org/images/logo.png',
  },
});

0 replies

Joelius300 · 2021-10-15T09:20:13Z

Joelius300
Oct 15, 2021

This seems to still be an issue. I tried using a git submodule in my project to get the latest features because the latest beta is too outdated for me and none of the ways I linked them together appear to work, it always fails with the same error:

[Vue warn]: Component VuepressApp  is missing template or render function.
Error: usePageHead() is called without provider.
    at usePageHead (/mnt/daten/projects/werewolf-guide/guide/.vuepress/dist/.server/app.js:3800:15)
    at setupUpdateHead (/mnt/daten/projects/werewolf-guide/guide/.vuepress/dist/.server/app.js:4007:18)
    at setup (/mnt/daten/projects/werewolf-guide/guide/.vuepress/dist/.server/app.js:3389:56)
    at callWithErrorHandling (/mnt/daten/projects/werewolf-guide/vuepress-next/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:5432:22)
    at setupStatefulComponent (/mnt/daten/projects/werewolf-guide/vuepress-next/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:5140:29)
    at setupComponent (/mnt/daten/projects/werewolf-guide/vuepress-next/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js:5121:11)
    at renderComponentVNode (/mnt/daten/projects/werewolf-guide/vuepress-next/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:181:17)
    at Object.<anonymous> (/mnt/daten/projects/werewolf-guide/vuepress-next/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:439:30)
    at Generator.next (<anonymous>)
    at /mnt/daten/projects/werewolf-guide/vuepress-next/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js:30:71

This is not the only thing I've tried but one state that doesn't work can be seen here: https://github.com/Joelius300/werewolf-guide/tree/use-vuepress-from-source

0 replies

Mister-Hope · 2022-03-01T11:17:39Z

Mister-Hope
Mar 1, 2022
Collaborator

Any progress on this one, is it still existing with latest vuepress, vite, webpack and vue?

0 replies

adamdehaven · 2022-03-30T12:24:49Z

adamdehaven
Mar 30, 2022

Still seeing this now on 2.0.0-beta.36

1 reply

meteorlxy Mar 31, 2022
Maintainer

The regression was caused by some internal breaking changes of [email protected].

We have pinned [email protected] to avoid the issue in 2.0.0-beta.37, and will update to [email protected] in the next release.

wirk · 2023-01-02T13:39:30Z

wirk
Jan 2, 2023

Is there any solution to this? I'm experiencing this issue with 2.0.0-beta.36 with both vite 4.0 and 3.1

1 reply

wirk Jan 2, 2023

Never mind, I managed to get rid of the error by upgrading vue and vue-router to the latest versions

leandro-costa · 2023-04-13T15:45:01Z

leandro-costa
Apr 13, 2023

maybe it can help

npx vp-update

https://vuepress-theme-hope.github.io/v2/faq/common-error.html#usexxx-is-called-without-provider

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

usePageHead() is called without provider #103

{{title}}

Replies: 10 comments 8 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

usePageHead() is called without provider #103

DanielPe05 Apr 8, 2021

Replies: 10 comments · 8 replies

meteorlxy Apr 8, 2021 Maintainer

DanielPe05 Apr 8, 2021 Author

DanielPe05 Apr 8, 2021 Author

DanielPe05 Apr 8, 2021 Author

meteorlxy Apr 9, 2021 Maintainer

DanielPe05 Apr 9, 2021 Author

DanielPe05 Apr 8, 2021 Author

DanielPe05 Apr 8, 2021 Author

DanielPe05 Apr 8, 2021 Author

DanielPe05 Apr 9, 2021 Author

linbudu599 May 13, 2021

Joelius300 Oct 15, 2021

Mister-Hope Mar 1, 2022 Collaborator

adamdehaven Mar 30, 2022

meteorlxy Mar 31, 2022 Maintainer

wirk Jan 2, 2023

wirk Jan 2, 2023

leandro-costa Apr 13, 2023

DanielPe05
Apr 8, 2021

Replies: 10 comments 8 replies

meteorlxy
Apr 8, 2021
Maintainer

DanielPe05 Apr 8, 2021
Author

DanielPe05 Apr 8, 2021
Author

DanielPe05 Apr 8, 2021
Author

meteorlxy Apr 9, 2021
Maintainer

DanielPe05 Apr 9, 2021
Author

DanielPe05
Apr 8, 2021
Author

DanielPe05 Apr 8, 2021
Author

DanielPe05
Apr 8, 2021
Author

DanielPe05
Apr 9, 2021
Author

linbudu599
May 13, 2021

Joelius300
Oct 15, 2021

Mister-Hope
Mar 1, 2022
Collaborator

adamdehaven
Mar 30, 2022

meteorlxy Mar 31, 2022
Maintainer

wirk
Jan 2, 2023

leandro-costa
Apr 13, 2023