Function not declared (only on Netlify)

Support
1

I have problems with a web application uploaded to Netlify.
The site address is forkify-aj.netlify.app.
The site is using continuous deployment, connected to my GitHub repo.
Everything is working for me on locally in developing mode, and in final build run locally with live-server.
I tried it both with asset optimization enabled and disabled on Netlify.

The error is that: Fraction is not declared, which is a module imported through common js library.
I compared the file on Netlify using chrome dev tools, to my local build compressed files, the function is declared the same way in both.
This also tells me that there was no problem getting the module from common js, which was confirmed by NOT minifying files on Netlify.
I can also see from this that fractional is added in the file structure.
The error is thrown in a parent to where this is used, in a function that has nothing to do with fractions, which i don’t understand why.
This function is also never used in the child module that actually uses fraction.

If i remove fraction, the application run as intended, but obviously i would like to get this working instead.
I have done a lot of experimenting to the files, imports, spell check and more, made no difference.
I also tried to import fraction into the module where the error is thrown, this caused the error to be thrown in runtime-xxx.js instead.
With all changes i also re deploy without cache, to avoid issues from that.

this application was made following a course, that includes uploading to Netlify.
The difference i noticed with files are that the course videos use core-js 3.6.5, while i use 3.18.3, i assume this is not causing any problem.
There is also some difference to the Netlify UI, where i get some additional setting when creating a site.
I can specify a base directory, which i left blank because the entry file for my build command is in the main repo directory, and only contains this application.
I also have the final files which the course uploaded to Netlify, i tried uploading the same files to my account, same problem: Fraction not declared.
This leads me to belive that the problem is with Netlify and not my files.

Any help with getting this working correctly would be appreciated, even though this application is of no significance, i would still like to know for future use what is going wrong.

Deploy log
10:14:00 AM: Build ready to start
10:14:02 AM: build-image version: 3bcb38c35508b42e9121d4badfe6d8c66fd7a3f0
10:14:02 AM: build-image tag: v4.3.2
10:14:02 AM: buildbot version: 5f1a3c6e77d89b95b77370734ae1aecf3a51e9c1
10:14:02 AM: Building without cache
10:14:02 AM: Starting to prepare the repo for build
10:14:05 AM: No cached dependencies found. Cloning fresh repo
10:14:05 AM: git clone https://github.com/amgj-dev/Forkify
10:14:06 AM: Preparing Git Reference refs/heads/master
10:14:07 AM: Parsing package.json dependencies
10:14:07 AM: Starting build script
10:14:08 AM: Installing dependencies
10:14:08 AM: Python version set to 2.7
10:14:08 AM: Downloading and installing node v16.12.0…
10:14:09 AM: Downloading https://nodejs.org/dist/v16.12.0/node-v16.12.0-linux-x64.tar.xz…
10:14:09 AM: Computing checksum with sha256sum
10:14:09 AM: Checksums matched!
10:14:12 AM: Now using node v16.12.0 (npm v8.1.0)
10:14:12 AM: Started restoring cached build plugins
10:14:12 AM: Finished restoring cached build plugins
10:14:12 AM: Attempting ruby version 2.7.2, read from environment
10:14:14 AM: Using ruby version 2.7.2
10:14:14 AM: Using PHP version 8.0
10:14:14 AM: Started restoring cached node modules
10:14:14 AM: Finished restoring cached node modules
10:14:15 AM: Installing NPM modules using NPM version 8.1.0
10:14:16 AM: npm WARN old lockfile
10:14:16 AM: npm WARN old lockfile The package-lock.json file was created with an old version of npm,
10:14:16 AM: npm WARN old lockfile so supplemental metadata must be fetched from the registry.
10:14:16 AM: npm WARN old lockfile
10:14:16 AM: npm WARN old lockfile This is a one-time fix-up, please be patient…
10:14:16 AM: npm WARN old lockfile
10:14:29 AM: npm WARN deprecated har-validator@5.1.5: this library is no longer supported
10:14:30 AM: npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See There’s Math.random(), and then there’s Math.random() · V8 for details.
10:14:31 AM: npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
10:14:31 AM: npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
10:14:31 AM: npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
10:14:40 AM: added 678 packages, and audited 679 packages in 25s
10:14:40 AM: 143 packages are looking for funding
10:14:40 AM: run npm fund for details
10:14:40 AM: found 0 vulnerabilities
10:14:40 AM: NPM modules installed
10:14:41 AM: Started restoring cached go cache
10:14:41 AM: Finished restoring cached go cache
10:14:41 AM: go version go1.16.5 linux/amd64
10:14:41 AM: go version go1.16.5 linux/amd64
10:14:41 AM: Installing missing commands
10:14:41 AM: Verify run directory
10:14:42 AM: ​
10:14:42 AM: ────────────────────────────────────────────────────────────────
10:14:42 AM: Netlify Build
10:14:42 AM: ────────────────────────────────────────────────────────────────
10:14:42 AM: ​
10:14:42 AM: ❯ Version
10:14:42 AM: @netlify/build 18.17.7
10:14:42 AM: ​
10:14:42 AM: ❯ Flags
10:14:42 AM: baseRelDir: true
10:14:42 AM: buildId: 6177b8c8eba7b5a197aac53e
10:14:42 AM: deployId: 6177b8c8eba7b5a197aac540
10:14:42 AM: ​
10:14:42 AM: ❯ Current directory
10:14:42 AM: /opt/build/repo
10:14:42 AM: ​
10:14:42 AM: ❯ Config file
10:14:42 AM: No config file was defined: using default values.
10:14:42 AM: ​
10:14:42 AM: ❯ Context
10:14:42 AM: production
10:14:42 AM: ​
10:14:42 AM: ────────────────────────────────────────────────────────────────
10:14:42 AM: 1. Build command from Netlify app
10:14:42 AM: ────────────────────────────────────────────────────────────────
10:14:42 AM: ​
10:14:42 AM: $ npm run build
10:14:43 AM: > forkify@1.0.0 build
10:14:43 AM: > parcel build index.html --dist-dir ./dist
10:14:43 AM: Building…
10:14:46 AM: Bundling…
10:14:47 AM: Packaging & Optimizing…
10:14:53 AM: :sparkles: Built in 9.53s
10:14:53 AM: dist/index.html 3.89 KB 2.69s
10:14:53 AM: dist/favicon.76dd299c.png 8.25 KB 5.39s
10:14:53 AM: dist/logo.8a7af738.png 57.71 KB 2.29s
10:14:53 AM: dist/icons.9801e6f1.svg 8.81 KB 5.88s
10:14:53 AM: dist/index.07177311.css 9.98 KB 3.18s
10:14:53 AM: dist/index.f5f7a34c.js 135.11 KB 5.50s
10:14:53 AM: dist/icons.9801e6f1.svg 8.81 KB 3.18s
10:14:53 AM: ​
10:14:53 AM: (build.command completed in 10.3s)
10:14:53 AM: ​
10:14:53 AM: ────────────────────────────────────────────────────────────────
10:14:53 AM: 2. Deploy site
10:14:53 AM: ────────────────────────────────────────────────────────────────
10:14:53 AM: ​
10:14:53 AM: Starting to deploy site from ‘dist’
10:14:53 AM: Creating deploy tree
10:14:53 AM: Creating deploy upload records
10:14:53 AM: 1 new files to upload
10:14:53 AM: 0 new functions to upload
10:14:53 AM: Site deploy was successfully initiated
10:14:53 AM: ​
10:14:53 AM: (Deploy site completed in 315ms)
10:14:53 AM: ​
10:14:53 AM: ────────────────────────────────────────────────────────────────
10:14:53 AM: Netlify Build Complete
10:14:53 AM: ────────────────────────────────────────────────────────────────
10:14:53 AM: ​
10:14:53 AM: (Netlify Build completed in 10.7s)
10:14:53 AM: Starting post processing
10:14:53 AM: Skipping HTML post processing
10:14:53 AM: Post processing - header rules
10:14:53 AM: Post processing - redirect rules
10:14:53 AM: Post processing done
10:14:53 AM: Site is live :sparkles:
10:14:53 AM: Caching artifacts
10:14:53 AM: Started saving node modules
10:14:53 AM: Finished saving node modules
10:14:53 AM: Started saving build plugins
10:14:53 AM: Finished saving build plugins
10:14:53 AM: Started saving pip cache
10:14:54 AM: Finished saving pip cache
10:14:54 AM: Started saving emacs cask dependencies
10:14:54 AM: Finished saving emacs cask dependencies
10:14:54 AM: Started saving maven dependencies
10:14:54 AM: Finished saving maven dependencies
10:14:54 AM: Started saving boot dependencies
10:14:54 AM: Finished saving boot dependencies
10:14:54 AM: Started saving rust rustup cache
10:14:54 AM: Finished saving rust rustup cache
10:14:54 AM: Started saving go dependencies
10:14:54 AM: Finished saving go dependencies
10:14:56 AM: Build script success
10:15:28 AM: Finished processing build request in 1m25.709132247s

2

Hi @amgj-dev

Given the following:

AND

it is possible the node.js version v16.12.0 used in the build image is too new for your code.

If it works locally, you could try setting the NODE_VERSION environment variable to match the version of node you are running locally. Alternatively, update all your packages to the latest versions. It is possible removing the package-lock.json (which is old) may (also) help.

If no luck, can you share the course—do they have the code in a git repository? Are you able to share your repository so others can test it?

3

changed node version to 14.16.0 in Netlify
ran npm install --update locally
removed package-lock.json from github before deploying

edit: also tried to build it locally with compressed code and deploy without connection to github.

Still get the same problem

https://github.com/amgj-dev/Forkify

4

I cloned your git repository to coelmay/Forkify and deployed this to brave-bohr-b7202a.netlify.app. The deploy log does not contain any errors. I did not change anything in your repository, and used the default build image. These are the settings I used

Screen Shot 2021-10-27 at 11.41.45 am
Screen Shot 2021-10-27 at 11.41.45 am1786×912 55.7 KB

5

to be clear, this did not give you any errors in the developer console ? and you are able to use the search function ?

I went to your link, i get the same problem, so i assume this then is a problem with my browser (which i should have thought of because it throws error in runtime…)?
however i tried chrome, brave and edge.
and with local live server i use the same chrome instance i tested Netlify with.

Do the search work if you go to my Netlify link ?
edit: the search api is simple and only accept some pre defined words like: pizza or pasta.

I will look into this a bit later today. I understand that this is in that case outside the Netlify scoope, but do you have any suggestion to how i could fix this ?

Sorry, but i am very new to javascript still.

6

Apologies, I thought you had an issue with building, not the build. So no, when testing locally, the search function fails also, same as the site deployed on Netify.

Have you tried building the final Forkify code from the course repository? I built it locally and I do not see the runtime error as with yours. This suggests there is something in your code that isn’t right (compared to the course code) or is something extra that you’ve added that is breaking otherwise working code.

7

Yes, both mine and the one from the course is working when i run live server through vscode or use npm start, and both give the same “Fraction is not defined” when uploading to Netlify.

They throw the error in View.js, which is parent to recipeView.js that is importing and using fraction. and if i also import fraction in View.js it is instead throwing the same error in runtime-fe6bcbdb9ebe06be.js

and as i wrote in the initial post, if i just remove the fraction node module i am importing, everything works.
It is only used to convert ingredients to fractions when loading recipes.

I also tried to copy the two lines importing and using fraction from the final forkify code to be 100% sure they are exactly the same.

Given that i get an error on both mine and the one from the course, leads me to suspect there might be something wrong with my setup?
I will investigate a bit more later, and if i can’t solve it i will try another fraction function i found in github instead.

Anyway, thank you for trying to help me solve this.

10

hey bro have you fixed the issue? I also following the jonas course and get into the same issue like you.
If you fix it please let me know how you fix it. I know this post is posted old incase if you see it.

11

hey bro, any solution yet? I’m also following the Jonas course and ran into this issue.

12

The problem was on the Fractional module itself.
Fraction = function(numerator, denominator)
{
/* double argument invocation /
if (typeof numerator !== ‘undefined’ && denominator) {
if (typeof(numerator) === ‘number’ && typeof(denominator) === ‘number’) {
this.numerator = numerator;
this.denominator = denominator;
} else if (typeof(numerator) === ‘string’ && typeof(denominator) === ‘string’) {
// what are they?
// hmm…
// assume they are ints?
this.numerator = parseInt(numerator);
this.denominator = parseInt(denominator);
}
/ single-argument invocation /
} else if (typeof denominator === ‘undefined’) {
num = numerator; // swap variable names for legibility
if (typeof(num) === ‘number’) { // just a straight number init
this.numerator = num;
this.denominator = 1;
} else if (typeof(num) === ‘string’) {
var a, b; // hold the first and second part of the fraction, e.g. a = ‘1’ and b = ‘2/3’ in 1 2/3
// or a = ‘2/3’ and b = undefined if we are just passed a single-part number
var arr = num.split(’ ')
if (arr[0]) a = arr[0]
if (arr[1]) b = arr[1]
/ compound fraction e.g. ‘A B/C’ /
// if a is an integer …
if (a % 1 === 0 && b && b.match(‘/’)) {
return (new Fraction(a)).add(new Fraction(b));
} else if (a && !b) {
/ simple fraction e.g. ‘A/B’ /
if (typeof(a) === ‘string’ && a.match(‘/’)) {
// it’s not a whole number… it’s actually a fraction without a whole part written
var f = a.split(‘/’);
this.numerator = f[0]; this.denominator = f[1];
/ string floating point /
} else if (typeof(a) === ‘string’ && a.match(‘.’)) {
return new Fraction(parseFloat(a));
/ whole number e.g. ‘A’ */
} else { // just passed a whole number as a string
this.numerator = parseInt(a);
this.denominator = 1;
}
} else {
return undefined; // could not parse
}
}
}
this.normalize();
}

We have two variables that are not scoped properly.

  1. the function name
  2. the num variable that is swapped for legibility.

Replace it with this code and the bug will be fixed
var Fraction = function(numerator, denominator)
{
/* double argument invocation /
if (typeof numerator !== ‘undefined’ && denominator) {
if (typeof(numerator) === ‘number’ && typeof(denominator) === ‘number’) {
this.numerator = numerator;
this.denominator = denominator;
} else if (typeof(numerator) === ‘string’ && typeof(denominator) === ‘string’) {
// what are they?
// hmm…
// assume they are ints?
this.numerator = parseInt(numerator);
this.denominator = parseInt(denominator);
}
/ single-argument invocation /
} else if (typeof denominator === ‘undefined’) {
var num = numerator; // swap variable names for legibility
if (typeof(num) === ‘number’) { // just a straight number init
this.numerator = num;
this.denominator = 1;
} else if (typeof(num) === ‘string’) {
var a, b; // hold the first and second part of the fraction, e.g. a = ‘1’ and b = ‘2/3’ in 1 2/3
// or a = ‘2/3’ and b = undefined if we are just passed a single-part number
var arr = num.split(’ ')
if (arr[0]) a = arr[0]
if (arr[1]) b = arr[1]
/ compound fraction e.g. ‘A B/C’ /
// if a is an integer …
if (a % 1 === 0 && b && b.match(‘/’)) {
return (new Fraction(a)).add(new Fraction(b));
} else if (a && !b) {
/ simple fraction e.g. ‘A/B’ /
if (typeof(a) === ‘string’ && a.match(‘/’)) {
// it’s not a whole number… it’s actually a fraction without a whole part written
var f = a.split(‘/’);
this.numerator = f[0]; this.denominator = f[1];
/ string floating point /
} else if (typeof(a) === ‘string’ && a.match(‘.’)) {
return new Fraction(parseFloat(a));
/ whole number e.g. ‘A’ */
} else { // just passed a whole number as a string
this.numerator = parseInt(a);
this.denominator = 1;
}
} else {
return undefined; // could not parse
}
}
}
this.normalize();
}

13

I faced same issue. I solved it in a different way.

Issue with fractional library. So I created a fraction.js in views folder and added code mentioned below

export class Fraction {
constructor(numerator, denominator = 1) {
this.numerator = numerator;
this.denominator = denominator;
this.simplify();
}

// Simplifies the fraction by dividing numerator and denominator by their GCD
simplify() {
const gcd = this._gcd(this.numerator, this.denominator);
this.numerator /= gcd;
this.denominator /= gcd;
}

// Helper method to calculate the Greatest Common Divisor (GCD)
_gcd(a, b) {
if (!b) return a;
return this._gcd(b, a % b);
}

// Returns a string representation of the fraction
toString() {
if (this.denominator === 1) return ${this.numerator};
return ${this.numerator}/${this.denominator};
}
}

After that made a change of import in recipeView.js

import { Fraction } from ‘./fraction.js’;

This way you can deploy forkify app in netlify. But this is not actual way (since issue with fractional library in modern javascript)