Apparently, l ran into another bug today. At first, the problem was not visible in the browser, so it was quite confusing. I then checked my chrome dev tools to find the error. In the browser console, I got the error message that reads: "The requested module "/filepathmodule" does not provide an export named in JS". I resolved the problem after some look ups. Apparently, this is an error that occurs in ECMAScript 6 (ES6), as a result of mixing up default and named ES6 module imports and exports.

To resolve the error, make sure to import default exports without using curly braces and import named exports with curly braces.

Here is an illustration:

To use Cta component inside of Hero.js, this is the correct syntax: 👇🏾

//This is the Hero.js file
//Import Cta.js into Hero.js file 
import Cta from "./Cta"; 
//focus: Here we are importing from "default export" 👈🏾 (1st Instance)

//rest of the code

This is what the structure of the Cta.js file should look like: 👇🏾

// Cta.js file 
function Cta() {
  return;
}

export default Cta; // Note the "export default" (1st Instance)

Alternative convention:

//This is the Hero.js file
//Import { Cta.js } into Hero section 
import { Cta } from "./Cta"; 
//focus: Here we are importing from named "export" 👈🏾 (2nd Instance) 

//rest of the code

This is what the structure of the Cta.js file should look like: 👇🏾

// Cta.js file 
function Cta() {
  return;
}

export Cta; // Note the named "export" (2nd Instance)

You can lookup the documentation for further questions and more clarity.

If you found this resource helpful, make sure to share, like 🤍 and follow me as well for more contents like this.

Happy Hacking!