hugoaboud / nuxt-terminal

Shell-like Terminal + OS simulator for Vue/Nuxt.js, powered by xtermjs
MIT License
2 stars 0 forks source link

regeneratorRuntime is not defined #1

Open lostboysbangarang opened 2 years ago

lostboysbangarang commented 2 years ago

I've followed the instructions exactly, I've tried modifying the node_module and repacking, nothings working. Pls help

lostboysbangarang commented 2 years ago

I am using Nuxt ssr

hugoaboud commented 2 years ago

Hi! Please give more details about your issue so I'm able to help:

lostboysbangarang commented 2 years ago

Ahh! I should have checked this earlier. I started a new nuxt project to replicate steps. One moment for detail

lostboysbangarang commented 2 years ago
<NuxtTerminal 
    :user="user"
    :domain="domain"
    :welcome="welcome"
    :filesystem="filesystem"
    :apps="apps"
/>
lostboysbangarang commented 2 years ago

I have this set as my Terminal.vue file

<template>
    <div>
        <NuxtTerminal 
            :user="user"
            :domain="domain"
            :welcome="welcome"
            :filesystem="filesystem"
            :apps="apps"
        />
    </div>
</template>

<script lang="ts">
    import Vue from 'vue'
    import { Filesystem, Folder, File, NuxtTerminalApp } from 'nuxt-terminal'

    export default Vue.extend({
    data: () => ({

        user: 'root',
        domain: 'test',
        welcome: 'Hello world!',

        filesystem: new Filesystem([
        new Folder('home', [
            new Folder('user', [
            new File('passwords.txt', 'user:123456')
            ])
        ]),
        new File('README', 'This is a client-side bash-like terminal! Enjoy!')
        ]),

        apps: []
    })
    })

</script>

<style lang="scss" scoped>

</style>

And this in my nuxt config

  plugins: [
    {src: "~plugins/dragQueen.js", ssr: false},
    '~node_modules/nuxt-terminal/plugin.client.js',
  ],

This is where it's being called

               <div class="body">
                    <transition name="halfsies">
                        <!-- <TerminalAdd /> -->
                        <Terminal />
                    </transition>
                </div>

And no I'm not homophobic, dragQueen is the name of my dragable div which I am trying to place the terminal into.

lostboysbangarang commented 2 years ago

Error is in photo, points to these lines here Screenshot_20220207_020222

  _createClass(cat, [{
    key: "main",
    value: function () {
      var _main = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(args) {
        var node;
        return regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                if (!(args.length < 2)) {
                  _context.next = 3;
                  break;
                }
lostboysbangarang commented 2 years ago

What I've Done

I've tried editing the node_module directly to see if I could get results. From

'use strict';var Vue=require('vue');function _interopDefaultLegacy(e){return e&&typeof e==='object'&&'default'in e?e:{'default':e}}var Vue__default=/*#__PURE__*/_interopDefaultLegacy(Vue);function ownKeys(object, enumerableOnly) {
  var keys = Object.keys(object);
...

To

'use strict';
var Vue=require('vue');
function _interopDefaultLegacy(e){return e&&typeof e==='object'&&'default'in e?e:{'default':e}}var Vue__default=/*#__PURE__*/_interopDefaultLegacy(Vue);function ownKeys(object, enumerableOnly) { var keys = Object.keys(object);

Finally

'use strict';
var Vue=require('vue');
var regeneratorRuntime = require("regenerator-runtime/runtime");
function _interopDefaultLegacy(e){return e&&typeof e==='object'&&'default'in e?e:{'default':e}}var Vue__default=/*#__PURE__*/_interopDefaultLegacy(Vue);function ownKeys(object, enumerableOnly) { var keys = Object.keys(object);
...

And that got me to a Reference error where self is not defined.

Alternate Route

I also tried this in nuxt.config.js, same result.

build: {
    vendor: ['xterm'],
    extend(config, isClient) {
      if(isClient) {
        regeneratorRuntime = require("regenerator-runtime/runtime");
        config.module.rules.push({

        })
        console.dir(config.module.rules.push)
      }
    }
  }
lostboysbangarang commented 2 years ago

There's a similar instance where babel causes this as seen in https://github.com/nuxt/nuxt.js/issues/934#issuecomment-309782694 this comment

hugoaboud commented 2 years ago

When opening Issues and asking questions, please try to write all you need in a single comment, it helps keeping things organized.

I was able to reproduce the error using ssr: true.

Apparently the import on Terminal.vue is executed server side even on client-only mode, and that's what breaks it. The problem seems to be using async and other things, which it triggers a different babel preset and requires a package we do not have. I have tried some fixes with no success, and I can't spend much more time on it now, so if you find anything please let me know.

A workaround is requiring the module on the mounted hook, so it's only called on client:

<script lang="ts">
    import Vue from 'vue'

    export default Vue.extend({
        data: () => ({ 
            user: 'root',
            domain: 'test',
            welcome: 'Hello world!',
            filesystem: null,        
            apps: []
        }),
        mounted() {
            const { Filesystem, Folder, File, NuxtTerminalApp } = require('nuxt-terminal');
            this.filesystem = new Filesystem([
                new Folder('home', [
                    new Folder('user', [
                    new File('passwords.txt', 'user:123456')
                    ])
                ]),
                new File('README', 'This is a client-side bash-like terminal! Enjoy!')
            ]);
            this.apps = []
        }
    })

</script>

That's not a very clean solution, so if this tool is useful to you, please try to arrange a fix and make a Pull Request, since I won't have time to work on it soon.

lostboysbangarang commented 2 years ago

I'll try it! And golly that sounds like fun. My bad! First time poster to a github issue.

hugoaboud commented 2 years ago

Don't worry, we've all been there :)

Whenever you open an issue, make sure to post the solution you've found so it can be flagged as Closed, and so some poor soul going through the same problem on the future can have a slightly better day.

lostboysbangarang commented 2 years ago

Got it, I haven't figured out a fix yet, but will probably dig into it after this application