Webpack 5

[aackerman]

Webpack 5

[aackerman]

I haven't seen this specific issue before but I would assume it goes away if your import is in file1b is changed to import { file1a } from './index'. I'm not sure how import ... from './' is supposed to work

@aackerman, unfortunately using ./index makes no difference.

Import from './' just references the folder which by default looks at the index.js first - so just shorthand for ./index, really.

gtagEvents.js

export const sendPageView...

RouteAnalytics.jsx

import { sendPageView } from './index.js'
...
export default RouteAnalytics

index.js

import { sendPageView } from './gtagEvents'
import RouteAnalytics from './RouteAnalytics'

export { RouteAnalytics, sendPageView }

output

WARNING in Circular dependency detected:
src\components\common\Analytics\index.js -> src\components\common\Analytics\RouteAnalytics.jsx -> src\components\common\Analytics\index.js

[aackerman]

Maybe I'm misunderstanding your question but your latest example looks circular to me, it wouldn't be if RouteAnalytics imported gtagEvents instead of index

@aackerman, I've been using it like this for years, but looks like you're right. Even though it works, it may be causing other issues. Looks like I have a lot of refactoring to do -- I use this format all over my project. Here's a related stackexchange link for anybody else who runs into this issue.

Solution for my issue then would be to import files in the same folder from their own exports, instead of their shared index.js file.