CODEWITHSUNDEEP
javascriptexport
Tech-Life
Tech-Life

Reputation: 13

How to resolve 'SyntaxError: export declarations may only appear at top level of a module' when exporting variables?

I am new at programming and currently building a project in HTML, CSS, and JavaScript. I want to export variables from one of my external JavaScript files to another one. However, I get an error from the console in Mozilla Firefox when trying it out. The error is: "SyntaxError: export declarations may only appear at top level of a module".

I have tried exporting at the beginning of my code, the end, and inside of a function (Where I want it to be exported from). I've looked online, but I can't seem to find any answers to this, just answers for importing. 

function exports() {
    export { cakeChoicePricing, cakeTypeResultPricing };
    export { cupcakeChoicePricing, cupcakeTypeResultPricing };
};

Importing Below:

import { cakeChoicePricing, cakeTypeResultPricing } from './JavaScript.js';
import { cupcakeChoicePricing, cupcakeTypeResultPricing } from './JavaScript.js';

Thank you for any help provided!

Update (Here is more of my code):

let cakeChoicePricing;
let cupcakeChoicePricing;

function dessertChoiceCake() {
        cakeElement.setAttribute('class', 'disabled'); //Set cake button to unclickable
        cakeChoicePricing = 'Cake';
        cupcakeChoicePricing = 'Cake';
}

let exportCake = document.getElementById("cakeReviewButton");
let exportCupcake = document.getElementById("cupcakeReviewButton");

exportCake.addEventListener("click", exports);
exportCupcake.addEventListener("click", exports);

function exports() {
    export { cakeChoicePricing, cakeTypeResultPricing };
    export { cupcakeChoicePricing, cupcakeTypeResultPricing };
};

Upvotes: 1

Views: 12485

Answers (2)

CertainPerformance
CertainPerformance

Reputation: 371138

Consider inverting your control flow. Rather than trying to export variables that don't exist yet, import a function from the other file instead, and then call that function with cakeChoicePricing, etc parameters when needed. For example:

import displayPrices from './prices';

const prices = {};

// when you need to, assign to properties of the prices object:

function dessertChoiceCake() {
  cakeElement.setAttribute('class', 'disabled'); //Set cake button to unclickable
  prices.cakeChoicePricing = 'Cake';
  prices.cupcakeChoicePricing = 'Cake';
}

const callDisplayPrices = () => {
  displayPrices(prices);
};

exportCake.addEventListener("click", callDisplayPrices);
exportCupcake.addEventListener("click", callDisplayPrices);

And have the displayPrices function (which the other file exports) handle the object with the prices properties, eg

export default (prices) => {
  console.log('cakeChoicePricing:', prices.cakeChoicePricing);
};

Upvotes: 1

Dacre Denny
Dacre Denny

Reputation: 30390

When exporting, you must do so from the "scope" of the source file that you're exporting from rather than from a function as you currently are (ie from inside the exports() function) .

A simple fix would be to revise your JavaScript.js module so that the variables that you want to export (and import into another module), are directly exported when declared, at the top level of your JavaScript.js module:

JavaScript.js

// Start of JavaScript.js file - do not nest exports inside of any function, etc

export const cakeChoicePricing = // Some value or function
export const cakeTypeResultPricing = // Some value or function

export const cupcakeChoicePricing = // ..
export const cupcakeTypeResultPricing = // ..

OtherModule

// This can be merged into single import statement

import { 
    cakeChoicePricing, 
    cakeTypeResultPricing, 
    cupcakeChoicePricing, 
    cupcakeTypeResultPricing
} from './JavaScript.js';

Upvotes: 0

Related Questions