Skip to content
This repository has been archived by the owner on Jan 1, 2025. It is now read-only.

it is possible to use vm2 with vue-server-renderer? #188

Open
cron13 opened this issue Feb 5, 2019 · 2 comments
Open

it is possible to use vm2 with vue-server-renderer? #188

cron13 opened this issue Feb 5, 2019 · 2 comments

Comments

@cron13
Copy link

cron13 commented Feb 5, 2019

Hi!
i want to use vm2 with vue-server-renderer? can someone help me with that?
I'm trying to do something like this:

const fs = require('fs');
const express = require('express');
const { createBundleRenderer } = require('vue-server-renderer');
const {NodeVM} = require('vm2');

const app = express();

app.get('*', (req, res) => {
  let bundleRenderer = createBundleRenderer(
    require('./dist/vue-ssr-bundle.json'),
    {
      template: fs.readFileSync('./public/index.html', 'utf-8')
    }
  );

  const vm = new NodeVM({
    sandbox: {
      bundleRenderer,
      res,
      req
    },
    require: {
      external: true,
    }
  })
  vm.run(`
    bundleRenderer
      .renderToStream({url: req.path})
      .pipe(res);
  `, 'server.js')
});

app.listen(8090);

but i got error [Vue warn]: Error in beforeCreate hook: "TypeError: 'defineProperty' on proxy: trap returned truish for adding property 'styles' that is incompatible with the existing property in the proxy target"

What am I doing wrong?
Thanks!

@bbtx0
Copy link

bbtx0 commented Sep 22, 2019

Hi @cron13, I am trying to achieve the same. Did you have any luck?

@tansaku
Copy link

tansaku commented Oct 20, 2021

I appear to have got it working:

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()
const { NodeVM } = require('vm2')
const { run } = require('mocha-vm');

const external = ['mocha', 'chai'];
const builtin = ['path', 'util', 'fs'];

const vm = new NodeVM({
  console: 'inherit',
  sandbox: {},
  require: {
    external,
    builtin
  },
  root: __dirname
});

process.on('uncaughtException', (err) => {
  console.error('uncaughtException (from vm2?):', err);
})

server.get('*', (req, res) => {
  try{
    const app = new Vue({
      data: {
        url: req.url
      },
      template: `<div>The visited URL is: {{ url }}</div>`
    })

    renderer.renderToString(app, (err, html) => {

      code = 'console.log(1+1)'
      result = vm.run(code, "myfile.js")
    
      res.end(`
        <!DOCTYPE html>
        <html lang="en">
          <head><title>Hello</title></head>
          <body>
            <div>${html}</div>
            <div>${err}</div>
            <div>${JSON.stringify(result)}</div>
          </body>
        </html>
      `)
    })
  } catch(err) {
    console.log(err);
  }
})

server.listen(8080)

although I get the result on the server console - not in the html output - probably need to wait for a promise to complete or something.

personally what I really want to do is get mocha running in vm2 in vue-server-renderer, which I'm currently stuck on here: #303 (comment)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

4 participants