Named export and default export in the same file

Question

I am trying to put default and named export in same file. Example:

// file name : utils/fetch
export default fetchUtil;

module.exports = {
    fetch : fetchUtil,
    post,
    put,
    get,
};

// import code
import fetch from 'utils/fetch';

My code builds fine with webpack, however in browser I get errors :

fetchInit.js:27 Uncaught TypeError: (0 , _fetch2.default) is not a function

Am I missing something or is this not the way to do default & named import in the same file ?

Kaycekaycee

Answer 1

Found the solution here : http://exploringjs.com/es6/ch_modules.html

Basically, I had to do

export default fetchUtil
export {fetchUtil as fetch, post, put, get}

Kaycekaycee

export {a as default, b as c, d, e, f}; – Celom

As of July 2022 this isn't a good option according to Vite bundler. Any other ideas? – Splashboard

@КонстантинВан: You mean export {a as default, a as b, c, d, e};, right? OP is wanting to export same function twice under different guises :) export {fetchUtil as default, fetchUtil as fetch, post, put, get} – Mariehamn

Answer 2

If you're just creating an index file you can just re-export the default and the named seperately

export { default } from "./your-file";
export * from "./your-file";

Cetinje