While building for production vitepress gives syntax error

[Muhammad-Sarfaraz]

Describe the bug

While running for production : npm run docs:build, then "SyntaxError: The requested module 'vue' does not provide an export named 'computed'" occurred.

Reproduction

Try to build it for production : npm run docs:build "devDependencies": { "vitepress": "^1.0.0-beta.5" }

Expected behavior

It should build the docs for production.

System Info

Windows Machine,

Additional context

No response

Validations

• [X] Check if you're on the latest VitePress version.
• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

Can you share reproducible example?

[Muhammad-Sarfaraz]

Can you share reproducible example? Yeah, I can share the reproducible example! I will share it shortly!

[Muhammad-Sarfaraz]

Here is the reproducible example, [Link]

[brc-dd]

It's working fine for me:

Can you share the output of npx envinfo --system --npmPackages vitepress --binaries --browsers ?

[Muhammad-Sarfaraz]

Sytem Info:

Error:

[brc-dd]

Can you try bumping your node version to v16.20.1 or v18.16.1 or v20.4.0? If that doesn't work, try removing node_modules and re-running npm install.

[Muhammad-Sarfaraz]

Can you try bumping your node version to v16.20.1 or v18.16.1 or v20.4.0? If that doesn't work, try removing node_modules and re-running npm install.

Noted

[adambergman]

Running into a similar issue. We've moved to node 20.4.0 and still getting the same problem. I'm positive it's not related to node_modules as it's failing in our CI runners which are installing fresh packages.

The change that seems to have caused the problem on build (but not on dev) was that we brought in some Vue components from our project that the vitepress site documents. This was done using a custom theme with enhanceApp.

file:///home/niagara/workspaces/docs-api/.vitepress/.temp/app.js:1
import require$$0, { defineComponent, mergeProps, useSSRContext, shallowRef, inject, computed, ref, onUnmounted, reactive, markRaw, readonly, nextTick, h, onMounted, unref, getCurrentScope, onScopeDispose, toRef as toRef$1, customRef, watch, isRef, watchEffect, getCurrentInstance, onUpdated, resolveComponent, createVNode, resolveDynamicComponent, withCtx, renderSlot, createTextVNode, toDisplayString, openBlock, createBlock, createCommentVNode, Fragment, renderList, defineAsyncComponent, provide, toHandlers, withKeys, watchPostEffect, useSlots, createSSRApp } from "vue";
       ^^^^^^^^^^
SyntaxError: The requested module 'vue' does not provide an export named 'default'
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:122:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:188:5)
    at async DefaultModuleLoader.import (node:internal/modules/esm/loader:228:24)
    at async build (file:///home/niagara/workspaces/node_modules/.pnpm/vitepress@1.0.0-beta.5_@algolia+client-search@4.18.0_@types+node@18.14.2_sass@1.62.0_search-insights@2.7.0/node_modules/vitepress/dist/node/serve-d0f912b9.js:48692:24)
 ELIFECYCLE  Command failed with exit code 1.

niagara@5ab0b3080694:~/workspaces$ npx envinfo --system --npmPackages vitepress --binaries --browsers

  System:
    OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
    Memory: 3.28 GB / 7.77 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 20.4.0 - ~/.nvm/versions/node/v20.4.0/bin/node
    npm: 9.7.2 - ~/.nvm/versions/node/v20.4.0/bin/npm
    pnpm: 8.6.7 - ~/.nvm/versions/node/v20.4.0/bin/pnpm
  npmPackages:
    vitepress: 1.0.0-beta.5 => 1.0.0-beta.5 

Removing our UI components seems to allow the build to work again. There is a lot going on with our custom UI – it uses Pinia, PrimeVue and pulls in some custom styles.

We are in a monorepo and some of our packages are imported through our aliased namespaces but we have those specified in the vitepress's vite config.

As with OP everything is working great in dev but not in build.

[brc-dd]

@adambergman Hey, was beta-4 working fine?

[adambergman]

I downgraded to beta-4 and the problem is still there when we use enhanceApp but goes away when we comment out useDocsFramework below.

Here is our theme file (note I've changed our package aliases to @package and removed some of the ancillary store initialization/setup of our Pinia store):

// https://vitepress.dev/guide/custom-theme
import Theme from 'vitepress/theme'
import ApiLayout from './ApiLayout.vue'; // this is unchanged from the default
import './style.css';

import { useDocsFramework } from '@package/framework';

export default {
  ...Theme,
  Layout: ApiLayout,
  async enhanceApp({ app }) {
    await useDocsFramework(app);
  }
}

In @package/framework:

import PrimeVue from 'primevue/config';
import ConfirmationService from 'primevue/confirmationservice';
import ToastService from 'primevue/toastservice';
import Tooltip from 'primevue/tooltip';

import { createPinia } from 'pinia';

export const useFramework = async (app) => {
  await import('primevue/resources/primevue.min.css');

  app.use(PrimeVue);
  app.use(ConfirmationService);
  app.use(ToastService);
  app.directive('tooltip', Tooltip);
};

export const useDocsFramework = async (app) => {
  await useFramework(app);

  await import('@package/styles/components.scss');
  await import('@package/styles/prime/theme-light.scss');

  const pinia = createPinia();
  app.use(pinia);
};

ApiLayout.vue:

<script setup lang="ts">
import DefaultTheme from 'vitepress/theme'
const { Layout } = DefaultTheme;

</script>

<template>
  <Layout />
</template>

[brc-dd]

Can you try replacing the theme export with something like this?

export default {
  extends: Theme, // <-- default theme
  Layout: ApiLayout,
  async enhanceApp({ app }) {
    await useDocsFramework(app); // <-- line 5
  }
}

when we use enhanceApp but goes away when we comment out useDocsFramework below.

By this did you mean that the error is not there if you comment out just line 5, or did you mean you need to remove whole enhanceApp to make it work?

[adambergman]

Sorry for the confusion – the former – when commenting out line 5, so that enhanceApp is an empty function, there is no error in the production build.

I replaced with ...Theme with extends: Theme as recommended and still the get the same result.

I've disabled all of the PrimeVue stuff along with any imports of custom styles, and it appears it may just be the Pinia call?

This causes the error – the only thing happening with the function now is that it loads Pinia:

// https://vitepress.dev/guide/custom-theme
import Theme from 'vitepress/theme'
import ApiLayout from './ApiLayout.vue';
import './style.css'

import { useDocsFramework } from '@package/framework';

export default {
  extends: Theme,
  Layout: ApiLayout,
  async enhanceApp({ app, router, siteData }) {
    await useDocsFramework(app);
  }
}

framework.js

import { createPinia } from 'pinia';

export const useDocsFramework = async (app) => {
  const pinia = createPinia();
  app.use(pinia);
}

Edit, I've also tried without the async/await.

[brc-dd]

Ah, I'm still not able to reproduce it -- https://stackblitz.com/edit/vite-47wgcf?file=docs/.vitepress/theme/index.js 👀

[adambergman]

Okay, I think I stumbled on to the problem and it may have to do with the monorepo setup. Pinia is installed in @packages/framework under its package.json. Our main package.json for the monorepo did not have Pinia as a dependency. Once I added it, vitepress built fine for production.

Is there a workaround for this? Ideally, the main package.json file in the monorepo wouldn't need to include every single dependency of packages in our packages folder.

[brc-dd]

Is your @packages/framework listed as a dependency of docs-api's package.json?

[adambergman]

The folder lives at the root of the monorepo and vitepress is configured there. I guess to avoid the root package having dependencies on all the packages inside, we should move the docs to their own package in the monorepo and manage dependencies there rather than leaving it at the root. I'm going to try that and see if it works. Thanks for all of your help.

[adambergman]

@brc-dd Here is a recreation of the package setup – with the docs folder being at the root.

https://stackblitz.com/edit/vite-mnpa7u

pnpm docs:dev works as expected

pnpm docs:build does not.

Maybe our usage here is an edge case and I'll use the workaround I mentioned above, but I don't imagine we have the only mono repo that would want vitepress at the top without have to include dependencies at the main level for every sub package in the repo. Thanks again for all the help!

[brc-dd]

Consider adding this in your config for now:

  vite: {
    ssr: {
      noExternal: ['vue']
    }
  }

I'm not completely sure why this happens. Will look into that.

[brc-dd]

Can't figure out why this is happening. That workaround transpiles vue. Might be hitting some edge case or something. Not sure. Feel free to create a PR if someone solves this. Otherwise considering that we haven't received any such report, I'm closing this.