I have a SvelteKit app that is not reading a Javascript file. The app references a CSS file and a Javascript file in the static ("public") folder, from a layout file. The files are referenced in a <svelte:head> tag in the layout file as follows:
<svelte:head>
<script src="/js/script.js" on:load={() => console.log('script:initialize')}></script>
<link rel="stylesheet" href="/css/style.css" />
</svelte:head>
The CSS file is working as expected. The Javascript file referenced by the script tag works on initial page load, but not after a page refresh. The server must be restarted for the js file to be read. The js file is present in the browser (the code can be viewed using the browser's dev tools), but the code only works if there's no page reload, and likewise the console.log above only works on initial page load, not on reload.
Versions of SvelteKit are from 1.0.0-next.345 to 1.0.0-next.420.
The file does not work when placed in app.html.
It starts with
document.addEventListener("DOMContentLoaded", () => { ...
If I add a js file to the static folder with the content console.log('hello') and add <script src="/js/hello.js" on:load={() => console.log('script:initialize:hello')}></script> to the <svelte:head> tag, the browser logs "hello", and not "script:initialize:hello".
Related
Hello I have a react app and I set the "homepage": "./" in package.json, this works for me when my application loads from the sub-directory. All the Js and CSS files get relative paths in their href attributes.
Landing page URL: https//:<my-domain>/<sub-directory-path>
The problem comes when I click on a link from my landing page it opens the new tab in a browser and the browser tries to load the page but it fails and throws the following error:
Refused to apply style from 'https:<my-domain>/<sub-directory-path>/somepage/static/css/8.28838c0e.chunk.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
When I checked in the elements tab of the browser the CSS links are loaded as followed and which is the same in my landing page
<link href="./static/css/8.28838c0e.chunk.css" rel="stylesheet">
I think because the new tab opened and URL has changed the CSS is trying to load from relative path and that's why the error is coming.
Any idea how to fix this? OR I should not open a new tab when there is relative path set for the homepage key in package.json file?
Try specifying the type of the css file type="text/css"
and removing the dot from the css link path href="static/css/8.28838c0e.chunk.css"
The html line should look like this:
<link rel="stylesheet" type="text/css" href="static/css/8.28838c0e.chunk.css"/>
I've been developing an embeddable widget using CreateReactApp. It works great when initialised from the index.html
Now I want to test what happens when the user changes page in the html. Ill need to save the app's state in storage etc.
When I add a second html page to the public folder (two.html) and navigate to it - I get the error:
URI Error: Failed to decode param '/%PUBLIC_URL%/favicon.ico'
..and the app js does not run.
How can update my app so I can use a second html page?
The issue maybe caused due to babel not able to transpile the % .
Please try updating this in index.html :
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
to this:
<link rel="icon" href="/public/favicon.ico" />
I created the build file for my React JS project. As soon the build index.html file in browser, everything worked fine, except for a single image that I have provided in my Topbar Component. The image appears broken, even after it is present in my application folder.
Here is the screenshot of broken image:
and this is how the image element looks in inspect tool:
Can anyone please suggest the reason for this?
We have to Create image file with in the public folder then access the image file in href
<link rel="icon" type="image/png" sizes="32x32" href="/img.png"> here img.png is the image file name and see the folder structure is like
project
public -- >index.html
public -- > img.png
src
package.json
I'm creating static .html files from my React Apps with https://github.com/gajus/usus (background job)
and put it in the /public and make new folder ie. /article/
Issue : whenever I open that html file ie. aaa-bbb-ccc-ddd.html it is rendered firstly and then the index.html show up at last.
How to properly open .html file in the React Js app?
NB : I'm using create-react-app
say, you have test.html in public/article/, then in the src/example.js you can use <a href='/article/test.html' target='_blank'>link to test.html</a> to open test.html in a new window.
I have two javascript files:
vendor.js - where I have angular.js and another libs;
app.js - own code.
But when I loaded it prerender not opened my page.
When I concatenate it to one file - all OK.
How can I fix it?
Looks like you might be loading those <script> tags in the <body> of your page. Scripts that are in the body are loaded asynchronously so they can load out of order (and cause javascript errors if loaded out of order). Chrome and most browsers handle this nicely but PhantomJS can load them out of order.
I'd suggest trying to move those <script> tags into the <head> and see if that fixes your issue.