Node.js API

[DanielPe05]

Has anyone tried implementing using the node.js API. I know is not documented yet but similar to v1 (https://vuepress.vuejs.org/api/node.html#usage) we should be able to do something like this:

import path from 'path'
import { createApp } from 'vuepress'

const buildDocs = async (space: string) => {
    const source = path.resolve(__dirname, '.temp-docs')
    const app = createApp({
      source,
      title: `${capitalize(space)} Documentation`,
      description: `Documentation for ${capitalize(space)} space`,
      base: '/',
      themeConfig: {
        sidebarDepth: 2,
        sidebar: 'auto'
      }
    })

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

    return app.build()
  }

When I try this I get errors like this:

{
  moduleIdentifier: '/Users/***/Work/docs-api/node_modules/mini-css-extract-plugin/dist/loader.js!/Users/***/Work/docs-api/node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!/Users/***/Work/docs-api/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!/Users/***/Work/docs-api/node_modules/@vuepress/client/lib/components/OutboundLink.css',
  moduleName: './node_modules/@vuepress/client/lib/components/OutboundLink.css',
  message: 'Module build failed (from ./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/***/Work/docs-api/node_modules/mini-css-extract-plugin/dist/loader.js:50:14)',
  moduleId: './node_modules/@vuepress/client/lib/components/OutboundLink.css',
  moduleTrace: [
    {
      originIdentifier: '/Users/***/Work/docs-api/node_modules/@vuepress/client/lib/components/OutboundLink.js',
      originName: './node_modules/@vuepress/client/lib/components/OutboundLink.js',
      moduleIdentifier: '/Users/***/Work/docs-api/node_modules/mini-css-extract-plugin/dist/loader.js!/Users/***/Work/docs-api/node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!/Users/***/Work/docs-api/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!/Users/***/Work/docs-api/node_modules/@vuepress/client/lib/components/OutboundLink.css',
      moduleName: './node_modules/@vuepress/client/lib/components/OutboundLink.css',
      dependencies: [Array],
      originId: './node_modules/@vuepress/client/lib/components/OutboundLink.js',
      moduleId: './node_modules/@vuepress/client/lib/components/OutboundLink.css'
    },
    {
      originIdentifier: '/Users/***/Work/docs-api/node_modules/@vuepress/client/lib/components/index.js',
      originName: './node_modules/@vuepress/client/lib/components/index.js',
      moduleIdentifier: '/Users/***/Work/docs-api/node_modules/@vuepress/client/lib/components/OutboundLink.js',
      moduleName: './node_modules/@vuepress/client/lib/components/OutboundLink.js',
      dependencies: [Array],
      originId: './node_modules/@vuepress/client/lib/components/index.js',
      moduleId: './node_modules/@vuepress/client/lib/components/OutboundLink.js'
    },
    {
      originIdentifier: '/Users/***/Work/docs-api/node_modules/@vuepress/client/lib/app.js',
      originName: './node_modules/@vuepress/client/lib/app.js',
      moduleIdentifier: '/Users/***/Work/docs-api/node_modules/@vuepress/client/lib/components/index.js',
      moduleName: './node_modules/@vuepress/client/lib/components/index.js',
      dependencies: [Array],
      originId: './node_modules/@vuepress/client/lib/app.js',
      moduleId: './node_modules/@vuepress/client/lib/components/index.js'
    },
    {
      originIdentifier: '/Users/***/Work/docs-api/node_modules/@vuepress/client/lib/client.js',
      originName: './node_modules/@vuepress/client/lib/client.js',
      moduleIdentifier: '/Users/***/Work/docs-api/node_modules/@vuepress/client/lib/app.js',
      moduleName: './node_modules/@vuepress/client/lib/app.js',
      dependencies: [Array],
      originId: './node_modules/@vuepress/client/lib/client.js',
      moduleId: './node_modules/@vuepress/client/lib/app.js'
    }
  ],
  details: undefined,
  stack: 'ModuleBuildError: Module build failed (from ./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/***/Work/docs-api/node_modules/mini-css-extract-plugin/dist/loader.js:50:14)\n' +
    '    at processResult (/Users/***/Work/docs-api/node_modules/webpack/lib/NormalModule.js:675:19)\n' +
    '    at /Users/***/Work/docs-api/node_modules/webpack/lib/NormalModule.js:774:5\n' +
    '    at /Users/***/Work/docs-api/node_modules/loader-runner/lib/LoaderRunner.js:399:11\n' +
    '    at /Users/***/Work/docs-api/node_modules/loader-runner/lib/LoaderRunner.js:195:20\n' +
    '    at context.callback (/Users/***/Work/docs-api/node_modules/loader-runner/lib/LoaderRunner.js:124:13)\n' +
    '    at Object.pitch (/Users/***/Work/docs-api/node_modules/mini-css-extract-plugin/dist/loader.js:50:5)\n' +
    '    at LOADER_EXECUTION (/Users/***/Work/docs-api/node_modules/loader-runner/lib/LoaderRunner.js:132:14)\n' +
    '    at runSyncOrAsync (/Users/***/Work/docs-api/node_modules/loader-runner/lib/LoaderRunner.js:133:4)\n' +
    '    at /Users/***/Work/docs-api/node_modules/loader-runner/lib/LoaderRunner.js:191:3\n' +
    '    at handleResult (/Users/***/Work/docs-api/node_modules/loader-runner/lib/loadLoader.js:53:2)',
  compilerPath: undefined
}

Am I missing something here? Am I wrong in assuming that this would work similarly to how it did in v1?

[DanielPe05]

The problem only seems to exist when using the webpack bundler. After switching to Vite the issue is gone. I'm probably missing something obvious here but I thought I'd share those findings in case anyone else is struggling with this issue.

[meteorlxy]

I think you must have read the code in @vuepress/cli, and you are likely missing the following snippet:

https://github.com/vuepress/vuepress-next/blob/f8cd4a37d251e64ded2f1d7e8ca51afd81fd72d9/packages/%40vuepress/cli/src/commands/build/build.ts#L20-L22

But that could be a potential issue of @vuepress/bundler-webpack.

--- updated

This should be fixed in accc484, but you still need to set NODE_ENV=production to enable production mode.

[DanielPe05]

I see, this makes sense, thank you so much for looking into it! Is someone already working on the docs for the node API? I can find time and contribute it!

[meteorlxy]

It would be nice if you could help 😄

[DanielPe05]

I'm running into an issue when bundling my app using @vercel/ncc (I need to use ncc because I'm trying to combine node_modules into 1 file for distribution):

Could not resolve entry module (dist/lib/server.js)
Could not resolve entry module (dist/lib/client.js)

Do you know if there is something that could be done from the vuepress side to work around this issue?

This is the bundle script:

"bundle": "NODE_ENV=production ncc build --source-map --license licenses.txt"

[DanielPe05]

For some reason, ncc doesn't seem to create the lib directory after it bundles thing up