Circular reference of ES6 module

The cause is an error message during development ：Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization.

Because the error information is not clear , There is no clear explanation of the reasons and solutions on the Internet , So it took me a long time to find the reason . How to check , Even the most stupid is also the most effective “ Code deletion method ”, That is, delete the code line by line from the entry file , Until you locate the specific error location , Then judge the cause of the problem with your own knowledge and experience .

The reason is that import The circular reference of results in webpack Unable to parse correctly .

One 、 Introduction to circular reference

The simplest a Refer to the b,b Also cited a, This produces a circular reference .
What is more complicated is that the link is longer , for example a -> b -> c -> d -> a.

Circular references may cause memory stack overflow . But there is not necessarily a problem , such as b Two methods are derived ,a The reference is b Method of export fn1, and b It's in the way fn2 Quoted in a, In fact, there will be no problem in this situation .

But due to possible risks , And it's hard to find , So try to avoid using circular references when writing code .

Two 、 Check in the project

utilize webpack Plug in for circular-dependency-plugin It is very convenient to check the circular reference problem in the project .
（ Not all circular references have problems , Therefore, this plug-in is recommended to be used when troubleshooting problems , Whether to open it during development depends on personal needs .）

1. Installing a plug-in ：

npm i circular-dependency-plugin -D

2. stay webpack Add in configuration file plugins To configure .

const CircularDependencyPlugin = require('circular-dependency-plugin')

export default {
    
  ...,
  plugins: [
    ...,
    new CircularDependencyPlugin(
      {
    
        exclude: /node_modules/,
        include: /src/,
        failOnError: false,
        allowAsyncCycles: false,
        cwd: process.cwd(),
      }
    ),
  ]
}

3. Restart project , You can see the warning message of circular reference in the startup command line , The plug-in will help you locate the file path of the problem .
   

3、 ... and 、esm Reference handling for

ESM（es modules, namely es6 modularization ） It is loaded at compile time , and commonJs The runtime load of is different .esm Be as static as possible , The dependencies of the modules can be determined at compile time , Because of this ,esm It can be carried out through static analysis tree shaking Optimize .

Code example ：

• main.js

import a from './a'
console.log(a)

• a.js

console.log(' perform a')
import b from './b'
console.log(b)
console.log(' Import b after ')
export default ' I am a a modular '

• b.js

console.log(' perform b')
import a from './a'
console.log(a)
console.log(' Import a after ')
export default ' I am a b modular '

• perform main.js, Output results ：

// main.js in import 了 a, Advanced to a analysis 
// import Statement parsing in advance ,a in import 了 b, So pause a Parsing , Enter b analysis 
// b in import 了 a, but a At this time, the execution is not finished , To get the a The value is undefined, Then continue to parse b
b.js:1  perform b
b.js:3 undefined
b.js:4  Import a after 

// b Finished parsing and got it b Export results of , Start back to a Continue to analyze 
a.js:1  perform a
a.js:3  I am a b modular 
a.js:4  Import b after 

// a After analysis , go back to main.js Parsing performed 
main.js:2  I am a a modular 

esm Of import The command is executed at the compilation stage , Take precedence over its own content .
esm Don't care if there is a circular reference , Just generate a reference to the loaded module , When the code is not executed , The value of this reference is undefined.

Four 、webpack Reference handling for

Even if esm There is no exception in the circular reference , stay webpack Errors may also be reported during compilation , After all webpack Will be able to esm Downgrade to es5, There may be some differences in the degradation processing .

The same example code above ,webpack（v5.64.4） Execute after processing console.log(a) An exception or error will appear when the statement ：Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization.

• esm The way to deal with it is , First static analysis import, Then the dynamic export export （ Export reference ）.
• webapck The way to deal with it is , First of all, put all the export Mentioned the beginning of the module , then import promote .

5、 ... and 、 resolvent

1、 Reference extraction

It is to extract the place with circular reference into another separate file , In other words, do not use circular references .

2、 The export function

Change the default export object to the form of export function , Get and export the result from the return value of the function .
Because each function will form a separate local scope , Different scopes have different data reference addresses .
In this way, the result of each introduction is a new reference , No conflict , This situation webpack It can also be handled normally .

---

Reference link ：
https://blog.csdn.net/wu_xianqiang/article/details/100705034
https://zhuanlan.zhihu.com/p/141863544?from_voters_page=true
https://zhuanlan.zhihu.com/p/33049803