0

I'm building a mock app in HTML, CSS and JS. However, after running the 'npm run build' to compress, build and bundle the files in dist folder and uploading to netlify server to test the build version, it is throwing "Uncaught ReferenceError: assignment to undeclared variable Fraction"

I've installed fractional module via 'npm i fractional' and the development version of the app runs just fine. The version of Parcel used for bundling the app is 2.0.0-rc.0

I've tried creating an extra file called index.d.ts wherein I'm declaring the module as suggested by JS i.e. declare module 'fractional' and tried to run the app on netlify using this build version as well, but no luck.

The fractional module is using is used in one of .js file for calculating the quantity of an ingredient to be used in a specific recipe and the way the module is imported into the JS file is by import command i.e. import { Fraction } from 'fractional'.

Code snippet from recipeView.js where Fractional module is used.


    import { Fraction } from 'fractional';
    
    export class RecipeView extends View {
      // Method to generate ingredients list
      _ingredientsList(ing) {
        return `
            <li class="recipe__ingredient">
                <svg class="recipe__icon">
                <use href="${icon}#icon-check"></use>
                </svg>
                <div class="recipe__quantity">${
                  ing.quantity ? new Fraction(ing.quantity).toString() : ''
                }</div>
                <div class="recipe__description">
                <span class="recipe__unit">${ing.unit}</span>
                ${ing.description}
                </div>
            </li>
        `;
      }
    }

The above protected method is used in the same class to generate a markup. _generateMarkup() { return Recipe ingredients ${this._data.ingredients .map(ing => this._ingredientsList(ing)) .join('')} `

`

Below is the code snippet from package.json file `

"scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html --dist-dir ./dist"
  },
  "author": "ABC",
  "license": "ISC",
  "devDependencies": {
    "@parcel/transformer-image": "^2.0.0-rc.0",
    "@parcel/transformer-sass": "^2.0.0-rc.0",
    "@types/regenerator-runtime": "^0.13.1",
    "parcel": "^2.0.0-rc.0"
  },
  "dependencies": {
    "fractional": "^1.0.0"
  }

`

Any help/suggestion/advice is appreciated here.

BitsNcode
  • 21
  • 4

1 Answers1

2

In your package.json file (dependencies field):

  • replace fractional with fracty (with an appropriate version, say 1.0.9, for example)

In your recipeView.js file:

  • import fracty from fracty
  • replace new Fraction with fracty
Dharman
  • 30,962
  • 25
  • 85
  • 135
Barbara Okwufulueze
  • 21
  • 2