The export default {...} construction is just a shortcut for something like this:

const funcs = {
    foo() { console.log('foo') }, 
    bar() { console.log('bar') },
    baz() { foo(); bar() }
}

export default funcs

It must become obvious now that there are no foo, bar or baz functions in the module's scope. But there is an object named funcs (though in reality it has no name) that contains these functions as its properties and which will become the module's default export.

So, to fix your code, re-write it without using the shortcut and refer to foo and bar as properties of funcs:

const funcs = {
    foo() { console.log('foo') }, 
    bar() { console.log('bar') },
    baz() { funcs.foo(); funcs.bar() } // here is the fix
}

export default funcs

Another option is to use this keyword to refer to funcs object without having to declare it explicitly, as @pawel has pointed out.

Yet another option (and the one which I generally prefer) is to declare these functions in the module scope. This allows to refer to them directly:

function foo() { console.log('foo') }
function bar() { console.log('bar') }
function baz() { foo(); bar() }

export default {foo, bar, baz}

And if you want the convenience of default export and ability to import items individually, you can also export all functions individually:

// util.js

export function foo() { console.log('foo') }
export function bar() { console.log('bar') }
export function baz() { foo(); bar() }

export default {foo, bar, baz}

// a.js, using default export

import util from './util'
util.foo()

// b.js, using named exports

import {bar} from './util'
bar()

Or, as @loganfsmyth suggested, you can do without default export and just use import * as util from './util' to get all named exports in one object.

madox2's answer totally works if you want to import named functions.

If you still want to import the default, there's another technique:

function a() {}

function b() {}

export default { a, b }

and when you import:

import myObject from './index.js';

myObject.a(); // function a
myObject.b(); // function b

I hope this helps!

You can't have more than one default export.

Instead, use named exports.

// moduleName.js    

export const ConnectedUserList = connect(mapStateToProps, matchDispatchToProps)(UserList)

export const RealTimeApp = socketConnect(App);

Require the exports by name.

// otherModule.js
import { ConnectedUserList, RealTimeApp } from "./moduleName"

This would be my solution for your exporting problem! And don't mix es5 exports with es6 imports, that can get very weird - sometimes!

export const example1 = async () => {
   return 'example 1'
}

export const example2 = async () => {
   return 'example 2'
}


// other file
import { example1, example2 } from '../../example'
return example1()

Nevertheless if you have to mix them, just let me know! We can find a solution for this aswell!

More about exporting modules and what can go wrong!

MDN Exports and the a short story about the state of javascript modules

you can use export

export function sendData() {...}

and you can import like this

import fetchData, { sendData } from '/src/utility/db_handler.js;'