Open lostboysbangarang opened 2 years ago
I am using Nuxt ssr
Hi! Please give more details about your issue so I'm able to help:
Ahh! I should have checked this earlier. I started a new nuxt project to replicate steps. One moment for detail
<NuxtTerminal
:user="user"
:domain="domain"
:welcome="welcome"
:filesystem="filesystem"
:apps="apps"
/>
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.
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;
}
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)
}
}
}
There's a similar instance where babel causes this as seen in https://github.com/nuxt/nuxt.js/issues/934#issuecomment-309782694 this comment
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.
I'll try it! And golly that sounds like fun. My bad! First time poster to a github issue.
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.
Got it, I haven't figured out a fix yet, but will probably dig into it after this application
I've followed the instructions exactly, I've tried modifying the node_module and repacking, nothings working. Pls help