Enable rails js_compressor `:uglifier` #95

Closed
dakotalightning opened this Issue Jan 12, 2016 · 15 comments

Projects

None yet

4 participants

@dakotalightning

When trying to edit in production. I'm getting errors in production Uncaught TypeError: this.element.tagName is not a function on the concat/uglifier source

errors

@dakotalightning dakotalightning changed the title from Uncaught TypeError: this.element.tagName is not a function, on concat source on production to Uncaught TypeError: this.element.tagName is not a function, on concat source on production #bug Jan 12, 2016
@dakotalightning dakotalightning changed the title from Uncaught TypeError: this.element.tagName is not a function, on concat source on production #bug to Uncaught TypeError: this.element.tagName is not a function Jan 12, 2016
@CJStroud

Hi,

I'm sure I had this issue when my files where being concatenated in the wrong order. Do you get the issue if you add the content tools library before the rest of your JavaScript?

@anthonyjb
Member

Hi @dakotalightning - when does the error occur? The moment you start editing, when you first select an element or on some other action?

Also I'm assuming this is a custom build process, does the error occur if you include content-tools.js as a separate <script> tag on the page? If so can you post that error as it may help in identifying where the code is failing, if not could you describe the build process a bit more, if it's grunt can you post it here?

@dakotalightning

@anthonyjb It occurs when I select an element for edit, no the error doesn't happen when I include content-tools.js as a separate <script> tag.

The build is rails :uglifier

@CJStroud thanks, it appears to be still throwing the error.

@dakotalightning

Update: I pulled it out of the compile pipeline app.js and placed it on the page in a separate <script> both content-tools.min.js and editor.js.

Im still getting the errors

content-tools.min-ed3bd097d02a3e3d9e22ff0eb2beb8001bf0ab7a0f5f06cb8dadeae1a4bb578d.js:7 
  Uncaught TypeError: this.element.tagName is not a function
    ContentTools.TagUI.e.mount @ content-tools.min-ed3bd097d02a3e3d9e22ff0eb2beb8001bf0ab7a0f5f06cb8dadeae1a4bb578d.js:7
    ContentTools.InspectorUI.e.updateTags @ content-tools.min-ed3bd097d02a3e3d9e22ff0eb2beb8001bf0ab7a0f5f06cb8dadeae1a4bb578d.js:7
    (anonymous function) @ content-tools.min-ed3bd097d02a3e3d9e22ff0eb2beb8001bf0ab7a0f5f06cb8dadeae1a4bb578d.js:7
    ContentEdit.Node.t.trigger @ content-tools.min-ed3bd097d02a3e3d9e22ff0eb2beb8001bf0ab7a0f5f06cb8dadeae1a4bb578d.js:5
    ContentEdit.Element.e.focus @ content-tools.min-ed3bd097d02a3e3d9e22ff0eb2beb8001bf0ab7a0f5f06cb8dadeae1a4bb578d.js:5
    ContentEdit.Text.e.focus @ content-tools.min-ed3bd097d02a3e3d9e22ff0eb2beb8001bf0ab7a0f5f06cb8dadeae1a4bb578d.js:6
    ContentEdit.Element.e._onMouseDown @ content-tools.min-ed3bd097d02a3e3d9e22ff0eb2beb8001bf0ab7a0f5f06cb8dadeae1a4bb578d.js:6
    ContentEdit.Text.e._onMouseDown @ content-tools.min-ed3bd097d02a3e3d9e22ff0eb2beb8001bf0ab7a0f5f06cb8dadeae1a4bb578d.js:6
    (anonymous function) @ content-tools.min-ed3bd097d02a3e3d9e22ff0eb2beb8001bf0ab7a0f5f06cb8dadeae1a4bb578d.js:6

content-tools.min-ed3bd097d02a3e3d9e22ff0eb2beb8001bf0ab7a0f5f06cb8dadeae1a4bb578d.js:7 
  Uncaught TypeError: Cannot read property 'removeChild' of null
    ContentTools.ComponentUI.t.unmount @ content-tools.min-ed3bd097d02a3e3d9e22ff0eb2beb8001bf0ab7a0f5f06cb8dadeae1a4bb578d.js:7
    ContentTools.InspectorUI.e.updateTags @ content-tools.min-ed3bd097d02a3e3d9e22ff0eb2beb8001bf0ab7a0f5f06cb8dadeae1a4bb578d.js:7
    (anonymous function) @ content-tools.min-ed3bd097d02a3e3d9e22ff0eb2beb8001bf0ab7a0f5f06cb8dadeae1a4bb578d.js:7
    ContentEdit.Node.t.trigger @ content-tools.min-ed3bd097d02a3e3d9e22ff0eb2beb8001bf0ab7a0f5f06cb8dadeae1a4bb578d.js:5
    ContentEdit.Element.e.blur @ content-tools.min-ed3bd097d02a3e3d9e22ff0eb2beb8001bf0ab7a0f5f06cb8dadeae1a4bb578d.js:5
    ContentEdit.Text.e.blur @ content-tools.min-ed3bd097d02a3e3d9e22ff0eb2beb8001bf0ab7a0f5f06cb8dadeae1a4bb578d.js:6
    ContentEdit.Element.e.focus @ content-tools.min-ed3bd097d02a3e3d9e22ff0eb2beb8001bf0ab7a0f5f06cb8dadeae1a4bb578d.js:5
    ContentEdit.Text.e.focus @ content-tools.min-ed3bd097d02a3e3d9e22ff0eb2beb8001bf0ab7a0f5f06cb8dadeae1a4bb578d.js:6
    ContentEdit.Element.e._onMouseDown @ content-tools.min-ed3bd097d02a3e3d9e22ff0eb2beb8001bf0ab7a0f5f06cb8dadeae1a4bb578d.js:6
    ContentEdit.Text.e._onMouseDown @ content-tools.min-ed3bd097d02a3e3d9e22ff0eb2beb8001bf0ab7a0f5f06cb8dadeae1a4bb578d.js:6
    (anonymous function) @ content-tools.min-ed3bd097d02a3e3d9e22ff0eb2beb8001bf0ab7a0f5f06cb8dadeae1a4bb578d.js:6
@anthonyjb
Member

I don't have much experience with rails, is it possible to disable the uglify step in the build to identify if that step is causing the issue?

@dakotalightning

So it was the config.assets.js_compressor = :uglifier that was the issue.

@dakotalightning dakotalightning changed the title from Uncaught TypeError: this.element.tagName is not a function to Enable rails js_compressor `:uglifier` Jan 12, 2016
@anthonyjb
Member

We use uglify in the grunt build script to generate the content-tools.min.js library, it appears to me that rails uglifier is (https://github.com/lautis/uglifier) is a wrapper for the same library so my guess is something in the configuration, potentially the default configuration is different from the config used to uglify in the projects pipeline.

Can you provide information about the version of ugifier your using and the settings for your project please?

@anthonyjb
Member

Reading around on the web it might be a good idea to try disable mangle_names which I think might be on by default.

@dakotalightning

So looking at the grunt build for content-tools.min.js, I changed the settings to config.assets.js_compressor = Uglifier.new(:mangle => false). It works as it should now.
This probably isn't ideal since this is for the whole js asset pipeline, maybe moving towards a mangle safe build?

Shaving yaks again ...

@anthonyjb anthonyjb added the bug label Jan 12, 2016
@anthonyjb
Member

Whilst I like the introspective nature of JS it appears I'm abusing it with the use of constructor.name - and in quite a number of places. Some of these cases can be changed relatively easily, others need a bit more thought but having done a little reading on the subject I think in hindsight this was a poor decision on my part and should be rectified.

@dakotalightning Thanks for you help in whittling down the issue.

@shvetsovdm
Contributor

@anthonyjb I have the same issue with my project. Do you plan any actions towards resolving this issue. Can I offer any help?

@anthonyjb
Member

Hi @shvetsovdm - I started work on this issue last night and have a local version of ContentEdit working with mangled names (shaves nearly 30kb off the minified source too :) ). I need to get some additional tests in place and make a few changes to ContentTools but I'm confident I'll have the fix in place today/tonight.

@shvetsovdm
Contributor

@anthonyjb it's just awesome, thanks!

@anthonyjb anthonyjb added a commit that closed this issue Jan 13, 2016
@anthonyjb anthonyjb Fixes #95. 838c09b
@anthonyjb anthonyjb closed this in 838c09b Jan 13, 2016
@shvetsovdm
Contributor

838c09b resolves problem of rails uglification 🍻 @anthonyjb

@dakotalightning

👍 Confirmed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment