Uploading to netlify gives error when trying to use application

This issue has been tracked since 2021-10-27.

Building on netlify is working, but when i go to the address to test the application nothing works. So i inspected console which has this message: Uncaught ReferenceError: Fraction is not defined
at View.js:131

I have been beating my head against the wall with this, when using npm start, everything works. when i build locally and run it with live server, everything also works.
But when i upload it to netlify this error shows.

I tried a lot of different things to fix this.
If i remove fractional completely everything works on netlify.
I tried adding the fractional index.html to my js folder and importing that instead, again all is working locally, but once on netlify i get the same error.
I even tried to get the final code from this repo to upload to netlify, and i still get the same, working locally but throws the same error in netlify.
I had someone try to help me at netlify forums, he would get the same error, but when building locally said the final code from this repo was working, but mine was not. so suggested it might be some changes i made to the code, but there is not that big of a difference to the two codes.

I can not understand why this happens, or especially why it is thrown in View.js renderMessage at the line 'this._clear()'.
Just to test i tried importing fractional into View.js also, and then it instead it throws the same error in runtime-(some random numbers).js

I am starting my MVC course today, but i would still like to get this fixed, and more importantly understand what is happening.

https://forkify-aj.netlify.app/
https://github.com/amgj-dev/Forkify

jbednar97 wrote this answer on 2021-10-29

I am having the exact same problem. I think that netlify simply doesn't install Fractional.

akozdev wrote this answer on 2021-10-29

It is the problem with Fractional. Installing a different package like Fracty should help.

jbednar97 wrote this answer on 2021-10-29

It is the problem with Fractional. Installing a different package like Fracty should help.
I've managed to change Fractional for fracty, but now I'm logging :
controller.js:33 ReferenceError: _fracty is not defined

I'm afraid that fracty also isn't the solution.

akozdev wrote this answer on 2021-10-29

That's strange. Have you changed the code in recipeView.js file to
import fracty from "fracty";
and then this line
ing.quantity ? new Fraction(ing.quantity).toString() : ''
to
ing.quantity ? fracty(ing.quantity).toString() : '';
?

jbednar97 wrote this answer on 2021-10-29

That's strange. Have you changed the code in recipeView.js file to import fracty from "fracty"; and then this line ing.quantity ? new Fraction(ing.quantity).toString() : '' to ing.quantity ? fracty(ing.quantity).toString() : ''; ?

Yes I did, however fracty(ing.quantity) haven't been working, i had to use _fractry(ing.quantity) in order to work for me. I've also tried deploying with all possible options so with under-score and without too. There is my link to my repo if you'd like to check it out. https://github.com/jbednar97/Forkify-Jakub/blob/master/src/js/views/recipeView.js

akozdev wrote this answer on 2021-11-22

Can you try with this repo https://github.com/akozdev/Forkify-Fracty-Parcel2? I used latest version of Fracty and Parcel. It should work out of the box.

androidrun wrote this answer on 2022-01-14

-- First, make sure you don't have a typo at import { Fraction } from 'fractional';
-- Install [email protected]
-- change your build path: "build": "parcel build --no-minify index.html --dist-dir ./dist"

npm i [email protected]
npm i fractional
npm i -D babel-core babel-polyfill babel-preset-es2015 babel-preset-stage-0 babel-loader

After that you may have another error: [ regeneratorRuntime is not defined ] at helpers.js
import { async } from 'regenerator-runtime';

This works for me
https://forkify-adriel.netlify.app/

dimak wrote this answer on 2021-12-23

With latest Fracty and Parcel works perfectly.

"fracty": "^1.0.9",
"parcel": "^2.0.1",
More Details About Repo
Owner Name jonasschmedtmann
Repo Name complete-javascript-course
Full Name jonasschmedtmann/complete-javascript-course
Language JavaScript
Created Date 2018-06-14
Updated Date 2023-03-29
Star Count 12137
Watcher Count 850
Fork Count 14403
Issue Count 153

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date