Webpack 动态导入的循环依赖

Question

Hi i am building an app where i found myslef doing circular dependency but webpack does not give me circular deps error. so i wanted to understand what actually is happening here.

so here is how my module imports are done

1. root.router.config.js

import React from 'react'

const AsyncAdmin = React.lazy(()=>import('./Modules/Admin'));

export ROUTER_CONFIG = {
   admin: {
      component: AsyncAdmin,
      path: '/'
   } 
}

2. Modules/Admin/index.js

import {Router} from 'react-router-dom'
import MODULE_ROUTER from './Admin.router.config'

 // renders router from this MODULE_ROUTER

3. Modules/Admin/Admin.router.config.js

import React from 'react'
import {ROUTER_CONFIG as ROOT_ROUTER_CONFIG} from '../../root.router.config' // should be cyclic import error but its not

const base = ROOT_ROUTER_CONFIG['admin'].path

const AsyncDashboard = React.lazy(()=>import('./Routes/Dashboard'));

export ROUTER_CONFIG = {
   dashbaord: {
      component: Dashboard,
      path: base + 'dashboard'
   } 
}

if you see the imports here

Modules/Admin/Admin.router.config.js =imports> root.router.config =imports(lazy)=> Modules/Admin/Admin.router.config.js

this will be a definite circular import if i am not using lazy/dynamic import.

i want to know why webpack treats it differently and why its not a circular import error.

should i avoid it and move to a better approach where there is no chance of circular imports?

and if i continue to do this. will it have any impact on my bundled code?

Answer 1

Abstract the "path" to a constants folder/file and it should resolve the issue. In general, webpack aside, you should try avoiding circular dependencies.