Menu
I've been experimenting with gatsby.js for a while and everything is going well except for this issue, i cannot include jQuery scripts unto the app so that it loads after the gatsby app has been rendered, i've the included script tags unto the html.js file and loaded it but it seems that the code is executed before react renders the content unto the screen i've tried using simple-load-script as well to include it on the componentDidMount method on the html.js app. But with no luck, here is the source code to my html.js file:
html.js
import React from "react"
import PropTypes from "prop-types"
export default class HTML extends React.Component {
componentDidMount() {
console.log('hello world');
}
render() {
return (
<html {...this.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"
/>
{this.props.headComponents}
</head>
<body>
{this.props.preBodyComponents}
<div
key={`body`}
id="___gatsby"
dangerouslySetInnerHTML={{ __html: this.props.body }}
/>
{this.props.postBodyComponents}
</body>
</html>
)
}
}
HTML.propTypes = {
htmlAttributes: PropTypes.object,
headComponents: PropTypes.array,
bodyAttributes: PropTypes.object,
preBodyComponents: PropTypes.array,
body: PropTypes.string,
postBodyComponents: PropTypes.array,
}
As you can see i replaced the componentDidMount() method to write out to the console and it didn't there's something preventing this method from executing.
If anyone has experience with this please do share, thanks.
737
:warning: The Gatsby javascript is only removed from the production build gatsby build and not during the dev build gatsby develop . If you do not write any state logic or event handlers then this should not effect you. This feature may be something this plugin wants to tackle in the future.
First and foremost, Gatsby leverages React, so it is a great choice for those who are comfortable with and love it. Gatsby pairs really well with platforms like Netlify, and you can easily configure your site to build and deploy every time you commit and push to GitHub.
Based on popular and influential technology Gatsby is based on React. js which is a JavaScript library for building User Interfaces using components. It's relatively easy to learn, and if you're able to write solid JavaScript code, you're good to go.
If you want to add jQuery as an external (load from CDN) to gastby, it's a bit tricky. You'd need to:
html.js
external to webpack config in gatsby-node.js
html.js
⚠️ Edit: This should be done via
gatsby-ssr, please refer @rosszember answer for context..
You've probably already done this: cp .cache/default-html.js src/html.js, and add
// src/html.js
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossOrigin="anonymous"
/>
</head>
But there's a caveat: it's crossOrigin, not crossorigin.
At this point, if you use $ even in componentDidMount, it'd still throw error, as webpack doesn't know about jquery.
external to webpack config in gatsby-node.js
We need to inform webpack about jQuery.
//gatsby-node.js
exports.onCreateWebpackConfig = ({
actions,
}) => {
const { setWebpackConfig } = actions;
setWebpackConfig({
externals: {
jquery: 'jQuery', // important: 'Q' capitalized
}
})
}
Now, in componentDidMount you can do
import $ from 'jquery' // important: case sensitive.
componentDidMount() {
$('h1').css('color', 'red');
}
When we set external: { X: Y } We're essentially telling webpack that 'wherever I do import X', look for the Y in the global scope. In our case, webpack'll look for jQuery in window. jQuery attachs itself to window with 2 names: jQuery and $. This is why the capitalized Q is important.
Also, to illustrate, you can also do: external: { foo: jQuery } and use it like import $ from foo. It should still work.
Hope that helps!
165
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
