Tiddlymap on Node.js seems to cause problems when trying to export to static

[gesundelehre]

Can someone maybe help and tell me what the problem here is?

This is the error-message i get in node.js (i use node js portable)

C:\PathToNodePortable\Data>tiddlywiki gesundelehre --build
static

$:/plugins/felixhayashi/tiddlymap/js/lib/utils/tmap:11
var _vis=require("$:/plugins/felixhayashi/vis/vis.js");var _vis2=_interopRequire
Default(_vis);var _exception=require("$:/plugins/felixhayashi/tiddlymap/js/excep
tion");var _basic=require("$:/plugins/felixhayashi/tiddlymap/js/lib/utils/basic"
);var basicUtils=_interopRequireWildcard(_basic);var _wiki=require("$:/plugins/f
elixhayashi/tiddlymap/js/lib/utils/wiki");var wikiUtils=_interopRequireWildcard(
_wiki);function _interopRequireWildcard(e){if(e&&e.__esModule){return e}else{var
t={};if(e!=null){for(var r in e){if(Object.prototype.hasOwnProperty.call(e,r))t
[r]=e[r]}}t.default=e;return t}}function interopRequireDefault(e){return e&&e.
_esModule?e:{default:e}}var getLabel=exports.getLabel=function e(t,r){var i=wiki
Utils.getTiddler(t);return i&&i.fields[r]?i.fields[r]:i.fields.title};var getIte
rableCollection=exports.getIterableCollection=function e(t){return t instanceof
_vis2.default.DataSet?t.get():t};var getValues=exports.getValues=function e(t){i
f(Array
ReferenceError: window is not defined
at Object.e [as getDataUri] ($:/plugins/felixhayashi/tiddlymap/js/lib/utils/
tmap:11:1997)
at command.datauri ($:/plugins/felixhayashi/tiddlymap/js/macro/tmap:10:1015)

at run ($:/plugins/felixhayashi/tiddlymap/js/macro/tmap:10:675)
at Widget.evaluateMacroModule ($:/core/modules/widgets/widget.js:174:21)
at Widget.getVariable ($:/core/modules/widgets/widget.js:101:14)
at MacroCallWidget.execute ($:/core/modules/widgets/macrocall.js:51:18)
at MacroCallWidget.render ($:/core/modules/widgets/macrocall.js:32:7)
at $:/core/modules/widgets/widget.js:346:15
at $tw.utils.each (C:\PathToNodePortable\Data\node_modu

les\tiddlywiki\boot\boot.js:69:12)
at Widget.renderChildren ($:/core/modules/widgets/widget.js:345:12)

C:\PathToNodePortable\Data>

I use the latest Tiddlywiki as well as the latest Tiddlymap version.

the node.js is configured as follows (tiddlywiki.info-file):

{
"description": "Basic client-server edition",
"plugins": [
"tiddlywiki/tiddlyweb",
"tiddlywiki/filesystem",
"tiddlywiki/highlight"
],
"themes": [
"tiddlywiki/vanilla",
"tiddlywiki/snowwhite"
],
"build": {
"index": [
"--rendertiddler",
"$:/core/save/all",
"index.html",
"text/plain"
],
"empty": [
"--rendertiddler","$:/editions/de-AT-DE/download-empty","empty.html","text/plain",
"--rendertiddler","$:/editions/de-AT-DE/download-empty","empty.hta","text/plain"
],
"favicon": [
"--savetiddler","$:/favicon.ico","favicon.ico"
],
"externalimages": [
"--savetiddlers",
"[is[image]]",
"images",
"--setfield",
"[is[image]]",
"_canonical_uri",
"$:/core/templates/canonical-uri-external-image",
"text/plain",
"--setfield",
"[is[image]]",
"text",
"",
"text/plain",
"--rendertiddler",
"$:/plugins/tiddlywiki/tiddlyweb/save/offline",
"externalimages.html",
"text/plain"
],
"static": [
"--rendertiddler",
"$:/core/templates/static.template.html",
"static.html",
"text/plain",
"--rendertiddler",
"$:/core/templates/alltiddlers.template.html",
"alltiddlers.html",
"text/plain",
"--rendertiddler",
"$:/core/templates/static.template.css",
"static/static.css",
"text/plain",
"--rendertiddlers",
"[!is[system]]",
"$:/core/templates/static.tiddler.html",
"static",
"text/plain"
]
}
}

Hopefully someone knows where the Problem lies.
Thanks

[Jermolene]

Hi @gesundelehre it looks like you are building a static version of your site with the --build static command. However, the error message indicates that TiddlyMap doesn't support being rendered on the server (under Node.js, widgets are rendered to a simulation of the DOM that doesn't support everything that's visible in a browser; in this case it is the lack of a window object that is causing TiddlyMap to trip up).

[felixhayashi]

Hi @gesundelehre,

@Jermolene is right, seems like I accidentally reference the window object in my code. I'll take care of this once I find the time.

Best wishes
Felix

[felixhayashi]

Hi @gesundelehre,
should be fixed now. let me know if it is still not working.
Best wishes
Felix

[dorneanu]

Hi! I still have the same issue. Here are some details:

Plugin version

[victor@arch64 wiki]$ head -n 16 tiddlers/\$__plugins_felixhayashi_tiddlymap.tid 
author: Felix Küppers
core-version: >=5.1.5
created: 20180814083337307
dependents: $:/plugins/felixhayashi/vis
depends: $:/plugins/felixhayashi/vis
description: TiddlyMap – Map drawing and topic visualization for your wiki
list: readme license
modified: 20180814083337307
plugin-type: plugin
released: Sun, 17 Sep 2017 16:54:43 GMT
source: https://github.com/felixhayashi/TW5-TiddlyMap
suggested: $:/plugins/felixhayashi/topstoryview
title: $:/plugins/felixhayashi/tiddlymap
type: application/json
version: 0.13.4+9665

Render CSS

[victor@arch64 wiki]$ tiddlywiki --rendertiddler "$:/core/templates/static.template.css" "static/static.css" text/plain
$:/plugins/felixhayashi/tiddlymap/js/macro/tmap:10
var _EdgeType=require("$:/plugins/felixhayashi/tiddlymap/js/EdgeType");var _EdgeType2=_interopRequireDefault(_EdgeType);var _ViewAbstraction=require("$:/plugins/felixhayashi/tiddlymap/js/ViewAbstraction");var _ViewAbstraction2=_interopRequireDefault(_ViewAbstraction);var _utils=require("$:/plugins/felixhayashi/tiddlymap/js/utils");var _utils2=_interopRequireDefault(_utils);function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var name="tmap";var params=getParamSlots(5);function run(){this.substVarRefs=this.substituteVariableReferences;var e=command[arguments[0]];var t=null;if(typeof e==="function"){var r=Array.prototype.slice.call(arguments,1);t=e.apply(this,r)}return typeof t==="string"?t:""}function getParamSlots(e){var t=[];for(var r=0;r<e;r++){t.push({name:"arg"+r})}return t}var command=_utils2.default.makeHashMap();command.basename=function(e){var t=this.getVariable("currentTiddler");return _utils2.default.getBasename(t,e)};command.da

ReferenceError: $tm is not defined
    at MacroCallWidget.command.option ($:/plugins/felixhayashi/tiddlymap/js/macro/tmap:10:2686)
    at MacroCallWidget.run ($:/plugins/felixhayashi/tiddlymap/js/macro/tmap:10:675)
    at MacroCallWidget.Widget.evaluateMacroModule ($:/core/modules/widgets/widget.js:195:21)
    at MacroCallWidget.Widget.getVariableInfo ($:/core/modules/widgets/widget.js:113:14)
    at MacroCallWidget.execute ($:/core/modules/widgets/macrocall.js:52:23)
    at MacroCallWidget.render ($:/core/modules/widgets/macrocall.js:32:7)
    at $:/core/modules/widgets/widget.js:369:15
    at Object.$tw.utils.each (/usr/lib/node_modules/tiddlywiki/boot/boot.js:69:12)
    at ElementWidget.Widget.renderChildren ($:/core/modules/widgets/widget.js:368:12)
    at ElementWidget.render ($:/core/modules/widgets/element.js:41:7)

Any ideas? Thanks in advance.

Best regards,
Victor

[felixhayashi]

Hi @dorneanu, looks like in your case it is caused not by TiddlyMap accessing the window as stated in the OP but this time the $tm variable is causing the trouble :(
I will have a look at it.

[felixhayashi]

@dorneanu fixed this please check if it works now. thanks.

[dorneanu]

Hi,

I'm following the installation instructions from README (Installation -> option 2). I've copied everything to plugins:

$ ls -l
drwxr-xr-x 4 victor victor 12288 Oct  5 09:40 images
drwxr-xr-x 3 victor victor  4096 Oct  5 13:58 output
drwxr-xr-x 4 victor victor  4096 Oct 15 14:09 plugins
-rw-r--r-- 1 victor victor   179 Oct  5 09:40 start.sh
drwxr-xr-x 2 victor victor 86016 Oct 15 14:06 tiddlers
-rw-r--r-- 1 victor victor  1757 Oct 15 14:22 tiddlywiki.info

$ tree -L 2 plugins
plugins
├── felixhayashi
│   ├── hotzone
│   ├── tiddlymap
│   ├── topstoryview
│   └── vis
└── maps
    └── felixhayashi

7 directories, 0 files

$ head -n 20 tiddlywiki.info 
{
    "description": "Basic client-server edition",
    "plugins": [
        "tiddlywiki/tiddlyweb",
        "tiddlywiki/filesystem",
        "tiddlywiki/highlight",
        "felixhayashi/tiddlymap",
        "felixhayashi/vis",
        "felixhayashi/hotzone",
        "felixhayashi/topstoryview"
    ],
...

Now I can start tiddlywiki again:

$ tiddlywiki . --server 8080 "$:/core/save/all" "text/plain" "text/html" bla bla 0.0.0.0 
Warning: missing plugin.info file in /home/victor/work/repos/tiddlywiki/wiki/plugins/felixhayashi
Warning: missing plugin.info file in /home/victor/work/repos/tiddlywiki/wiki/plugins/maps
Serving on 0.0.0.0:8080
(press ctrl-C to exit)
 syncer-server-filesystem: Dispatching 'save' task: $:/StoryList 
 filesystem: Saved file /home/victor/work/repos/tiddlywiki/wiki/tiddlers/$__StoryList.tid 

However I can't see the plugins in $:/ControlPanel. Am I missing something?

[felixhayashi]

generally speaking, everything looks fine, except:

── maps
      └── felixhayashi

don't know why maps exists in the TiddlyMap-repo's dist folder.. looks like a mistake in my gulp build script. please remove maps folder. does it work then?

on my machine tiddlywiki ./src/ --server 8080 "$:/core/save/all" "text/plain" "text/html" bla bla 0.0.0.0 works fine, I can see the plugins.

are you sure your $ tree -L 2 plugins is in the right global installation of tiddlywiki?

[dorneanu]

don't know why maps exists in the TiddlyMap-repo's dist folder.. looks like a mistake in my gulp build script. please remove maps folder. does it work then?

I've removed the maps folder.

are you sure your $ tree -L 2 plugins is in the right global installation of tiddlywiki?

The plugins is inside my root folder:

$ ls -l
total 116
drwxr-xr-x 4 victor victor 12288 Oct  5 09:40 images
drwxr-xr-x 3 victor victor  4096 Oct  5 13:58 output
drwxr-xr-x 3 victor victor  4096 Oct 19 10:55 plugins
-rw-r--r-- 1 victor victor   179 Oct  5 09:40 start.sh
drwxr-xr-x 2 victor victor 86016 Oct 15 14:06 tiddlers
-rw-r--r-- 1 victor victor  1757 Oct 15 14:22 tiddlywiki.info

I still can not see the plugins. I'm using Tiddlywiki 5.1.17. Perhaps I'm missing something. Do I need to "activate" the plugins first?!

EDIT: I also found this: https://groups.google.com/forum/#!topic/tiddlywiki/5sIyj0h38pc. Maybe it's related to this?

[dorneanu]

I've started with a completely new TW installation:

$ tiddlywiki newwiki --init server
$ cd newwiki
$ tree -L 3 .
.
├── plugins
│   └── felixhayashi
│       ├── hotzone
│       ├── tiddlymap
│       ├── topstoryview
│       └── vis
├── tiddlers
│   └── $__StoryList.tid
└── tiddlywiki.info

7 directories, 2 files

$ cat tiddlywiki.info
$ cat tiddlywiki.info                                                                                                                                                                              
{                                                                                                                                                                                                        
    "description": "Basic client-server edition",                                                                                                                                                        
    "plugins": [                                                                                                                                                                                         
        "tiddlywiki/tiddlyweb",                                                                                                                                                                          
        "tiddlywiki/filesystem",                                                                                                                                                                         
        "tiddlywiki/highlight",                                                                                                                                                                          
        "felixhayashi/topstoryview",                                                                                                                                                                     
        "felixhayashi/vis",                                                                                                                                                                              
        "felixhayashi/hotzone",                                                                                                                                                                          
        "felixhayashi/tiddlymap"
    ],
    "themes": [
        "tiddlywiki/vanilla",
        "tiddlywiki/snowwhite"
    ],
...

Still no success :(

[felixhayashi]

hmm. ok @dorneanu will also try to start from scratch with an empty wiki and see if it is still failing. Will give you a ping once I have my results.

[felixhayashi]

@dorneanu

Ok I did the following steps and did everything completely from scratch and everything went fine and the map is displayed:

• I installed a fresh new tiddlywiki 5.1.17 globally via npm install -g tiddlywiki
• I went to the place where tiddlywiki is installed (check via command: which tiddlywiki)
• in the tiddlywiki npm package folder I went into plugins folder
  • per default there is just a tiddlywiki folder inside plugins with several default plugins
• I followed instructions here: https://github.com/felixhayashi/TW5-TiddlyMap
  • downloaded plugin folders
    
  • extracted dist folder of plugins
    
• created an empty wiki with just a tiddlywiki.info file
  
  • tiddlywiki.info:

  • {
      "description": "Basic client-server edition",
      "plugins": [
          "tiddlywiki/tiddlyweb",
          "tiddlywiki/filesystem",
          "tiddlywiki/highlight",
          "felixhayashi/tiddlymap",
          "felixhayashi/vis",
          "felixhayashi/hotzone",
          "felixhayashi/topstoryview"
      ]
      "themes": [
        "tiddlywiki/vanilla",
        "tiddlywiki/snowwhite"
      ],
      "languages": [
        "en-US",
        "de-DE"
      ],
      "build": {
        "index": ["--rendertiddler","$:/core/save/all","demo.html","text/plain"]
      },
      "config": {
        "retain-original-tiddler-path": true
      }
    }
    

• started server:

  • tiddlywiki . --server 8080 "$:/core/save/all" "text/plain" "text/html" bla bla 0.0.0.0
    

Everything works, I can see the map tab.

Can you please repeat these steps or check whether you did exactly the same?

• Felix

[dorneanu]

Wow, thanks for your effort and the explanations! I'll try to reproduce the steps ASAP.

[dorneanu]

So I was able to install tiddlymap. The significant information was:

in the tiddlywiki npm package folder I went into plugins folder
per default there is just a tiddlywiki folder inside plugins with several default plugins

Maybe you can emphasize that in the documentation (that the plugins have to be installed in the directory where the tiddlywiki plugins reside).

To whom it might be interesting: Since I'm running tiddlywiki dockerized I had to copy all the relevant files to /usr/lib/node_modules/tiddlywiki/plugins/. In my Dockerfile I've added:

FROM mhart/alpine-node
...
COPY plugins/felixhayashi /usr/lib/node_modules/tiddlywiki/plugins/felixhayashi
...

Rendering static files and CSS works now. ✔️ Thanks for this awesome plugin and contributing to Tiddlywiki. This tool is definitely underestimated :)

Gruss nach Hamburg aus Berlin City 👍

[felixhayashi]

Hi @dorneanu glad it works now 😃 – I am also glad to hear you still like the software (I remember a few years ago you already gave me positive feedback in one of your blog articles).

Thanks for pointing out the part that helped you to solve the problem, I will definitely adjust the installation description in the README.md (and also add the screenshots).

The node.js installation is a bit tricky due to unwrapping the zips in the right directory and also because tiddlywiki will erase the "plugins" folder when updating to a new version. but of course with your docker setup you can just recompile your image and everything is cool 👍

Grüße zurück nach Berlin und schönes Wochenende ;)
Felix