TypeError: Cannot read property 'layout' of undefined

[ankurp]

Error at this expression require("./dagre").layout; when loading the full mermaid script from dist folder of this github project.

[knsv]

Hello there!

Could you please provide a little bit more information? I want to be able to reproduce your problem. Whats the url you use, in wha context to you use mermaid etc

Thanks!

[ankurp]

I have a Single Page app loading mermaid using requirejs. We have out own requirejs config and loading mermaid fails at line require("./dagre").layout; where that require returns undefined and hence error out.

This happens after init is called.

[knsv]

This might be a conflict between the require in browserify and the one in requirejs. Have you tried loading mermaid outside of requirejs and if so before or after your requirejs script?

[knsv]

@ankurp: Is still problem for you?

[ankurp]

@knsv I haven't tried but will let you know when I do next time.

[bollwyvl]

To recap from #127: the IPython/Jupyter notebook would be a wonderful place to use mermaid. Its frontend has markdown as a first-class citizen, so hand editing would already be very natural... and it would be easy to generate mermaid DSL from any number of the supported backends. Sadly, we encounter the dagre.layout issue: here are my explorations of the kinds of errors:
http://nbviewer.ipython.org/gist/bollwyvl/7b4729c21b3d1ad4c31e

Aside from the dagre error, some things appear to be broken around he and lodash.

There is no option to not have require, or change the order in which things load, and punting to an iframe is pretty much unacceptable. So let's solve this thing.

I'd love to pitch in trying to solve this. As i mention on the dupe, there could be some build options that might just solve this, or it may be appropriate to create a separate AMD build.

[knsv]

@bollwyvl, thanks for your effort. Help is always welcome!

I tested loading mermaid using requirejs and could replicate the TypeError. After some reading I found that require creates a define method that confuses the package created by browserify. To handle that I have wrapped mermaid so that the requires define function remains undefined in mermaids context. For my test page this removed the error. I will commit the fix and would appreciate if you could try it in your context before release.

[bollwyvl]

I think we have a winner, at least for nbviewer:
http://nbviewer.ipython.org/gist/bollwyvl/d5a120156216797c7132

That will render two separate embedded mermaid figures. Great!

Thanks so much @knsv!

A few remaining issues:

• Looks like the IPython notebook (and likely many other sites) will claim many of the classes that are in use. The one that jumps out at me is label, which bootstrap claims. node, path is something else.
• when editing, i am naively calling mermaid.init() every time now, which doesn't work very well... ids get reused, dogs and cats are living together. mass hysteria.
  • Some better access to what gets rendered would be fabulous: perhaps a second argument to init could be an element, node list or selector that would get used,
  • ...as well as a persistent counter for indices that will never repeat:

var init = function (sequenceConfig, arr) {
  arr = arr == null ? document.querySelectorAll('.mermaid')
    : typeof arr === "string" ? document.querySelectorAll(arr)
    : arr instanceof Node ? [arr]
    : arr;
...
  var id = 'mermaidChart' + mermaid.nextIdx++;
...

Looking good already, though!

[bollwyvl]

Actually just tried that hack out: works great!
https://gist.github.com/bollwyvl/53e64cdafba38461943b
(sorry, but I don't have a build environment handy... will happily raise a PR if you like)

Here is a notebook that uses it:
http://nbviewer.ipython.org/gist/bollwyvl/e51b4e724f0b82669c84

If you look at the source, you'll see that there are no dirty tricks, like embedding the output:
https://gist.github.com/bollwyvl/e51b4e724f0b82669c84

Note that you can try out the whole shebang by downloading the ipynb file up there, and dragging into the tree page you get when you hit http://tmpnb.org

I've added a touch of CSS to make it visible in the bootstrap environment.

Note that it is still breaking things, with the mismatched anonymous define error. Perhaps in browserify, one of the deglobalify/deamdify filters would keep this from leaking out into the require scope.

[bollwyvl]

Ha, I didn't even circle back and try the original failing approaches. Mermaid as of f4b2211 can be directly loaded with require:

require(["./wherever/is/mermaid.full.js"], function(d3){ mermaid.init(); });

I would say that that closes the issue, as it works now, even if it is slightly outside what a requirejs user would expect: it still installs itself on window.mermaid, as opposed to returning a reference to itself... weirdly, you get back the bundled d3, which is likely not the desired effect, but that's a different issue.

As to its integration into IPython (my original goal): here is a working notebook that uses require to both do an initial draw (as on nbviewer) as well as the live-editing:
http://nbviewer.ipython.org/gist/bollwyvl/e160958fdc8656dc8d3d

The only error now is because the actual editor scripts are not available in nbviewer, but this is fine!

I'll raise separate PRs for my hacks!

[bollwyvl]

Also #134.

[knsv]

I am going though the issues and compiling a roadmap. Is this still an issue or can I close it? @ankurp @bollwyvl

[bollwyvl]

I think this is solved with the umd stuff.

On 13:22, Wed, May 13, 2015 Knut Sveidqvist [email protected]
wrote:

I am going though the issues and compiling a roadmap. Is this still an
issue or can I close it? @ankurp https://github.com/ankurp @bollwyvl
https://github.com/bollwyvl

—
Reply to this email directly or view it on GitHub
#37 (comment).

[knsv]

OK, will close then. Thx!