JavaScript file missing when buildling - javascript

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

Related

vite build does not produce javascript file in dist folder

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"

Cannot use import statement outside a module error after export ZIP from CodeSandbox

I've downloaded this Phaser/MatterJS example from Codesandbox (->File ->Export to ZIP).
Running it locally returns this error:
Uncaught SyntaxError: Cannot use import statement outside a module - index.js:1
How to fix this?
What I tried so far:
I've installed all dependencies
Updated to latest NodeJS
Running it with a local server
Just as you have seen yourself the javascript that is written in the files is not something that the browsers understand out of the box, and so errors were thrown your way.
To send js that browsers understand, you need to use a tool like webpack, parcel. already in the project you shared parcel is used.
You have to do the following:
install the dependecies of the probject
in the root dir of the project run npm run start
parcel will bundle the files and then open an html page with the results
unfortunately when i tried this parcel did not work for me, there were errors related to JSON loading, however i have managed to get the game to work, by running npm run build, this will output for you the build files in a folder called dist.
Go to the dist folder, and start a local server there and visit the file it should work, however again for me it did not work. but i noticed that its due to parcel not getting the correct relative path of the bundled js file.
To solve that, open the index.html file in the dist folder, you will find that there is one script there
<script src="/js.d8530414.js"></script>
I had to change that to
<script src="./js.d8530414.js"></script> // because this was the correct file in my file system
After that visit the html file in the dist folder, and the game works fine.
Obviously this way of working is not conveninent, since for each change you want to see you have to build the project again using npm run build. You need to solve the problem of npm run start not working, it could be that this problem never occurs to you if you are on different os than mine. If it happens then i suggest updating parcel and trying again, if problem still persists, then you can look here since issue seems related to phaser wanting the json file as json, while parcel compiling it to javascript object.
index.html:
<script type = "module" src = "./js/index.js">
You have to tell the browser that this js file is a module, then it will change some things on the backside for you to use this. This article is very helpful for getting started with modules.

What to do when "requirejs is not defined" error thrown?

I had cloned a project from GitHub but when I had run it on my device it had thrown some error.
the project link is
https://github.com/mram98/quizwebapp.git
Please help me on what to do.
I had included the error screen shoot in the main directory of the repository.
The project is using bower. Once you have downloaded the project go to the project root and run bower install to install the dependencies
requiredjs is part of NodeJs
make sure you have configer Nodejs on your server
here this is might help RequireJS paths not work

Unable to run the Angular Project

I am following some TUTORIAL for a simple login example and I am using Angulario latest version. I tried to understand the logic and downloaded the code from REPOSITORY, but can someone help me to see this in action? After downloading the project I just changed the directory to downloaded folder and then issued npm install and then issued ng serve , but it's giving me different errors like angular.json couldn't be found etc., Have searched online to overcome these errors, but no luck. I think I am making blunder, but please go easy as I am new to Angular.
It is a version conflict. from angular6 requires new file angular.json which is not found on your project.
Try running
ng update #angular/cli --migrate-only --from=1.7.4

Visual Studio Code not performing error checking in Javascript

I've tried following these instructions:
https://code.visualstudio.com/Docs/runtimes/nodejs
I am not getting the green/red swiggly lines at all. Is there something I'm missing?
You can also see the same thing in this video:
https://youtu.be/sE8_bTEBlFg?t=1m37s
As far as I know, they're running the default editor. I've tried installing typings and typescript using npm. I've Followed that tutorial to get Javascript intellisense for node.js, but I fail to get either error/warning checking or any type information for node.js modules.
Is there a location the type files should be installed to in order to make them global to every JS project you create in VS Code?
OK, so I managed get get some code suggestions working after reading up online. Without using the whole Typings tools, I acquired node.d.ts (found it on my computer inside C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions) and placed that in my project's directory structure inside the ".vscode" folder. At the top of my .js file I added the following line:
/// <reference path=".vscode/node.d.ts" />
The code seems to be recognized now.
I read up on this tip here: How to Import Intellisense files into vsCode (Visual Studio Code)
If you are using ESLint and you have an .eslint.js file in the project root you also need the eslint dependency installed in the project. Otherwise, if there is a .eslint.js file but the ESLint dependency is not installed Visual Studio Code will report nothing in the editor.
Maybe you didn't use the -g flag to install them globally? Alternately, perhaps it's a missing jsconfig.json file?

Categories