gatsby.js v4.4.0
I want to set up a script tag. However, I get an error and cannot set it up.
Please tell me how to install it.
<script type="module" src="https://unpkg.com/x-frame-bypass"></script>
<script src="https://unpkg.com/@ungap/custom-elements-builtin"></script>
The error code will be displayed in your browser.
Error in function customElements.define.extends.load in x-frame-bypass.js: X-Frame-Bypass src does not start with http(s)://
x-frame-bypass.js: No codeFrame could be generated
html.js
import React from "react"
import PropTypes from "prop-types"
export default function HTML(props) {
return (
<html {...props.htmlAttributes}>
<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"
/>
{props.headComponents}
<script type="module" src="https://unpkg.com/x-frame-bypass"></script>
<script src="https://unpkg.com/@ungap/custom-elements-builtin"></script>
</head>
<body {...props.bodyAttributes}>
{props.preBodyComponents}
<div
key={`body`}
id="___gatsby"
dangerouslySetInnerHTML={{ __html: props.body }}
/>
{props.postBodyComponents}
</body>
</html>
)
}
HTML.propTypes = {
htmlAttributes: PropTypes.object,
headComponents: PropTypes.array,
bodyAttributes: PropTypes.object,
preBodyComponents: PropTypes.array,
body: PropTypes.string,
postBodyComponents: PropTypes.array,
}
html.js
you shouldn't have an html tag in react
Agree, however, in this case, he's using HTML customization of Gatsby.
The error that is being prompted:
Error in function customElements.define.extends.load in x-frame-bypass.js: X-Frame-Bypass src does not start with http(s)://
x-frame-bypass.js: No codeFrame could be generated
This means that the script is loaded successfully.
If you take a look to the URL you are requesting (https://unpkg.com/x-frame-bypass@1.0.2/x-frame-bypass.js) you'll see the customElements.define and the exception that is being thrown at:
if (!url || !url.startsWith('http'))
throw new Error(`X-Frame-Bypass src ${url} does not start with http(s)://`)
console.log('X-Frame-Bypass loading:', URL)
This is likely to be a localhost issue. It should be gone as soon as the site is deployed to a custom domain.
In addition, according to the docs, the order of the scripts should be inverted:
<script src="https://unpkg.com/@ungap/custom-elements-builtin"></script>
<script type="module" src="https://unpkg.com/x-frame-bypass"></script>
The first (optional) one is:
<script src="https://unpkg.com/@ungap/custom-elements-builtin"></script>
Once done, you only need to load the iframe with the is="x-frame-bypass" attribute:
<iframe
is="x-frame-bypass"
src="https://stackoverflow.com/"
height="100%"
width-"100%"
/>