Using marp-core in Vuepress

[yudzuru]

Hi all, I'm trying to make a custom component for Marp in Vuepress. But I faced the following error and nothing is rendered.

vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to resolve async component: function () {
  return Promise.all(/*! import() */[__webpack_require__.e(0), __webpack_require__.e(2)]).then(__webpack_require__.bind(null, /*! ./doc/.vuepress/components/MarpWrapper */ "./doc/.vuepress/components/MarpWrapper.vue"));
}
Reason: ReferenceError: global is not defined

Any Ideas?

[yhatt]

We do never use async function and any Promises. Marp Core should not trigger this error.

I think you have a something wrong in setting up for VuePress. Probably it would rather ask in VuePress community than here.

[yudzuru]

Thanks for your reply.

I'm setting up Vuepress using the template in documentation. The project is brand new and the component is same as in https://github.com/marp-team/marp-vue

This error appear when I try to import @marp-team/marp-vue in the component. I am wondering if the promise is just to load the wrapper component into Vuepress, and global is not defined is the main cause of crashing...

[yhatt]

Translated issue from marp-core :arrow_forward: marp-vue. :truck:

Currently Marp Vue component is tested only for browser. I'm not so familiar to Vue and VuePress so I cannot tell for sure, but VuePress seems to require server-side rendering to build static assets. I guess that Marp Vue could not find browser-specific global variables such as window. https://ssr.vuejs.org/guide/universal.html#access-to-platform-specific-apis

Universal code cannot assume access to platform-specific APIs, so if your code directly uses browser-only globals like window or document, they will throw errors when executed in Node.js, and vice-versa.

Wrapping in <ClientOnly> component might help to use Marp Vue component.

[yudzuru]

Thanks for your input. I've just go through the code and found that these server side variables cannot be accessed through Vuepress .

By editing webpack config and using component, the plugin is working properly now.

// config.js
module.exports = {
  plugins: [
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"development"' })
  ],configureWebpack: (config, isServer) => {
    if (!isServer) {
      return{
        node: { global: true }
      }
    }
  }
}

Many Thanks again!