This kind of error is occurring frequently in a Vue 3 project I'm working on:

project.js:41 Uncaught (in promise) ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization
    at Module.default (project.js:41)
    at Proxy.data (Planning.vue:56)
    at Proxy.mergedDataFn (runtime-core.esm-bundler.js:2698)
    at applyOptions (runtime-core.esm-bundler.js:2397)
    at finishComponentSetup (runtime-core.esm-bundler.js:6711)
    at setupStatefulComponent (runtime-core.esm-bundler.js:6630)
    at setupComponent (runtime-core.esm-bundler.js:6560)
    at mountComponent (runtime-core.esm-bundler.js:4426)
    at processComponent (runtime-core.esm-bundler.js:4401)
    at patch (runtime-core.esm-bundler.js:3995)

I'm struggling to figure out how to debug it because this traceback isn't helpful.

In this case project.js:41 is just the line:

export {activeEffects};

And the activeEffects function is properly defined.

In the past I've debugged this by manually commenting code out until I find the line that's actually causing the trouble, but that of course gets harder and harder as the project grows.

I've seen others who have encountered a similar error message say the problem was a circular dependency. When I've encountered this error it was a circular dependency once, but other times it wasn't.

This particular error was because I was trying to export an undefined variable from a module, but it was a totally different module than the one given in the traceback.

Does anyone have any advice on how exactly one should approach this error? Is there a different kind of bundler I should use for a more helpful traceback?