Menu
I am trying to learn ES6 imports and exports but I ran into an error that is not letting me import my module. I also tried import .. from 'add.js' without ./ but still no luck.
Uncaught SyntaxError: The requested module './add.js' does not provide an export named 'add'
My folder structure looks like this
C:\xampp\htdocs\es6\import.export\ - index.html - app.js - add.js index.html
<html> <head> <script type="module" src="app.js"></script> </head> <body> </body> </html> app.js
import { add } from './add.js' console.log(add(2,3)) add.js
export default function add (a, b) { // export default function (a, b) { <-- does not work either, same error return a + b; } 
476
To solve the error "The requested module does not provide an export named 'default'", use the default keyword when exporting a value from a file and don't wrap the corresponding import in curly braces. You can only have a single default export per file.
The "does not contain a default export" error occurs when we try to use a default import to import from a module that doesn't have a default export. To solve the error, make sure the module has a named export and wrap the import in curly braces, e.g. import {myFunction} from './myModule .
TypeScript supports export = to model the traditional CommonJS and AMD workflow. The export = syntax specifies a single object that is exported from the module. This can be a class, interface, namespace, function, or enum.
Name your export instead of using default. It should look like this
// add.js export const add = (a, b) => a + b; // OR // export const add = function(a, b) { return a+b }; // app.js import { add } from './add'; Use the export default syntax. It looks like this
// add.js export default function add(a, b) { return a + b; } // app.js import add from './add'; There are two kinds of exports: named exports (several per module) and default exports (one per module). It is possible to use both at the same time, but usually best to keep them separate.
If you want to import the module's default, the curly braces '{}' are not needed :
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_the_default_export
You can use curly braces '{}' for named exports :
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_named_exports
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
