regeneratorRuntime is not defined

[lostboysbangarang]

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

[lostboysbangarang]

I am using Nuxt ssr

[hugoaboud]

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

• What exact steps have you tried? At which step did it broke?
• Include any error messages (with stack traces) you've received.
• Have you tried anything to fix it? What?

[lostboysbangarang]

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

[lostboysbangarang]

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

[lostboysbangarang]

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]

Error is in photo, points to these lines here

  _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]

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]

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]

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]

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

[hugoaboud]

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]

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