Steal refuses to load TinyMCE

StealJS
21

File a bug in done-ssr about document.location. I didn’t know such a property exists. We already set window.location so we can do the same for document.location.

But it’s entirely possible that this module can’t be loaded by our virtual dom. if that’s the case you should turn it off in Node like so:

{
  "system": {
    "envs": {
      "server-development": {
        "map": {
          "tinymce/tinymce": "@empty"
        }
      },
      "server-production": { same as above }
    }
  }
}
22

Ah, ok. This has nothing to do with steal. It has everything to do w/ the very simple DOM (can-simple-dom) we use to render our site. window.location.href exists, but not document.location.href.

There are three possible solutions:

  1. Ask @matthewp on how you could swap to something like JSDom instead of can-simple-dom that might support what’s needed to load tinymce.
  2. Add document.location.href to can-simple-dom (or find a plugin that can do that).
  3. Make it so tinymce is not run server-side. https://donejs.com/bitballs.html#section=section_TurnoffSSR

#3 is the easiest, but might not be satisfactory depending on what you want your users to see.

23

Regarding preventing tinymce from running server-side, the bitballs solution wont work here. You’d have to use @matthewp’s solution.

This is because the module itself seems like it is looking for document.location.href, not initialization of some export of the module.

What that means is that a module that looks like:

require("jquery")
document.location.href

will break and require matthew’s "empty" method.

But if it was written like:

require("jquery");
module.exports = function(){  document.location.href }

It could use the bitballs way of doing it.

24

I’m going to create a demo real quick and see if setting document.location will do the trick.

25

Ok, I was able to get it to load locally by making the follow changes:

  1. After this line: https://github.com/canjs/canjs/blob/master/util/vdom/vdom.js#L6 I added:
  • global.document.location = {href:"/"};
  1. After this line: https://github.com/canjs/can-simple-dom/blob/master/lib/simple-dom/document.js#L102 I added
  • first.src = "";

And it was able to load. However this is before trying to use it so it’s hard telling what is required when you want to start displaying stuff.

So I would probably go with the map to @empty method. Note that for this to work your app that actually imports the module should detect if it’s running in Node like:

import tinymce from "tinymce/tinymce";
import platform from "steal-platform";

if(platform.isNode) {
  // tinymce is undefined
} else {
  // Use tinymce
}
1 Like
26

You asked me to file a bug with done-ssr, do you still want this?

27

A better way I think would be to do:

if(tinymce) {
  // tinymce is undefined
} else {
  // Use tinymce
}
28

You can file a bug with canjs / can-simple-dom about those two changes I needed to do. Not sure what is the “correct” fix, but good to think about.

29

I like the other way slightly better because it’s explicit, checking if tinymce is undefined doesn’t explain why it is undefined.

30

I don’t like if(platform.isNode) { mostly because it will be true for NW.js