I am trying to deploy my vanilla JS app to Firebase hosting.
I am using Vite as a build tool.
When I run it locally, it works fine. But when I deploy it to Firebase hosting, I realized that it was missing main.js file.
I checked my dist folder generated by Vite, and it was indeed missing main.js file.
I never ran into this issue before when using JS framework, but now I am with Vanilla JS.
How can I make sure that my build will contain javascript file as well?
Your script tag should look like this :
<script src="./main.js" type="module"></script>
There must be an attribute :
type="module"
Related
When Deploying a web app using Vite, I am unable to deploy the .js file. Getting the below issue.
$ vite build
vite v2.8.6 building for production...
**\<script src="/index.js"\> in "/index.html" can't be bundled without type="module" attribute**
transforming...
I cannot use in script type=module as I have no import of code to be done. If I use then error is coming.
If anyone can help.
I tried using script type=module but error is coming. Is there any way I can deploy with Vite without using type=module ?
I'm just trying to generate a build using parcel build /src/index.html,
I'm able to build the app, but when I try to open the build form a browser, it says it is unable to access index.js from index.html after build.
<body>
<div id="root"></div>
<script src="index.js" type="module"></script>
</body>
Anyway, Im having no issues on running the project locally.
Please take a look at the images below to understand my concern.
Thanks.
You need to serve the dist directory from a web server.
F.I. from your terminal:
cd dist
npx serve
I have a vanilla JS application. I'm using Vite as a frontend build tool.
<script src="./src/main.js"></script>
<input type="button" value="Connect" onclick="connect();" />
The code above works locally, but when it builds, it does NOT produce JS file in the dist folder (which I set to deploy), and hence the program errors when deployed.
The error is Uncaught ReferenceError: connect is not defined at HTMLInputElement.onclick
How can I solve this?
I deployed it to Firebase hosting using Vite to build.
Edit:
I moved main branch to Svelte so it works, but vanilla js does not work, which is in the petite-vue branch. If you want to test it out for the error, please check out this branch.
The source code is here
https://github.com/leochoo/emotion/blob/petite-vue/index.html
I think your project is a bit messed, I made you a working example vite + svelte + microbit available on Github :
https://github.com/flydev-fr/so-vite-svelte-microbit
Just clone the repo, then run yarn and yarn build
I am using webpack and webpack-dev-server and currently developing a web application using vue.js and express.js
webpack is bundling all js files into a single js file and the script is being used in the index.html.
<script src="/public-path/bundle-name.js" />
webpack also loads all CSS files using various CSS loaders such as css-loader and sass-loader and the bundle goes into the memory.
I am in need of linking the CSS bundle like the JS bundle but I do not know the public path.
I know I can use "html-webpack-plugin" which can inject the stylesheets into index.html but because the HTML is being sent from the express server, I can't use the plugin
I'd appreciate it if you can help me with this. I've spent a couple of days to figure this out but ended up posting it here.
Best
Im trying to include this library into my electron app and it works when I start my electron app in development mode (electron-forge start). But when I build my app using electron-builder --win I get an error saying Date.today is not a function.
I included the library in my index.html like so
<script type="text/javascript" src="js/Datejs/build/date-de-DE.js"></script>
Having not seen any code or folder structure, I am going to take a guess and say that when your app is built, Electron doesn't see the path to js/Datejs/build/date-de-DE.js because it's running directory is in a different folder than the js directory. In other words, the js directory was most likely excluded from the build process.
Are you sure that you are including all the right files in the build process?
Check out the documentation to see how to set the config to include different files