Introduction to JavaScript Course - Message Mixer Project

Hi everyone!

I am currently stuck at almost 80% of ‘Introduction to JavaScript’ course. I have just completed the Message Mixer Project online in CodeCademy. I’ve copied the same code in Visual Studio Code just to see it running on my browser and I just keep receiving the same errors:

SyntaxError: export declarations may only appear at top level of a module
SyntaxError: import declarations may only appear at top level of a module

Furthermore, I tried creating another script that was supposed to import a module exported from another script. It seems that something is wrong with exporting/importing methods and I simply can not pass over these errors.

Do you have any idea of what can I fix, in order to prevent the browser from showing this?

Thank you in advance for your cooperation.

The link to the project requirements:
https://www.codecademy.com/courses/introduction-to-javascript/projects/message-mixer?action=resume_content_item

The code from messageMixer.js:

function countCharacter(inputString, inputCharacter) {
  let count = 0;
  let string = inputString.toLowerCase();
  let character = inputCharacter.toLowerCase();
    for (let i = 0; i < string.length; i++) {
      if (string[i] === character) {
         count++;
      }
    }
  return count; 
};

function capitalizeFirstCharacterOfWords(string) {
  let arr = string.split(" ");  
    for (let i = 0; i < arr.length; i++) {  
      let word = arr[i];
        arr[i] = word[0].toUpperCase() + word.substring(1); 
    }
  return arr.join(" "); 
};


function reverseWord(word) {
  return word.split("").reverse().join("");
};

function reverseAllWords (sentence) {
  let words = sentence.split(" ");
    for (let i = 0; i < words.length; i++) {
      words[i] = reverseWord(words[i]);
    }
   return words.join(" ");
};

function replaceFirstOccurence(string, toBeReplaced, replaceWith) {
  return string.replace(toBeReplaced, replaceWith);
};

function replaceAllOccurrences(string, toBeReplaced, replaceWith) {
  return string.split(toBeReplaced).join(replaceWith);
};
  
function encode (string) {
  let replacementObject = { "a": "@", "s": "$", "i": "!", "o":"0" };
    for (let key in replacementObject) {
      string = replaceAllOccurrences(string, key, replacementObject[key]); 
    }	
    return string;
};
  
function palindrome (str) {
    return (str + ' ' + reverseWord(str));
};
function pigLatin(sentence,character){
    return(sentence.split(' ').join(character + ' '));
};

export {countCharacter, capitalizeFirstCharacterOfWords, reverseWord, reverseAllWords, replaceFirstOccurence, replaceAllOccurrences, encode, palindrome, pigLatin};

The code from message.js:

import {countCharacter, capitalizeFirstCharacterOfWords, reverseWord, reverseAllWords, replaceFirstOccurence, replaceAllOccurrences, encode, palindrome, pigLatin} from './messageMixer';

function displayMessage() {
  console.log(countCharacter("What is the color of the sky?", "t"));  
  console.log(capitalizeFirstCharacterOfWords("What is the color of the sky?"));
  console.log(reverseWord("What is the color of the sky?"));
  console.log(reverseAllWords("What is the color of the sky?"));
  console.log(replaceFirstOccurence("What is the color of the sky?", "sky", "water"));
  console.log(encode("What is the color of the sky?"));
  console.log(palindrome("What is the color of the sky?"));
  console.log(pigLatin("What is the color of the sky?",'a'));
};

displayMessage();

It seems you need to specify the script is a module:

https://stackoverflow.com/questions/35336457/es2015-module-import-and-export-syntax-error

or you would need to use something to transpile the code.

  1. run live server in VS Code
  2. in HTML add type="module" parameter and path to your main app.js
    <script type="module" src="./static/js/app.js" defer></script>
  3. in your other js file (module.js - my case) write functions, and export them
const palindrome =
  function (str) {
    return str; //doesn't do palindrome, it's example func
  };
const pigLatin =
  function (sentence, character) {
    return sentence.split(' ').join(character + ' ');
  };
export {palindrome, pigLatin}
  1. in app.js import desired features from module.js
import {
  countCharacter,
  anyFeature,
  palindrom

} from '../js/module.js';
  1. call them from app.js
    palindrome(‘ANNA’);