I am making a React app using Snowpack. Everything works correctly, the build is also successful. But when I am tying to open the index.html of the build, the page is blank.
I have found a temporary fix, by modifying the index.html from the build folder.
Original index.html build code (Blank page):
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React page</title>
</head>
<body>
<div id="root"></div>
<script src="/js/webpack-runtime.0ec3dfa59e6510ed107b.js"></script><script src="/js/lib-react-dom.743af248c46307798cb8.js"></script><script src="/js/index.6929e3680f85299b6d65.js"></script>
</body></html>
and here is the modified one that is working:
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React page</title>
</head>
<body>
<div id="root"></div>
<script src="./js/webpack-runtime.0ec3dfa59e6510ed107b.js"></script><script src="./js/lib-react-dom.743af248c46307798cb8.js"></script><script src="./js/index.6929e3680f85299b6d65.js"></script>
</body></html>
The trick is to replace src=/js/xxxxx.js to src=./js/xxxxx.js
The problem is that is very annoying to modify each time you build the project so is there any way to fix this ?
Here is my snowpack.config.js code:
module.exports = {
devOptions: {
port: 3000
},
mount: {
src: "/dist",
public: {url: "/", static: true}
},
plugins: [
[
'#snowpack/plugin-webpack', {
htmlMinifierOptions: false
}
]
]
}
and the script tag of my index.html:
<script src="./dist/index.js" type="module"></script>
Thanks in advance for the help !
I think you are pointing the public scripts load URL to be at the root of your computer, not the place that your scripts have been put!
I think if you change your mount.public to this:
public: {url: "./", static: true}
It should work correctly!
Related
I want to use EditorJS in my project. So I have created an HTML file after reading the documentation. Here is the file called index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<div id="editorjs"></div>
<script src="https://cdn.jsdelivr.net/npm/#editorjs/editorjs#latest"></script>
<script>
import EditorJS from '#editorjs/editorjs'
const editor = new EditorJS('editorjs')
</script>
</body>
</html>
After opening the file into the browser, EditorJS is not showing up and this message is printed in the console- Uncaught SyntaxError: Cannot use import statement outside a module.
How to fix this problem?
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/#editorjs/editorjs#latest"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<div id="editorjs"></div>
<script>
const editor = new EditorJS({
autofocus: true
});
</script>
</body>
</html>
When you add a script tag in your HTML file, you don't need to import the library again you can just start using it!
The script isn't a type module, use:
<script type="module">
I am working on very simple one-page html project. It's static.html that is suppose to load data from external local file and generate some graphs/charts/etc. I am using Vue and I am stuck.
My public/index.html hasdefault content like follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" type="image/png" href="img/favicon/black.png">
<title>DummyTitle</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without
JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
And there is something I do not understand. After yarn build, dist/index.html has content as follows
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<title>Vue App</title>
<link href=css/app.9288aca6.css rel=preload as=style>
<link href=js/app.2c3ec05b.js rel=preload as=script>
<link href=js/chunk-vendors.6fa5766d.js rel=preload as=script>
<link href=css/app.9288aca6.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=js/chunk-vendors.6fa5766d.js></script>
<script src=js/app.2c3ec05b.js></script>
</body>
</html>
What the hell happened? Why title has changed to Vue App and where is favicon? I was looking for similar questions and problems and found nothing what would help me understand why is that.
First of all, I think there shouldn't be any specific reason to rename html file in public directory from index to dummy.
If you only need output name as dummy in dist folder, then rename html file in public folder to index and use this in vue.config.js. This will solve the issue.
module.exports = {
publicPath: '/',
indexPath: 'dummy.html'
}
If you need html file to be named as dummy, both in project structure and dist, just use this in vue.config.js. This will solve the title issue. Refer this official doc link Vue Config Docs Link
module.exports = {
pages: {
index: {
// entry for the page
entry: 'src/main.js',
// the source template
template: 'public/dummy.html',
// output as dist/index.html
filename: 'dummy.html'
}
},
publicPath: '/',
indexPath: 'dummy.html'
}
The errors appear at the console after i open this code on live server on vscode, im learning Vue.js and the code itself opens the file but i dont know how to fix those errors.
Ive reasearched somethings about the errors but couldnt fix them.`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./vuejs"></script>
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<p>teste</p>
<script>
const vm = new Vue();
console.log(vm)
</script>
</body>
</html>`
I have been studying typescript.
I am encountering the below error while studying node modules.
Clicking on the anonymous function take me to the below code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Learning TypeScript</title>
<script src="node_modules/systemjs/dist/system.js"></script>
</head>
<body>
<script>
System.import('app.js')
</script>
</body>
</html>
Here is the link to my demo project
If you are using newest version of SystemJS. You have to make some change:
index.html: use System.import('./app.js') instead of System.import('app.js') // hmm
tsconfig.json: use "module": "system" instead of "module": "commonjs".
app.ts: use import { PI, calculateCircumference } from "./maths/circle.js"; instead of import { PI, calculateCircumference } from "./maths/circle"; // hmm
(I can not find a way to config baseUrl or defaultExtension)
Run tsc command to rebuild app.js file before you reload html page on browser.
I am trying to use Instafeed.js, but my code will not work. I tried the download button at the InstafeedJS website, but it only shows code. I copied that code into a file, saved it as instafeed.min.js, and linked it to my webpage. I followed the steps at the Instafeed website, but it didn't work.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="instafeed.min.js"></script>
<script type="text/javascript">
var feed = new Instafeed({
get: 'tagged',
tagName: 'awesome',
clientId: 'CLIENT-ID',
accessToken: 'ACCESS-TOKEN',
template: '<li><div><img src="{{image}}" /> <h3>{{caption}}</h3></div></li>',
resolution: 'standard_resolution'
});
feed.run();
</script>
</head>
<body>
<div id="instafeed"></div>
</body>
</html>
Keep in mind that I do have the correct clientID and accessToken, but I didn't put them in the code above so nobody else can use them.
Try putting the <script></script> tags in the <body>, after the <div id="instafeed"></div>. The JS may be running before the DOM is loaded.