I'm using ReactDOMServer to generate a static site via the server side and it doesn't seem to like this component specifically the opening <!DOCTYPE html> tag. (see below)
I'm doing this as I'm trying to use React to fully render a page via the server-side for IE8 compatibility and eventually become an isomorphic app.
Is there a best practice on how to fully render static markup with React via the server-side (with inclusions of the opening html tags, etc.)?
'use strict';
import React from 'react';
export default class Root extends React.Component {
render() {
return (
<!DOCTYPE html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
);
}
}
let html = ReactDOMServer.renderToStaticMarkup(<Root />);
Bonus: Although a simple DOCTYPE is breaking it, eventually I'd like to add additional IE tags like below at the top.
<!--[if lt IE 7]> <html dir="ltr" lang="en-US" class="no-js ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]> <html dir="ltr" lang="en-US" class="no-js ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]> <html dir="ltr" lang="en-US" class="no-js ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]> <html dir="ltr" lang="en-US" class="no-js ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]> <html dir="ltr" lang="en-US" class="no-js"> <![endif]-->
<!--[if !IE]><!--><html><!--<![endif]-->
You'll likely want to emit the DOCTYPE header outside of your React component and replace <!DOCTYPE html> with an <html> node. JSX isn't HTML and just maps your elements to a corresponding React.createElement() call, which doesn't make sense for a DOCTYPE.
Take a look at these for reference:
Emitting a DOCTYPE before rendering the component
res.send('<!doctype html>\n' + ReactDOM.renderToString(<Html />));
An HTML component that handles tag generation
render() {
return (
<html lang="en-us">
<head></head>
...
</html>)
}
Related
I have set up a html page that contains a button that when clicked, activates a function from an external javascript file. The JS file in question imports two other functions from another JS file. However when I load the html file in my browser (Safari 12.0.2) and look at it in the debugger, I get an error stating "SyntaxError: Unexpected token '{'. import call expects exactly one argument."
The files are named "html_test_run.html", "test_run_javascript.js" and "export_test_run.js". I have tried setting the type of the script to "module" but that only resulted in a new error that said "Origin null is not allowed by Access-Control-Allow-Origin". I have also attempted to have three html tags, the first two had the source of the js files and the third defined a new function that the button would use instead, that didn't work either.
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test run</title>
<meta name="description" content="Test run">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
<link rel="stylesheet" href="">
-->
<script type="text/javascript" src="assets/test_run_javascript.js">
</script>
</head>
<body>
<button type="button" name="button" onclick="doSomething()">Click me</button>
</body>
</html>
First JS file:
import {doSomethingElse1, doSomethingElse2} from "export_test_run.js";
function doSomething(){
doSomethingElse1();
doSomethingElse2();
console.log("Test successful");
}
Second JS file:
function doSomethingElse1(){
console.log("Test successful1");
}
function doSomethingElse2(){
console.log("Test successful2");
}
export {doSomethingElse1, doSomethingElse2};
I expected the files would load correctly and the button would call the function "doSomething()" when clicked.
Any help would be greatly appreciated.
You have to correctly include a script on your page showing that the script type is "module":
<script src="/js/index.js" type="module"></script>
In case if the browser doesn't support modules you can simply process that using "nomodule" attribute:
<script nomodule>
console.info(`Your browser doesn't support native JavaScript modules.`);
</script>
You can include the two of your js files in the first page:
<script type="text/javascript" src="export_test_run.js">
</script>
<script type="text/javascript" src="assets/test_run_javascript.js">
</script>
Remove the export and import code from your js files!
Use the correct paths for the including.
How to write custom conditions in including JavaScript files using RequireJS?
Example:1
if("ontouchend" in document) document.write("<script
src='/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
Example:2
<!--[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<![endif]-->
Currently I am using shim and paths. Is there any room to place this. Is it possible?
You could use a conditional specific class on the html element itself, then checking for it and loading the dependencies will be easier in the inside your existing script.
For Example:
<!--[if lt IE 7]> <html class="ie lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="ie lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="ie lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="ie"> <![endif]-->
<html>
And in your script, you could try something like:
if ($('html.lt-ie9').size()) {
require(['/Scripts/ieSpecificScripts'], function(ieScript) {
// ... do stuff
});
}else
{
...
}
Happy Coding.. :)
Is it possible to combine code angular with IE7?
What you need to mount and write to this minimum sample to work in IE7?
<!DOCTYPE html>
<html lang="en" id="ng-app" ng-app='app'>
<head>
<!--[if lte IE 8]>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<meta charset="UTF-8">
<title>Tests</title>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div ng-controller="ButtonCtrl" ng-init="name = ''">
<button id="start-button" ng-click="run('Brrrr!!!')">push</button>
<p>{{name}}</p>
<p ng-init="count = 0">{{count}}</p>
</div>
</body>
</html>
I've never tired with IE7 but for IE8 I put the below html in. Which basically polyfills
HTML5 elements, CSS3 selectors and media queries. You might also want to look at es5 shims (https://github.com/es-shims/es5-shim). However, it you use all the native angular methods i.e. angular.forEach(...) you might be ok without this. As always you need to really test this in all browsers!!!!
<!DOCTYPE html>
<!--[if IEMobile 7 ]>
<html class="no-js iem7" xmlns:ng="http://angularjs.org" id="ng-app" ng-app="fsn"> <![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!-->
<html class="no-js" id="ng-app" ng-app="fsn">
<!--<![endif]-->
<head>
<!--[if lte IE 8]>
<script>
document.createElement('ng-include');
document.createElement('ng-switch');
document.createElement('ng-if');
document.createElement('ng-pluralize');
document.createElement('ng-view');
// needed to enable CSS reference
document.createElement('ng:view');
</script>
<![endif]-->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
<script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->
<meta charset="utf-8">
<script src="../vendor/modernizr/modernizr.js"></script>
</head>
It is also worth looking at the APIs that IE7 wouldn't support 'console' for example. The angular team say they only support down to IE8 with Angular <1.2.x so you might have to play about with it to get it to work smoothly.
I have IE8 working well but it does noticeably struggle with loading some larger pages as it is so slow.
I'm facing a prob with my CSS in IE7 and IE6. The biggest problem is that in one of my page the CSS is not loading at all in IE 7,6.
When I use the following code-
<!DOCTYPE html>
[if lt IE 7] <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> [endif]
[if IE 7] <html class="lt-ie9 lt-ie8" lang="en"> [endif]
[if IE 8] <html class="lt-ie9" lang="en"> [endif]
[if IE 9] <html class="ie9" lang="en"> [endif]
[if gt IE 9] <html lang="en"> [endif]
The CSS is getting loaded, but then, while running the website on chrome or Firefox the above codes of line are also printed. However no line is printed while using IE and the CSS is working fine.
Also when I use this code
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html lang="en"> <!--<![endif]-->
The CSS does not loads again in IE. What should I do.?
I hope my question is clear to you. Please Help.
You file starts with this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function test(add)
{
var pin;
if(window.XMLHttpRequest)
{
pin=new XMLHttpRequest();
}
else
{
pin= new ActiveXobject("Microsoft.XMLHTTP");
}
url=add;
pin.open("GET",url,true);
pin.send();
}
</script>
</head>
</html><!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en">
…
As you are ending the file before it even starts, you are triggering quirks mode in IE7 and below. Your file should start like the 2nd snippet you've posted.
I have a strange issue with my work.
While I do test on my local host of my web project while doing page source check i am getting following:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="Scripts/jquery-1.11.0.js"></script>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="/Content/style.css" />
</head>
<body>
Doctype seems to appear twice. But in my actual code it is only
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="/Content/style.css" />
</head>
<body>
Any ideas why could it happen? I have created project in Visual Studio.
Thanks
I had a similar issue which may or may not apply to your case.
In my case, I had index.html which started like this..
<!--#include virtual="/common/incl/html.incl" -->
<head>
In html.incl I defined the doctype amongst other things..
<!doctype html>
<!--[if lt IE 8]><html class="no-js ie lt-ie9 lt-ie8" lang="en" itemscope itemtype="http://schema.org/" xmlns:fb="http://ogp.me/ns/fb#"><![endif]-->
<!--[if IE 8]><html class="no-js ie ie8 lt-ie9" lang="en" itemscope itemtype="http://schema.org/" xmlns:fb="http://ogp.me/ns/fb#"><![endif]-->
<!--[if IE 9]><html class="no-js ie ie9" lang="en" itemscope itemtype="http://schema.org/" xmlns:fb="http://ogp.me/ns/fb#"><![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en" itemscope itemtype="http://schema.org/" xmlns:fb="http://ogp.me/ns/fb#"><!--<![endif]-->
But when the source was generated it was generating a duplicate doctype appearing after the conditional comments.
When I removed the doctype declaration from the .incl file and instead declared it in the .html file BEFORE the include then it resolved the issue. .html documents are required to start with a document type declaration so since I was not initially defining one in the .html file, but rather in the .incl file, something else in my workflow was adding it for me.