You have to explicitly tell gatsby that a path should be dynamic. From the docs: // gatsby-node.js // Implement the Gatsby API “onCreatePage”. This is // called after every page is created. exports.onCreatePage = async ({ page, actions }) => { const { createPage } = actions // page.matchPath is a special key that’s used … Read more
After several hours of frustration I finally stumbled upon discussion on GitHub that solved this for me. In Gatsby, there is a thing called static folder, for which one use case is including a small script outside of the bundled code. Anyone else in the same situation, try proceeding as follows: Create a folder static … Read more
You can inject external scripts (with no npm modules) to gatsby.js project in many ways. Prefer to use respective gatsby-plugin for “web-analytics” scripts. Using require() : Create a file in your project myScript.js and paste the script content Add const myExtScript = require(‘../pathToMyScript/myScript’) to a statefull component at the Pages folder inside render() and before … Read more
When dealing with third-party modules that use window in Gatsby you need to add a null loader to its own webpack configuration to avoid the transpilation during the SSR (Server-Side Rendering). This is because gatsby develop occurs in the browser (where there is a window) while gatsby build occurs in the Node server where obviously … Read more
As you said, there are plugins to achieve this, which means a cleaner code (not the full SVG tag inlined in the component) with the same final result. Using gatsby-plugin-react-svg plugin you just need to import your SVG like this: import Icon from “./path/assets/icon.svg”; To install, you only need to add the dependency using npm … Read more
This might help. Add these scripts in the package.json file. React: “scripts”: { “start”: “export SET NODE_OPTIONS=–openssl-legacy-provider && react-scripts start”, “build”: “export SET NODE_OPTIONS=–openssl-legacy-provider && react-scripts build” } or “scripts”: { “start”: “react-scripts –openssl-legacy-provider start”, “build”: “react-scripts –openssl-legacy-provider build”, } Vue.js: “scripts”: { “serve”: “export NODE_OPTIONS=–openssl-legacy-provider && vue-cli-service serve”, “build”: “export NODE_OPTIONS=–openssl-legacy-provider && vue-cli-service build”, … Read more
I had experienced this issue after upgrading to the latest Docker Desktop version on Mac. Solved with the comment on this issue. Solution: Don’t use buildkit and it works for me. export DOCKER_BUILDKIT=0 export COMPOSE_DOCKER_CLI_BUILD=0
If you want to add jQuery as an external (load from CDN) to gastby, it’s a bit tricky. You’d need to: add jquery CDN to html.js add external to webpack config in gatsby-node.js Add jQuery to html.js ⚠️ Edit: This should be done via gatsby-ssr, please refer @rosszember answer for context.. You’ve probably already done … Read more