The requested module does not provide an export named in JS
import exports module conventions ES^
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!