Uncaught ReferenceError when deploying to Netlify - javascript

I have published a git repo (https://github.com/GeorgeFlorian/Forkify-App) to Netlify (https://forkify-jorje.netlify.app/) after following an Udemy tutorial:
Everything works locally, but when I deploy it I get
Uncaught ReferenceError: Fraction is not defined
at View.js:96
Fraction is not even inside View.js module: https://github.com/GeorgeFlorian/Forkify-App/blob/main/src/js/views/View.js
It is inside another one: https://github.com/GeorgeFlorian/Forkify-App/blob/main/src/js/views/recipeView.js
I don't know how to recreate this bug. All I did was follow the tutorial. The tutor's deployment worked, mine did not.
This is package.json:
{
"name": "forkify-app",
"version": "1.0.0",
"description": "",
"default": "index.html",
"scripts": {
"start": "parcel index.html --open",
"build": "parcel build index.html --dist-dir ./dist"
},
"repository": {
"type": "git",
"url": "git+https://github.com/GeorgeFlorian/Forkify-App.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/GeorgeFlorian/Forkify-App/issues"
},
"homepage": "https://github.com/GeorgeFlorian/Forkify-App#readme",
"devDependencies": {
"#parcel/transformer-sass": "^2.0.1",
"parcel": "^2.0.1"
},
"dependencies": {
"core-js": "^3.19.2",
"fractional": "^1.0.0",
"regenerator-runtime": "^0.13.9"
}
}
I can't find anything relevant online and that's why I've posted here.

I got the same error, did the same JS Udemy course by Jonas lol. I found out the problem has to do something with parcel hoisting. Insert --no-scope-hoist in front of the build command like this & try
parcel build index.html --no-scope-hoist

Use a different package Fracty instead of Fractional

For some reason, none of those 2 packages mentioned are working at this time. For those encountering the same issue, uninstall Fractional and deploy again. It will work, but another solution needs to be applied to cover for the uninstalled package
npm un Fractional
then
git add -A
git commit -m 'Removed Fractional'
then
git push origin master
Test and all app functions should be back to normal, as tested on local, but the fractional features that you'll have to replace.

Related

How to migrate from plain Svelte to add SvelteKit features?

I created a svelte app using Vite from the Svelte template. I have a tiny package.json and I want to start using Sveltekit. Here is the package.json
{
"name": "jxb2",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"#sveltejs/vite-plugin-svelte": "^2.0.2",
"svelte": "^3.55.1",
"vite": "^4.1.0"
},
"dependencies": {
"axios": "^1.3.2"
}
}
However, the docs dont say anything about making this ugprade. Sveltekit talks about how to create a project but says nothing about upgrading from svelte. I want to use the routing feature.
I can find a page about migrating from sapper but i dont want to do that, I want to get there from Svelte
What I ended up doing was just copy-pasting my whole project over from the svelte proj into the sveltekit proj
Took about three minutes because it's still a small job. Mostly changed ./path to ../path to accommodate my files now being in /src/routes instead of /src/App.svelte

Parcel localhost server not updating

I am using the parcel (v2.0.1) localhost server with hot module replacement to develop a simple HTML/SASS/JS-based web app. The HMR is working fine most of the time, but from time to time, especially when making significant changes to the code, ALL server updating stops working -- i.e. not only does HMR not work, but I can't even get the server to reflect the changes by reloading the browser page completely or even stopping and restarting the server. To make sure I wasn't just missing something simple I made changes to the code that would DEFINITELY break certain features and restarted the server, but the page still worked as normal.
I have also tried deleting the .parcel-cache and dist folders and re-running parcel and that has not worked either. Restarting my computer has not worked either. The only mention I've seen of this problem is this github discussion.
Has anyone had a similar problem? Thanks!
Here is the package.json file:
{
"name": "",
"version": "1.0.0",
"description": "",
"source": "index.html",
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#parcel/transformer-sass": "^2.0.1",
"parcel": "^2.0.1"
},
"dependencies": {
"core-js": "^3.19.3",
"fractional": "^1.0.0",
"regenerator-runtime": "^0.13.9"
}
}
I solved this problem with the following code:
"start": "parcel index.html && parcel watch index.html",
Put this in your script tag:
type="module"
Met the same issue: parcel stops working. Especially for me, it happens when I leave a project for day-two and when returned it's broken yet. Even full reinstall (including package.json removing) can't fix the problem. After reinstall, previous broken state is still preserved: it runs recent working code version (I don't understand from where it get the correct code, all data was removed) and doesn't react on any changes except syntax error which cause throwing related errors.

Can't make ESlint work on VSC, keep having 'unexpected error...in Json...'

I am learning JS and I am trying to install ESlint but I keep having the same error.
Just trying to install ESlint on VSC, but never got it working. I have uninstalled and reinstalled eslint, cache clean, installed and removed several packages without success, it comes back with the same error.
package.json
{
"name": "11_06",
"version": "1.0.0",
"description": "",
"main": "script.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"tslib": "^1.10.0"
}
}
Error message:
"ESLint: Unexpected token n in JSON at position 173. Please see the 'ESLint' output channel for details."
How/where/which file can I look at line 173 for the issue?
UPDATE:
I found the source of the problem, despite installing eslint several times properly using the recommended methods by npm or auto install, globally and locally, then cleaning cache and trying it again and again, I eventually found a problem with the way eslint was installing on my VSC, I don't know why but it was not creating the eslintrc.json file with the basic info. Once I created it manually eslint started working. Still don't know what I have done wrong initially. Good luck.

"react doesn't exist" in Node.js command prompt

This is my 1st question in this site :)
I'm pretty new to coding and I'm currently working in react.
I was making my first project yesterday, today I went back to it and initialized live-server and babel compiler for my jsx component, this is the code I put in:
C:\Users\asus\Desktop\Adolf\react-course-projects\indecision-app>babel src/playg
round/play.js --out-file=public/scripts/app.js --presets=env, react --watch
But after I hit enter all it answers its:
"react doesn't exist"
if I take "react" off the code and leave just env it works fine , but I think it must be there for correct parsing or something... i already did npm install again...
This is my package.json
{
"name": "indecision-app",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"babel-preset-env": "1.5.2",
"babel-preset-react": "6.24.1"
}
}
Seems like both dependencies are there...
Any ideas?
Thanks in advance! :)
It looks like you're missinng react package.
But if you're new to React, I would suggest to start with create-react-app https://github.com/facebook/create-react-app. That will setup everything for you, it's easier to start with that.
{
"name": "indecision-app",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"babel-preset-env": "1.5.2",
"babel-preset-react": "6.24.1"
"react": "16.3.1",
"react-dom": "16.3.1",
}
}
you need to install react and react-dom use npm install --save react react-dom to add those on you dependencies.
In this tutorial, you're supposed to cut the JSX written in public/scripts/app and pasted it in src/app . Your babel command then requests that the JSX in src/app gets transpiled into the 'output file' public/scripts/app.
Unless the JSX is in the right file, you'll also get the same error you described.
the following command should not have a space between env and react
babel src/playg round/play.js --out-file=public/scripts/app.js --presets=env, react --watch
try this
babel src/playg round/play.js --out-file=public/scripts/app.js --presets=env,react --watch
it should work

How to get rid of BrowserSync usage for Excel add-in

I wrote a small Excel add-in using node.js with jQuery. The source code was generated by "yo office". Below is the content of package.json file.
{
"name": "my-office-add-in",
"description": "",
"author": "",
"version": "0.1.0",
"scripts": {
"start": "browser-sync start --config bsconfig.json",
"validate": "./node_modules/.bin/validate-office-addin"
},
"dependencies": {
"core-js": "^2.4.1",
"jquery": "^3.1.1",
"datatables.net": "^1.10.16",
"datatables.net-dt": "^1.10.16",
"office-addin-validator": "^1.0.1",
"office-ui-fabric-js": "^1.3.0"
},
"devDependencies": {
"browser-sync": "^2.18.5",
"#types/office-js": "^0.0.37"
}
}
I need to get rid of BrowserSync usage and use another command to start my application. The reason I need to do that is my Excel add-in is being placed onto a shared folder and used by multiple users. BrowserSync synchronizes views in browsers of different users who work simultaneously.
Can someone show me the alternative solution? Thanks in advance.
You can use any package that spins up an https web server.
http-server is an alternative you can get using npm.
https://www.npmjs.com/package/http-server
To install:
npm install http-server --save-dev
From there change your start script to "start": "http-server --ssl"
That will start a server at your root directory and you can navigate to your index file.

Categories

Resources