I'm building a gatsby web app, I was working with wsl on windows, and it was working well, I even deployed it to a github pages repository, which worked fine, but then I decided I didn't need to use wsl anymore, so I uninstalled it, cloned the git repository and tried to build the app using gatsby develop but in the localhost page it shows this error with no more context:
Unhandled Runtime Error.
One unhandled runtime error found in your files. See the list below to fix it:
Unknown Runtime Error
String contains an invalid character
No codeFrame could be generated
Which isn't particularly useful.
Then, by running the gh-pages command to deploy my page to a github pages repository, I get this error:
ERROR
Page data from page-data.json for the failed page "/": {
"componentChunkName": "component---src-pages-index-js",
"path": "/",
"result": {
"data": {
"allFile": {
"nodes": [
{
"name": "1_corazon-de-maple",
"id": "ac582d47-3543-54cd-83b1-9366ca594fe3",
"childImageSharp": {
"gatsbyImageData": {
"layout": "constrained",
"backgroundColor": "#f8e8d8",
"images": {
"fallback": {
"src": "/static/9acd54f4f5e8efa9b11549c85e00ea4f/f76e2/1_corazon-de-maple.png",
"srcSet": "/static/9acd54f4f5e8efa9b11549c85e00ea4f/2fe1e/1_corazon-de-maple.png 480w,\n/static/9acd54f4f5e8efa9b11549c85e00ea4f/d1fbd/1_corazon-de-maple.png
961w,\n/static/9acd54f4f5e8efa9b11549c85e00ea4f/f76e2/1_corazon-de-maple.png 1921w",
"sizes": "(min-width: 1921px) 1921px, 100vw"
},
"sources": [
{
"srcSet": "/static/9acd54f4f5e8efa9b11549c85e00ea4f/3a3a2/1_corazon-de-maple.webp 480w,\n/static/9acd54f4f5e8efa9b11549c85e00ea4f/e58ca/1_corazon-de-maple.webp
961w,\n/static/9acd54f4f5e8efa9b11549c85e00ea4f/2d899/1_corazon-de-maple.webp 1921w",
"type": "image/webp",
"sizes": "(min-width: 1921px) 1921px, 100vw"
}
]
},
"width": 1921,
"height": 1081
}
}
},
{
"name": "2_appartar",
"id": "12e5156f-1297-5068-a800-2b063db9bf20",
"childImageSharp": {
"gatsbyImageData": {
"layout": "constrained",
"backgroundColor": "#f8f8f8",
"images": {
"fallback": {
"src": "/static/86855c6fbdba7e8237ff47290ac1c15f/eb413/2_appartar.png",
"srcSet": "/static/86855c6fbdba7e8237ff47290ac1c15f/a67ed/2_appartar.png 360w,\n/static/86855c6fbdba7e8237ff47290ac1c15f/379bb/2_appartar.png
720w,\n/static/86855c6fbdba7e8237ff47290ac1c15f/eb413/2_appartar.png 1440w",
"sizes": "(min-width: 1440px) 1440px, 100vw"
},
"sources": [
{
"srcSet": "/static/86855c6fbdba7e8237ff47290ac1c15f/28975/2_appartar.webp 360w,\n/static/86855c6fbdba7e8237ff47290ac1c15f/4b463/2_appartar.webp
720w,\n/static/86855c6fbdba7e8237ff47290ac1c15f/3b606/2_appartar.webp 1440w",
"type": "image/webp",
"sizes": "(min-width: 1440px) 1440px, 100vw"
}
]
},
"width": 1440,
"height": 900
}
}
},
{
"name": "3_sipago",
"id": "65960d9a-741b-5ce9-8519-ddca5800e91d",
"childImageSharp": {
"gatsbyImageData": {
"layout": "constrained",
"backgroundColor": "#f8f8f8",
"images": {
"fallback": {
"src": "/static/3ab66ed0d806a8922cb37b7737185c68/87926/3_sipago.png",
"srcSet": "/static/3ab66ed0d806a8922cb37b7737185c68/a3fa1/3_sipago.png 350w,\n/static/3ab66ed0d806a8922cb37b7737185c68/bc3b9/3_sipago.png
700w,\n/static/3ab66ed0d806a8922cb37b7737185c68/87926/3_sipago.png 1400w",
"sizes": "(min-width: 1400px) 1400px, 100vw"
},
"sources": [
{
"srcSet": "/static/3ab66ed0d806a8922cb37b7737185c68/26a00/3_sipago.webp 350w,\n/static/3ab66ed0d806a8922cb37b7737185c68/f23f0/3_sipago.webp
700w,\n/static/3ab66ed0d806a8922cb37b7737185c68/2c2d0/3_sipago.webp 1400w",
"type": "image/webp",
"sizes": "(min-width: 1400px) 1400px, 100vw"
}
]
},
"width": 1400,
"height": 788
}
}
}
]
},
"site": {
"siteMetadata": {
"title": "Raul Meza Montoya | Portfolio"
}
},
"file": {
"id": "df889c4b-9f80-5d5e-af33-55a721c9d098",
"publicURL": "/static/cd0bd82dbb5f2ff0d8d7ae76b84f470c/cv_raul-meza-montoya.pdf"
}
},
"pageContext": {}
},
"staticQueryHashes": [
"1796249492"
]
}
failed Building static HTML for pages - 1.092s
ERROR #95313
Building static HTML failed for path "/"
See our docs page for more info on this error: https://gatsby.dev/debug-html
15 |
16 | module.exports = _defineProperty;
> 17 | module.exports["default"] = module.exports, module.exports.__esModule = true;
I checked the components in my page and it seems disabling a list of svg components fixed the page, but I can't determine why. the UXUIDesign, FrontEnd, and GraphicDesign are all svg components imported like this:
import FrontEnd from "../images/svgs/front-end_sm.svg";
<ul id="specialty-list" className="list inline-list">
<li>
<UXUIDesign className="svg inline-svg svg-icon" />
<p>Diseño UX/UI</p>
</li>
<li>
<FrontEnd className="svg inline-svg svg-icon" />
<p>Desarrollo Front End</p>
</li>
<li>
<GraphicDesign className="svg inline-svg svg-icon" />
<p>Diseño Gráfico</p>
</li>
</ul>
Update:
Transforming the svg from a regular .svg file to a .js using jsx with transform.tools seems to fix the svgs causing an error, not sure what caused it to fail, and gatsby doesn't specify what went wrong.
I think your issue comes because of the way you are importing the SVG. In Gatsby, this will work:
return <div>
<svg>
{/* some SVG magic code here */}
</svg>
</div>
But this won't:
import SomeSvg from '../svg/path/some-svg.svg'
return <div>
<SomeSvg />
</div>
Because by default, webpack won't interpret SVG files as React components. You can follow this detailed answer: Import SVG as a component in Gatsby but basically, you need to use gatsby-plugin-react-svg. After installing it:
{
resolve: 'gatsby-plugin-react-svg',
options: {
rule: {
include: /svgs/
}
}
}
Note 1: just add the folder that contains the SVG. include is a regular expression (that's why is between slashes, /) so just add the folder name
Note 2: the SVG folder must only contain SVG assets, otherwise the compilation may fail
Then, import it like you were doing:
import FrontEnd from "../images/svgs/front-end_sm.svg";
Move site into allFile query or file query
export const query = graphql`
query {
allFile(
filter: { relativeDirectory: { eq: "thumbnails" } }
sort: { fields: name }
) {
nodes {
name
id
childImageSharp {
gatsbyImageData
}
}
site {
siteMetadata {
title
}
}
}
file(name: {eq: "cv_raul-meza-montoya"}) {
id
publicURL
}
}
`
Related
I recently converted my Chrome extension to a Safari extension using the Apple Conversion tool (XCode CLI). The extension is developed with ReactJS and SaSS. It works very well on Google Chrome but when I try it on Safari after converting it, the local extension works but the CSS file that handles the extension is not applied.
There are no errors during the conversion but the Safari developer tool indicates several errors :
console tab : Failed to load resource: You are not allowed to access the required resource.
network tab : An error occurred while trying to load the resource and the resource was requested in an insecure manner.
In the extension, we isolate CSS using iframe :
/*global chrome*/
/* src/content.js */
import React from 'react';
import ReactDOM from 'react-dom';
import Frame, { FrameContextConsumer }from 'react-frame-component';
import "./content.css";
class Main extends React.Component {
render() {
return (
<Frame head={[<link type="text/css" rel="stylesheet" href={chrome.runtime.getURL("/static/css/content.css")} ></link>]}>
<FrameContextConsumer>
{
// Callback is invoked with iframe's window and document instances
({document, window}) => {
// Render Children
return (
<div className={'my-extension'}>
<h1>Hello world - My first Extension</h1>
</div>
)
}
}
</FrameContextConsumer>
</Frame>
)
}
}
Here is the manifest.json file:
{
"short_name": "My Extension",
"name": "My Extension",
"version": "1.0",
"manifest_version": 3,
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"action": {
"default_icon": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"default_title": ""
},
"background": {
"service_worker": "background.js"
},
"content_scripts" : [
{
"matches": ["<all_urls>"],
"css": ["/css/root.css"],
"js": ["/static/js/content.js"]
}
],
"permissions": [
"activeTab",
"scripting",
"storage"
],
"host_permissions": ["https://www.google.com/*"],
"web_accessible_resources": [{
"resources": [
"/static/css/content.css",
"/static/media/*"
],
"matches": ["<all_urls>"]
}]
}
After many attempts, I did not understand the exact origin of the problem and I do not know how to solve it. Do you have any suggestions ?
I'm new to React and for the life of me cannot figure this out.
I have a JSON file (Fontawesome icons):
{
"icons": [
{
"name": "Glass",
"id": "glass",
"unicode": "f000",
"created": 1,
"filter": [
"martini",
"drink",
"bar",
"alcohol",
"liquor"
],
"categories": [
"Web Application Icons"
]
},
{
"name": "Music",
"id": "music",
"unicode": "f001",
"created": 1,
"filter": [
"note",
"sound"
],
"categories": [
"Web Application Icons"
]
},
// etc
To start with I just want to return the name of each icon.
I've been trying to follow various tutorials and have:
import React, { PureComponent } from "react";
import iconList from './services/iconList';
export default class App extends PureComponent {
render() {
const items = iconList.map(data=>{
return(
<div>
<ul>
<li>
<span>{data.name}</span>
</li>
</ul>
</div>
)
})
return items;
}
}
But I get the error: .map is not a function.
I'm not sure what I can do differently. Each tutorial I see seems to use the map function. Is there a better/different way?
Try using
const items = iconList.icons.map(data=>{
Your data is an object with an icons property in it. You can also destructure your iconList when you import:
import {icons as iconList } from './services/iconList';
How to get Icons dynamically in React using extension React Icon kit? I try to find out the way to add a icon dynamically in a MAP-loop as I get them from array "sociallinks"
here is the part of the code
....
import { Icon } from 'react-icons-kit'
import {facebook} from 'react-icons-kit/feather/facebook';
import {instagram} from 'react-icons-kit/feather/instagram';
import {twitter} from 'react-icons-kit/feather/twitter';
....
// dynamic array from redux store
"sociallinks": [
{
"_id": 1,
"type": "facebook",
"linkname": "Facebook",
"link": "https://www.facebook.com/zzzzz/"
},
{
"_id": 2,
"type": "instagram",
"linkname": "Instagram",
"link": "https://www.instagram.com/yyy/"
},
{
"_id": 3,
"type": "twitter",
"linkname": "Twitter",
"link": "https://twitter.com/xxx"
},
{
"_id": 4,
"type": "youtube",
"linkname": "Youtube",
"link": "https://www.youtube.com/user/youtube"
}
]
// problem is here how to markup icon = {xxxxx} from map item.type? item.link and item.linkname works fine.. but not item.type :(((
<ul>
{this.props.data.socialLinks.map((item,i) => (
<li key = {i}> <a href = {item.link}><Icon size={18} icon={item.type} />{item.linkname}</a></li>
))
}
</ul>
I am trying to use graphQL in a GatsbyJS project, and am unsure how I can pull a specific 'URL' object, from a list of three, within a 'recipeImages' object. Right now, I can only pull the recipeImages object, like this:
<img src={node.recipeImages}/>
but I want to be able to get to the three individual URL objects seen in this query:
{
"data": {
"allContentfulBlogPost": {
"edges": [
{
"node": {
"id": "c1Qz3hWuPuQEIIUkSos0MEO",
"postTitle": "Schwarzwälder Kirschtorte",
"postDate": "2018-01-30T00:00+01:00",
"slug": "schwarzwälder-kirschtorte",
"methodText": {
"childMarkdownRemark": {
"html": "<p>This is the method text</p>"
}
},
"recipeImages": [
{
"title": "imageOne",
"file": {
"url": "//images.contentful.com/62o0h4ehxjxr/kkc57vWLPaEakYueyYqC6/c61b4641797a2fcaf3476ef9a3a24db6/image.jpg"
}
},
{
"title": "imageTwo",
"file": {
"url": "//images.contentful.com/62o0h4ehxjxr/2ifxQEvnYwkaAe6e2YKISa/de2b6f62c4cac3b501fe76146b745790/image1.jpg"
}
},
{
"title": "imageThree",
"file": {
"url": "//images.contentful.com/62o0h4ehxjxr/17g7ZHqrEWIgcyuye08myG/6b55386a31db2dd319148795953da7a4/image2.jpg"
}
}
]
}
}
]
}
}
}
i got it:
<img src={recipeImages[0].responsiveResolution.src}/>
I'm working with couchbase lite .net sdk, and I got a example from below url.
and my configuration file is like below.
{
"log": ["HTTP+"],
"adminInterface": "0.0.0.0:4985",
"interface": "0.0.0.0:4984",
"databases": {
"db": {
"server": "walrus:data",
"bucket": "todo",
"users": {
"GUEST": {"disabled": false, "admin_channels": ["*"] }
}
}
}
}
when I run the wpf app, I'm getting error like below image.
image
Please help me, I'm not sure how to implement couchbase sync gateway.
I fixed the issue.
I add shadow property to configuration json file.
You can read more information from these links.
https://groups.google.com/forum/#!topic/mobile-couchbase/NWd8xqPOjsc
https://github.com/couchbase/sync_gateway/wiki/Bucket-Shadowing
{
"interface": ":4984",
"adminInterface": ":4985",
"log": [ "*" ],
"databases": {
"sync_gateway": {
"server": "walrus:",
"bucket": "sync_gateway",
"users": {
"GUEST": {
"disabled": false,
"admin_channels": [ "*" ]
},
"user": {
"admin_channels": [ "*" ],
"password": "user"
}
},
"sync": `function(doc){ "channel(doc.channels); }`,
,
"shadow": {
"server": "http://couchbase-dev.thisisdmg.com:8091",
"bucket": "sales_agent"
}
}
}
}