Steal refuses to load TinyMCE

StealJS
1

I have two projects, once is a traditional CanJS + StealJS application and the other a DoneJS application (from scratch).
I’m trying to get TinyMCE loaded.

I get a similar error in either project:

TypeError: Error loading "node_modules/tinymce/tinymce" at http://10.0.62.131:8080/node_modules/tinymce/tinymce.js(…) "TypeError: Error loading "node_modules/tinymce/tinymce" at http://10.0.62.131:8080/node_modules/tinymce/tinymce.js
Error loading "node_modules/tinymce/tinymce" from "tiny@0.0.0#index.stache!done-autorender@0.7.3#autorender" at http://10.0.62.131:8080/src/index.stache
AMD module node_modules/tinymce/tinymce did not define

For the traditional stealjs app, I have defined an entry under system.meta

     "node_modules/tinymce/tinymce.js" : {
            "format": "global",
            "exports": "tinymce"
      }

but this doesn’t seem to have any affect.

2

if tinymce is installed in node_modules, you should configure it like:

"tinymce/tinymce": {"format":"global", "exports": "tinymce"}
3

for Done yes, but for a traditional steal/can app no?

4

In the done app, with the above line I get the following on startup:

Error evaluating file:/home/pault/tiny/node_modules/tinymce/tinymce.js
Cannot read property 'href' of undefined
5

what if you try "tinymce": {"format":"global", "exports": "tinymce"}

6

no difference.

Note, that this is a fresh bare bones donejs install with nothing other than an inport of tinymce.

7

if that doesn’t work … just to help debug, if you put in tinymce.js "format global";

What happens?

8

same result as above.

9

Ok, what line does

happen?

Can you point me to where I can look at tinymce.js online?

10

btw, how are you importing tinymce ?

11

importing in index.stache as
<can-import from="node_modules/tinymce/"/>

Full Error:

Potentially unhandled rejection [3] TypeError: Error loading "tiny@0.0.0#index.stache!done-autorender@0.7.3#autorender" at file:/home/pault/tiny/src/index.stache
Error evaluating file:/home/pault/tiny/node_modules/tinymce/tinymce.js
Cannot read property 'href' of undefined
    at Object.EditorManager.setup (evalmachine.<anonymous>:38682:39)
    at each (evalmachine.<anonymous>:39231:16)
    at evalmachine.<anonymous>:45:29
    at require (evalmachine.<anonymous>:28:12)
    at define (evalmachine.<anonymous>:44:3)
    at evalmachine.<anonymous>:38539:1
    at evalmachine.<anonymous>:45960:3
    at doEval (/home/pault/tiny/node_modules/steal/node_modules/steal-systemjs/dist/system.src.js:2041:10)
    at __eval (/home/pault/tiny/node_modules/steal/node_modules/steal-systemjs/dist/system.src.js:1958:7)
    at Loader.exec [as __exec] (/home/pault/tiny/node_modules/steal/node_modules/steal-systemjs/dist/system.src.js:339:5)

https://raw.githubusercontent.com/tinymce/tinymce-dist/master/tinymce.js

12

Ah, you shouldn’t put node_modules in your node_modules import. You’ll notice we don’t do that in either of the guides or bitballs.

Simply write <can-import from="tinymce"/>

This might not fix your current problem, but you should import using package names. Then you should be able to configure system.meta the way I described above.

13

I had originally tried that, but then I get the following error:

Error loading "tinymce@4.3.8#index" from "tiny@0.0.0#index.stache!done-autorender@0.7.3#autorender" at file:/home/pault/tiny/src/index.stache
ENOENT, open '/home/pault/tiny/node_modules/tinymce/index/index.js'

The Only way I could get it to load that way is to change the import line to

<can-import from="tinymce/tinymce.js"/>
And then I get the href error again.

I almost forgot to mention an important detail. We’ve been running this in our can/steal project in live for months now. This is only happening with the latest steal as I’m trying to upgrade to the latest libraries. Works fine with steal 0.12.7 but failes with 0.15.3. (again, this particular example is not a donejs project).

14

Do it with:

<can-import from="tinymce/tinymce"/>

This looks like the code where it breaks:

			var self = this, baseURL, documentBaseURL, suffix = "", preInit, src;

			// Get base URL for the current document
			documentBaseURL = document.location.href;

This is breaking during server side rendering or something in node? Why would document.location.href not exist?

15

can you please post the package.json for tinymce

16 
{
  "name": "tinymce",
  "version": "4.3.8",
  "description": "Web based JavaScript HTML WYSIWYG editor control.",
  "license": "LGPL-2.1",
  "keywords": [
    "editor",
    "wysiwyg",
    "tinymce",
    "richtext",
    "javascript",
    "html"
  ],
  "bugs": {
    "url": "http://www.tinymce.com/develop/bugtracker.php"
  },
  "_id": "tinymce@4.3.8",
  "scripts": {},
  "_shasum": "7f5b98973e93a40ff5c488bf94d3aebc6849c9f0",
  "_from": "tinymce@",
  "_resolved": "https://registry.npmjs.org/tinymce/-/tinymce-4.3.8.tgz",
  "_npmVersion": "2.14.7",
  "_nodeVersion": "4.2.2",
  "_npmUser": {
    "name": "ephox",
    "email": "is-accounts@ephox.com"
  },
  "dist": {
    "shasum": "7f5b98973e93a40ff5c488bf94d3aebc6849c9f0",
    "tarball": "https://registry.npmjs.org/tinymce/-/tinymce-4.3.8.tgz"
  },
  "maintainers": [
    {
      "name": "ephox",
      "email": "is-accounts@ephox.com"
    },
    {
      "name": "spocke",
      "email": "spocke@moxiecode.com"
    }
  ],
  "_npmOperationalInternal": {
    "host": "packages-13-west.internal.npmjs.com",
    "tmp": "tmp/tinymce-4.3.8.tgz_1458050410605_0.6878089515957981"
  },
  "directories": {}
}
17

why is there no main
what should be the main entry point ?

can you at the main with the main entry point?

18

Tried, no difference.

I also tried removing the node module entirely. Putting tinymce.js in the /src of my project and importing it that way. I get the same href error.

19

Posted this above, but why does document.location.href not exist? Are you not running this code in a browser?

20

This error shows up at startup when initializing the app via donejs develop
The app never loads to be able to run it in the browser.