Rendering Document Error: TypeError: undefined is not a function or str.replace is not a function

[gjuchault]

Note: for support questions, please use one of these channels: https://github.com/angular/universal/blob/master/CONTRIBUTING.md#question. This repository's issues are reserved for feature requests and bug reports.

• I'm submitting a ...
• bug report
• feature request
• support request => Please do not submit support request here, see note at the top of this template.
• What modules are related to this pull-request
• express-engine
• grunt-prerender
• gulp-prerender
• hapi-engine
• universal-preview
• universal
• webpack-prerender
• Do you want to request a feature or report a bug?

Report a bug

• What is the current behavior?

Note: This is purely guessing, as the error message isn't descriptive enough for us to solve it.
An error is raised in the browser sometime: Rendering Document Error: TypeError: undefined is not a function or Rendering Document Error: TypeError: str.replace is not a function.
This (according to code), is probably angular universal trying to serialize an attribute with a falsy value, or not a string.

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem by creating a github repo.

Clone universal-starter, replace home.template.html by:

<div class="home" [hidden]="foo">
  <form #loginForm="ngForm">
      <input type="text" placeholder="username" required><br>
      <button type="submit" [disabled]="!loginForm.form.valid">Login</button>
  </form>
</div>

• What is the expected behavior?

No error

• Please tell us about your environment:
• Angular version: 2.0.0-rc4
• Browser: all
• Language: all
• OS: all
• Platform: NodeJS
• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

Complete stacktraces:

Rendering Document Error: TypeError: str.replace is not a function
    at escapeString (project\node_modules\angular2-universal\node_modules\parse5\lib\serialization\serializer.js:27:10)
    at Serializer._serializeAttributes (project\node_modules\angular2-universal\node_modules\parse5\lib\serialization\serializer.js:124:55)
    at Serializer._serializeElement (project\node_modules\angular2-universal\node_modules\parse5\lib\serialization\serializer.js:91:10)
    at Serializer._serializeChildNodes (project\node_modules\angular2-universal\node_modules\parse5\lib\serialization\serializer.js:72:22)
    at Serializer._serializeElement (project\node_modules\angular2-universal\node_modules\parse5\lib\serialization\serializer.js:114:14)
    at Serializer._serializeChildNodes (project\node_modules\angular2-universal\node_modules\parse5\lib\serialization\serializer.js:72:22)
    at Serializer._serializeElement (project\node_modules\angular2-universal\node_modules\parse5\lib\serialization\serializer.js:114:14)
    at Serializer._serializeChildNodes (project\node_modules\angular2-universal\node_modules\parse5\lib\serialization\serializer.js:72:22)
    at Serializer._serializeElement (project\node_modules\angular2-universal\node_modules\parse5\lib\serialization\serializer.js:114:14)
    at Serializer._serializeChildNodes (project\node_modules\angular2-universal\node_modules\parse5\lib\serialization\serializer.js:72:22)

Rendering Document Error: TypeError: undefined is not a function
    at escapeString (project\node_modules\angular2-universal\node_modules\parse5\lib\serialization\serializer.js:27:10)
    at Serializer._serializeAttributes (project\node_modules\angular2-universal\node_modules\parse5\lib\serialization\serializer.js:124:55)
    at Serializer._serializeElement (project\node_modules\angular2-universal\node_modules\parse5\lib\serialization\serializer.js:91:10)
    at Serializer._serializeChildNodes (project\node_modules\angular2-universal\node_modules\parse5\lib\serialization\serializer.js:72:22)
    at Serializer._serializeElement (project\node_modules\angular2-universal\node_modules\parse5\lib\serialization\serializer.js:114:14)
    at Serializer._serializeChildNodes (project\node_modules\angular2-universal\node_modules\parse5\lib\serialization\serializer.js:72:22)
    at Serializer._serializeElement (project\node_modules\angular2-universal\node_modules\parse5\lib\serialization\serializer.js:114:14)
    at Serializer._serializeChildNodes (project\node_modules\angular2-universal\node_modules\parse5\lib\serialization\serializer.js:72:22)
    at Serializer._serializeElement (project\node_modules\angular2-universal\node_modules\parse5\lib\serialization\serializer.js:114:14)
    at Serializer._serializeChildNodes (project\node_modules\angular2-universal\node_modules\parse5\lib\serialization\serializer.js:72:22)

[PatrickJS]

@gjuchault can you change [disabled] to [attr.disabled]

[gjuchault]

It works; but is it still a bug ?

[PatrickJS]

it's a bug in our propToAttr abstraction that was meant to convert these elements to attributes and our service that converts our fake-json-html-elements on the server to a string (our serializer).

When rendering on the server we're converting an element to the string representation of that so for example. <input id="myInput" value="hi'> if I run window.myInput.view I'll get "hi" because the document has an API that will convert attributes into properties after converting the markup into the correct js type HTMLInputElement
if you change the value of myInput to "yolo" then view the element again you will notice that the attribute is still value="hi" yet the value is now "yolo". When converting these elements to string, when creating the index.html, we're only looking at the attributes since there are way too many properties for each native element.

For this case, the real problem is due to our serializer and propToAttr. disabled was returning disabled="false" where false is a boolean rather than a string. Our propToAttr was meant to remove these boolean attributes if they're false and if they're true only provide them without a value <input disabled=""> or <input disabled>

[Zeetah]

@gdi2290 Is there any fix coming to this?

We have a similar issue with "numbers" inside string where we have for example element like this:
<cms-authentication [contentId]="123456"></cms-authentication>

It gives us stacktrace:

Rendering Document Error: [TypeError: str.replace is not a function]
TypeError: str.replace is not a function
    at escapeString (/path/to/app/node_modules/parse5/lib/serialization/serializer.js:27:10)
    at Serializer._serializeAttributes (/path/to/app/node_modules/parse5/lib/serialization/serializer.js:124:55)
    at Serializer._serializeElement (/path/to/app/node_modules/parse5/lib/serialization/serializer.js:91:10)
    at Serializer._serializeChildNodes (/path/to/app/node_modules/parse5/lib/serialization/serializer.js:72:22)
    at Serializer._serializeElement (/path/to/app/node_modules/parse5/lib/serialization/serializer.js:114:14)
    at Serializer._serializeChildNodes (/path/to/app/node_modules/parse5/lib/serialization/serializer.js:72:22)
    at Serializer._serializeElement (/path/to/app/node_modules/parse5/lib/serialization/serializer.js:114:14)
    at Serializer._serializeChildNodes (/path/to/app/node_modules/parse5/lib/serialization/serializer.js:72:22)
    at Serializer._serializeElement (/path/to/app/node_modules/parse5/lib/serialization/serializer.js:114:14)
    at Serializer._serializeChildNodes (/path/to/app/node_modules/parse5/lib/serialization/serializer.js:72:22)

[MarkPieszak]

Does it also work if you do attr.contentId ? @Zeetah
I have some time today I can look into it, I didn't realize it was happening with completely custom input attributes in components / etc.

[teemuandersen]

@MarkPieszak, @Zeetah:
This HTML comes from our CMS system and it's not something that we can change for a brief testing. I did some tests by mutating the provided HTML. Mapping [contentId]="12345" => [attr.contentId]="12345" broke the whole application for some reason and I didn't have time to figure out why. Mapping [contentId]="12345" to [contentId]="'12345'" does help.

[MarkPieszak]

Very interesting, I tried reproducing it by making even similarly named Component, but couldn't reproduce it. Do you have some code somewhere I can look at so I can test with it? @teemuandersen

In #499 that's the only way I could get it to "break" if I used an alias and referenced it wrong in the template, is that maybe what's going on?

[teemuandersen]

@MarkPieszak: Unfortunately this is a private repo. But I've tested this some more. It seems to be related to dynamic (experimental) functionality. We use the ComponentResolver to create new Components at runtime with CMS provided HTML as a template. These dynamic Components then trigger our Components to render the dynamic content.

This problem with tags/inputs (e.g. contentId) is encountered when tag/selector contains attributes/properties declared with property bind syntax ([name]="value") that the Component doesn't need and therefore doesn't declare as inputs (no @Input for them) or there is no Component that matches the tag/selector. As a result during serialization [contentId]="12345" is tried to escape but fails as it's value is a number.

[MarkPieszak]

There is a PR that can fix this issue, so we'll be all set soon :)

[felipedrumond]

@teemuandersen That's exactly the issue I'm facing. In the code bellow, the model property 'quantidade' is a number, and node throws "Rendering Document Error: TypeError: str.replace is not a function at escapeString (C:...\node_modules\parse5\lib\serialization\serializer.js:27:10)"

<input [(ngModel)]="item.quantidade" class="qtdProduto" maxlength="3" />

Did you find any workaround for this issue?