I just build a flutter web project. I hosted it on github pages. After successfully from creating repository to deploying project I am getting this following error...
(index):46 Uncaught ReferenceError: _flutter is not defined
I don't understand why is this happening. I tried flutter clean.
I searched for the solution. but many people suggested that run flutter clean command but it made no effect on the project.
Here is my code code for web build.
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
This is a placeholder for base href that will be replaced by the value of
the `--base-href` argument provided to `flutter build`.
-->
<base href="$FLUTTER_BASE_HREF">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="code_snippets">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png" />
<title>code_snippets</title>
<link rel="manifest" href="manifest.json">
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = null;
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
</head>
<body>
<script>
window.addEventListener('load', function (ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function (engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function (appRunner) {
return appRunner.runApp();
});
});
</script>
</body>
</html>
Uncaught ReferenceError: _flutter is not defined is may caused by wrong deployed folder.
you have to delpoy web directory insted of build/web
here some reference from github issue: https://github.com/flutter/flutter/issues/107448#issuecomment-1181591460
or you may try this solution :
Is `Flutter build web` supposed to output a file called flutter.js? Because it does not by me :(
Related
I'm building my first web App with stencil.js and until now I had my JavaScript code in my index.html file, but now I want to move my code to a separate file (script.js). But when I link script.js file it doesn't work.
Here is my index.html file:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>Booker App</title>
<meta name="Description" content="Welcome to the Stencil App Starter. You can use this starter to build entire apps all with web components using Stencil!">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<meta name="theme-color" content="#16161d">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="x-ua-compatible" content="IE=Edge">
<script type="module" src="/build/app.esm.js"></script>
<script nomodule src="/build/app.js"></script>
<link href="/build/app.css" rel="stylesheet">
<link rel="manifest" href="/manifest.json">
<script src="./script.js"></script>
</head>
<body>
<booker-header></booker-header>
<booker-display></booker-display>
<booker-buttons name="Add Books"></booker-buttons>
<booker-form></booker-form>
<!-- <script>
var btn = document.querySelector('booker-buttons');
var form = document.querySelector('booker-form');
btn.addEventListener('click', function() {
form.open();
})
</script> -->
</body>
</html>
And here is my script.js file:
var btn = document.querySelector('booker-buttons');
var form = document.querySelector('booker-form');
btn.addEventListener('click', function () {
console.log('testing if file works');
form.open();
});
I tried putting script tag before </body> and it didn't help
Original Answer, still relevant
By moving your script into an external file it can now execute before the rest of the page is loaded since the script tag is above where the commented script is in the original HTML page.
Try wrapping your entire script in the DOMContentLoaded event to force it to wait until all of the page has loaded.
document.addEventListener('DOMContentLoaded', function () {
var btn = document.querySelector('booker-buttons');
var form = document.querySelector('booker-form');
btn.addEventListener('click', function () {
console.log('testing if file works');
form.open();
});
});
404 error answer
The src attribute for script.js starts with ./ and not / like all of the other resources you're loading in the header. Technically that's a relative reference which is ok, as long as script.js is right next to the HTML file in the directory tree.
Check your directory tree and make sure you have something like this. And make sure you have script.js at the root location which appears to be right next to mainfest.json.
- index.html
- script.js
-build
|-app.esm.js
|-app.js
This question is being asked after spending weeks and giving up multiple times on trying to solve this.
I'm developing a VSCode extension that needs to make use of the Webview API. For a while, this could be using Svelte, but now with SvelteKit released as stable and being treated as default when you do npm create svelte, I targetted to use that. After configuring the app to be static SPA with SSR turned off and using the #sveltejs/adapter-static, it seems that serving it is not the same as it was with vanilla Svelte.
This is the svelte.config.js:
import adapter from '#sveltejs/adapter-static';
import preprocess from 'svelte-preprocess';
/**
* Consult https://github.com/sveltejs/svelte-preprocess
* for more information about preprocessors
*
* #type {import('#sveltejs/kit').Config} */
export default {
preprocess: preprocess(),
kit: {
adapter: adapter({ fallback: 'index.html' }),
// ssr: false, // deprecated
csp: {
directives: {
'default-src': ['none'],
'img-src': ['{{cspSource}} https:'],
'script-src': ['{{cspSource}}'],
'style-src': ['{{cspSource}}'],
},
},
// paths: {
// base: '{{baseURL}}', // not accepted
// },
},
};
This is the built HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="content-security-policy" content="default-src 'none'; img-src {{cspSource}} https:; script-src {{cspSource}} 'sha256-N2DRY+AREasGSTE5X4BdHoEYZsaGOpTvUwTBIHmryVA='; style-src {{cspSource}}">
<link rel="modulepreload" href="/_app/immutable/start-e16b6a0f.js">
<link rel="modulepreload" href="/_app/immutable/chunks/index-0576dc7c.js">
<link rel="modulepreload" href="/_app/immutable/chunks/singletons-51070258.js">
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">
<script type="module" data-sveltekit-hydrate="45h">
import { start } from "/_app/immutable/start-e16b6a0f.js";
start({
env: {},
paths: {"base":"","assets":""},
target: document.querySelector('[data-sveltekit-hydrate="45h"]').parentNode,
version: "1672682689612"
});
</script></div>
</body>
</html>
Contrary to vanilla Svelte that would generate something like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
<meta name="viewport" content="width=device-width" />
<script src="/dist/app/main.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
That could be served through Webview like:
function getWebviewContent(webview, context) {
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
http-equiv="Content-Security-Policy"
content="${[
"default-src 'none'",
`img-src ${webview.cspSource} https:`,
`script-src ${webview.cspSource}`,
`style-src ${webview.cspSource}`,
].join(';')};"
/>
<title>My Extension</title>
<script type="module" crossorigin src="${webview.asWebviewUri(
vscode.Uri.joinPath(context.extensionUri, 'dist/app/main.js')
)}"></script>
<link rel="stylesheet" href="${webview.asWebviewUri(
vscode.Uri.joinPath(context.extensionUri, 'dist/app/style.css')
)}">
</head>
<body><div id="app"></div></body>
</html>
`;
}
The file is bit more complex now, so I can't (and shouldn't) try to rewrite it in this function.
The following are the conditions:
VSCode needs absolute paths since it has different environments and protocols. Keep in mind that an extension is served locally to every user. (context.extensionUri is IMPORTANT)
SvelteKit has its set of configurations (different from Vite) that may pose to be restrictive specially with SPA mode.
Content Security Policy for Webview is also restrictive to what and what can't be used.
Probably due to Vite, the file names have hashes, so it's not consistent - but I'm preferring to keep that.
The script block in the HTML (may also need a nonce) is importing the start function relatively as a module.
Instead of writing another template as a string for VSCode that would need to be maintained, it would be ideal to have the generated HTML read into VSCode and served. Using Mustache seems good (hence you see {{cspSource}} in the HTML above).
How would one suggest to architecture and integrate this?
How can I set deployment path in Svelte?
I would like to use it on the webserver in different path like
https://example.com/somewhere-else/index.html
But now right after i run npm build, I must use it like:
https://example.com/index.html
It must be something in the rollup.config.js but I cannot find it out.
I imagine you are using the standard svelte template?
https://github.com/sveltejs/template
The bundles it creates are not restricted to a specific path. You just need to put them in the appropriate path and update the link and script tags in the index.html file appropriately:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Svelte app</title>
<link rel='icon' type='image/png' href='/favicon.png'><!-- change this -->
<link rel='stylesheet' href='/global.css'><!-- change this -->
<link rel='stylesheet' href='/build/bundle.css'><!-- change this -->
<script defer src='/build/bundle.js'></script><!-- change this -->
</head>
<body>
</body>
</html>
Does this answer your question, or is your problem more complicated?
I have a curious error while i try to download an apk file with a website in vue :
Based on How to download a locally stored file in VueJS, i try to download a local file with this command :
Download
But no matter what i put in href, the file download is always this file :
<!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" href="/favicon.ico">
<title>client_web</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css">
<link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
<body>
<noscript>
<strong>We're sorry but client_web doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>
I don't understand where this file come from, and how to make my link download the apk file.
Edit: vue.config.js
"transpileDependencies": [
"vuetify"
],
chainWebpack: config => {
config.module
.rule('apk')
.test(/\.(apk)$/)
.use('apk-loader')
.loader('apk-loader')
.end();
}
}
Directory Tree:
│ └──views
│ └──APKDownload.vue
└──app-debug.apk```
There could be 2 problems:
Server does not allows you to download '.apk' files.
There is a path problem. The fastest way to check it is in DevTools/Network, what url is used to download file as you use ../../app-debug.apk.
I am trying to set up my facebook instant game.
I have followed https://developers.facebook.com/docs/games/instant-games/test-publish-share , to test locally then deploy into production.
When testing, everything works fine. However, in production, nothing shows up (black screen) when I open my game. <app-root> doesn't render, app-home's constructor isn't called and it takes up 0x0 pixels.
This is my index.html
<!--
Copyright (c) 2017-present, Facebook, Inc.
All rights reserved.
This source code is licensed under the license found in the
LICENSE file in the root directory of this source tree.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="full-screen" content="yes" />
<meta name="screen-orientation" content="portrait" />
<meta name="viewport" content="user-scalable=no" />
<script type="module" src="/build/app.esm.js"></script>
<script nomodule src="/build/app.js"></script>
<link href="/build/app.css" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/icon/apple-touch-icon.png">
<link rel="icon" type="image/x-icon" href="/assets/icon/favicon.ico">
<link rel="manifest" href="/manifest.json">
</head>
<body>
<script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>
<script type="text/javascript">
const assets = [
'img/asset1.png',
'img/asset2.png',
'img/asset3.png',
'img/asset4.png'
];
window.onload = function () {
// When the window loads, start to initialize the SDK
FBInstant.initializeAsync().then(function () {
// We can start to load assets
for (let i in assets) {
// When preloading assets, make sure to report the progress
FBInstant.setLoadingProgress(i / assets.length * 100);
}
// Now that assets are loaded, call startGameAsync
FBInstant.startGameAsync().then(() => console.log("initialized"));
});
};
</script>
<app-root></app-root>
</body>
</html>
'initialized' is printed in the console, when I open the game. There are two errors there with it (which might have to do with the error I am having)
Console logs
The 404 error (resource not found) is a .js file which I checked was included in the .zip file which I uploaded.
This is what i see when I inspect element on the game
Inspect element
Also, on mobile, nothing is displayed (white screen)
Any help would be greatly appreciated.
Thanks! :)