if I use a path like this one without a trailing slash / I dont get any errors...
<Route path = '/confirm_email' component = {Confirm} />
if I add a trailing slash like this
<Route path = '/confirm_email/' component = {Confirm} />
or like
<Route path = '/confirm_email/:test' component = {Confirm} />
or even like
<Route path = '/confirm_email/:test/' component = {Confirm} />
The error I get in the browser console is Manifest: Line: 1, column: 1, Syntax error. and when I click the error it points at <!DOCTYPE html> If I add a console.log() to the page, the log shows first then the error.
I have found that If i remove the below code from the index.html page the error stops.
<script>
const darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches || false;
const favicon = document.getElementById('favicon');
const manifest = document.getElementById('manifest');
function switchIcon(darkMode) {
if (darkMode) {
favicon.href = 'favicon-dark.ico';
manifest.href='manifest-dark.json'
} else {
favicon.href = 'favicon-light.ico';
manifest.href='manifest-light.json'
}
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener( "change", (e) => switchIcon(e.matches));
switchIcon(darkMode);
</script>
The contents of manifest-dark.json is
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
I do initially load the light version, then switch to the dark version.
<link rel="manifest" id='manifest' href="%PUBLIC_URL%/manifest-light.json" />
Seems like there was path issue as you had href="%PUBLIC_URL%/manifest-light.json" in your link tag but not in your JS code manifest.href='manifest-dark.json'
Since that URL is injected from your build process you would have to plug that variable in your JS code as well.
Related
After building the project with create-react-app, and hosting it on a webserver, when you visit your website using your smartphone, and click on the "Add to home screen" button in the browser, a shortcut of your website (pwa?) gets created on your smartphone home screen,
When you open this shortcut, a loading page shows up, this loading page comes from the "./public/manifest.json" file which is in your React project,
The manifest.json file includes some options, such as changing the starter screen background color, and the title which shows down in the bottom, ex:
the following file results in the following output:
{
"short_name": "Catering",
"name": "Catering and logistics",
"icons": [
{
"src": "favicon.ico",
"sizes": "100x100 64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "icon.png",
"type": "image/png",
"sizes": "100x100"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "orange"
}
You see, there aren't many options, I want to design something which looks as follows:
So in order to do so, I should be able to write some code,
for example some CSS, some Jsx or HTML or whatever.
How to do that? where I can write the code for this loader page? and what is its name?
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
}
}
`
I have read the other posts on this matter and have tried to use the answers provided and none of them worked. I am hoping that someone can help me with this issue. I am building an application using React and AWS Lambdas. I do not have a public folder to place the manifest file into. I have placed the file in the templates folder that stores my html files as well as the root of the project and I am still receiving the error that it cannot be found. I am also not sure why it is complaining about my syntax. I ran it through JSONLint just to make sure that it was indeed valid and no errors were returned. Below is my manifest.json file:
{
"short_name": "bat",
"name": "bat",
"description": "bat",
"icons": [{
"src": "/images/image.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/image.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/",
"theme_color": "#3367D6",
"shortcuts": [{
"name": "bat",
"short_name": "bat",
"description": "bat",
"url": "./?source=pwa",
"icons": [{
"src": "/images/image.png",
"sizes": "192x192"
}]
},
{
"name": "bat",
"short_name": "bat",
"description": "bat espanol",
"url": "./es?source=pwa",
"icons": [{
"src": "/images/image.png",
"sizes": "192x192"
}]
}
]
}
If there is anything else you might need please let me know.
Update
I am still having issues with my project seeing that there is a manifest.json file. The React application was not built using create-react-app. It was built from scratch. I have been brought in to help maintain and add new features. One of these new features is the manifest.json file to convert the website to a PWA. Therefore I have added the <link rel="manifest" href="/manifest.json" /> to both of my html files as there are only two html files in the whole project. I have also created the manifest.json file in the root directory per this article and still no luck with the manifest.json file being read properly as I still receive the 404 (not found) error as well as the Line 1, column 1 Syntax Error.
Just adding the manifest file in /public is not sufficient.
You will also have to add manifest in the index.html head tag.
<link rel="manifest" href="public/manifest.json" />
Try this out.
Add the entire path in the href manifest :
<link rel="manifest" href="your_template_folder/manifest.json" />
Also I didnt have a public folder, but I use manifest .json in another folder for the PWA stuffs and using it this way works.
I'm making an app with React and I wanted to turn it into a PWA, so I've followed this tutorial to add my own caching rules. The service worker works and the template looks like this:
function run() {
if ('function' === typeof importScripts) {
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/3.5.0/workbox-sw.js'
);
/* Global workbox */
if(!workbox) return;
workbox.setConfig({ debug: false });
/* Injection point for manifest files. */
workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);
/* Custom cache rules */
workbox.routing.registerRoute(
({ url }) => url.origin === "https://www.instagram.com",
workbox.strategies.cacheFirst({
cacheName: 'instagram',
plugins: [
new workbox.expiration.Plugin({ maxAgeSeconds: 24 * 60 * 60 }),
],
})
);
}
}
run();
The SW works and it caches what it's supposed to. The manifest is passing, the start_url field is the same as the subfolder I'm hosting the React App in, but I still get the error
No matching service worker detected. You may need to reload the page, or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest.
My manifest looks like this:
{
"short_name": "ReactApp",
"name": "My React App",
"description": "blah blah blah",
"icons": [
{
"src": "favicon.ico",
"sizes": "16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/reactapp",
"display": "standalone",
"theme_color": "#7b1fa2",
"background_color": "#7b1fa2"
}
As I've said, the service worker does its job perfectly, but the browser just doesn't seem to deem it installable. What could it be?
Turns out my manifest.json was missing a single character. After running lighthouse audits, I found out the service worker's scope was https://example.net/reactapp/ while the start_url was https://example.net/reactapp without a slash at the end. So all I did was change this:
{
...
"start_url": "/reactapp",
...
}
...to this:
{
...
"start_url": "/reactapp/",
...
}
I'm trying to use App Manifest on my android mobile phone with my AngularJs/Ui-router application, it's working, but not as expected.
When I start the WebApp, it starts on the index.html, but not with the default route activate. For example, it shows up the menu, and some html I have on my index file, but it doesn't navigate to the homepage, where I have other html to build the page.
If after the initial load I start navigating with the menu, everything works as expected, I can call the states, request data from the server, etc... Is just the first load that is not working. How can I fix this?
This is my manifest:
{
"name": "Web App",
"icons": [
{
"src": "favicon-64.png",
"sizes": "64x64",
"type": "image/png",
"density": 1.0
}
],
"theme_color": "#8d2515",
"background_color": "#FFFFFF",
"start_url": "index.html",
"display": "standalone",
"orientation": "portrait"
}
The issue is your "start_url". This should most likely be set to "./".
This should be the relative URL of your default route.