Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

HTML comments? #3105

Closed
preco21 opened this issue Oct 16, 2017 · 4 comments
Closed

HTML comments? #3105

preco21 opened this issue Oct 16, 2017 · 4 comments

Comments

@preco21
Copy link

preco21 commented Oct 16, 2017

Hello all, I'd like to know how HTML comments can be done in next.

I'm about to use HTML comments with conditions like this to distinguish IE and put some polyfills like this:

<!--[if lt IE 11]>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<![endif]-->

Expected Behavior

To resolve this issue, I just followed workaround where I found from the react issue: facebook/react#1035 (comment)

Layout Head:

<Head>
  <meta charSet="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1" />
  <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
  <title>{title}</title>

  {`
     <!--[if lt IE 11]>
       <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
     <![endif]-->
  `}
</Head>

Current Behavior

But I ended up with this weird error when I directly add comment text to Head:

Cannot read property 'toLowerCase' of undefined
TypeError: Cannot read property 'toLowerCase' of undefined
    at ReactDOMServerRenderer.renderDOM (/Users/preco/repos/next-test/node_modules/react-dom/cjs/react-dom-server.node.development.js:2776:27)
    at ReactDOMServerRenderer.render (/Users/preco/repos/next-test/node_modules/react-dom/cjs/react-dom-server.node.development.js:2755:23)
    at ReactDOMServerRenderer.read (/Users/preco/repos/next-test/node_modules/react-dom/cjs/react-dom-server.node.development.js:2722:19)
    at renderToStaticMarkup (/Users/preco/repos/next-test/node_modules/react-dom/cjs/react-dom-server.node.development.js:2991:25)
    at _callee3$ (/Users/preco/repos/next-test/node_modules/next/dist/server/render.js:224:100)
    at tryCatch (/Users/preco/repos/next-test/node_modules/regenerator-runtime/runtime.js:65:40)
    at Generator.invoke [as _invoke] (/Users/preco/repos/next-test/node_modules/regenerator-runtime/runtime.js:299:22)
    at Generator.prototype.(anonymous function) [as next] (/Users/preco/repos/next-test/node_modules/regenerator-runtime/runtime.js:117:21)
    at step (/Users/preco/repos/next-test/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
    at /Users/preco/repos/next-test/node_modules/babel-runtime/helpers/asyncToGenerator.js:28:13

And seems like dangerouslySetInnerHTML prop in Head does not make any changes to output unlike typical dom elements.

Context

Any tips to add HTML comments directly to next app?

Your Environment

Tech Version
next 4.1.0
node 8.1.2
OS macOS High Sierra 10.13
browser Chrome 61
@arianon
Copy link

arianon commented Oct 16, 2017

There's no need to wrap polyfill.io's script in a conditional due to the nature of the service: it already detects and sends only the polyfills your user's browser needs.

@preco21
Copy link
Author

preco21 commented Oct 17, 2017

@arianon Ah I missed that thanks for the advising.

@CrocoDillon
Copy link

I think this issue is still important even though maybe not for polyfill.io... any way to include something like respond.js or html5shiv.js conditionally?

@nilsnh
Copy link

nilsnh commented Nov 28, 2017

Hi there,

We need html comments in order to add css that provide fallbacks for IE11 which does not have css grids. Is it possible to add some functionality in the next/head component that allows for outputting plain html comments?

Example of what we are trying to do:

import React from 'react';
import PropTypes from 'prop-types';
import Head from 'next/head';
import stylesheet from '../style/main.scss';

const HeadComponent = ({
  title, description, image, url, ogp,
}) => (
  <Head>
    <meta charSet="utf-8" />
    <meta httpEquiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>{title}</title>
    <meta name="description" content={description} />

    <meta property="og:url" content={ogp.url ? ogp.url : url} />
    <meta property="og:type" content="website" />
    <meta property="og:title" content={ogp.title ? ogp.title : title} />
    <meta property="og:image" content={ogp.image ? ogp.image : image} />
    <meta property="og:description" content={ogp.description ? ogp.description : description} />
    <meta property="og:site_name" content="" />
    <meta property="og:locale" content="en_US" />

    {/* Twitter will reuse OGP declarations for description and image */}
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="" />
    <link rel="icon" type="image/png" href="/static/favicon.png" />

    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
    
    <div
      dangerouslySetInnerHTML={{
        __html: `<!--[if IE]>
                  <style>
                      .c-longform-grid {
                        max-width: 620px !important;
                      }
                  </style>
                <![endif]-->`,
      }}
    />
  </Head>
);

@lock lock bot locked as resolved and limited conversation to collaborators Nov 28, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@nilsnh @CrocoDillon @preco21 @arianon @timneutkens