react-refresh-webpack-plugin: ReferenceError: Cannot access x before initialization

I tried implementing this and I got an error like in the subject. The reason is that the exports are accessing constants defined below them.

This is what the result looks like:

        "use strict";
        __webpack_require__.r(__webpack_exports__);
        /* WEBPACK VAR INJECTION */
        (function(__react_refresh_utils__, __react_refresh_error_overlay__) {
            /* harmony export (binding) */
            __webpack_require__.d(__webpack_exports__, "BoxWithLine", function() {
                return BoxWithLine;
            });

      
[...]

            __webpack_require__.$Refresh$.runtime = __webpack_require__(/*! react-refresh/runtime */
            "./node_modules/.pnpm/react-refresh@0.8.3/node_modules/react-refresh/runtime.js");
            __webpack_require__.$Refresh$.setup(module.i);

[...]

            const BoxWithLine = /*#__PURE__*/
            Object(styled_components__WEBPACK_IMPORTED_MODULE_13__["default"])(app_components_Layout__WEBPACK_IMPORTED_MODULE_2__["Box"]).withConfig({
                displayName: "Page__BoxWithLine",
                componentId: "sc-174cupy-0"
            })(["\n\tborder-color: transparent;\n\tborder-bottom: 1px solid ", ";\n"], app_styles__WEBPACK_IMPORTED_MODULE_6__["grey10"]);

I put the plugins at the bottom of the plugins array for both webpack and babel.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 3
Comments: 20 (7 by maintainers)

Most upvoted comments

Hi, I did a bit of digging and I think this is definitely either caused by:

Unnamed default exports with namespaces
Circular dependencies

Webpack tries to concatenate modules and hoist them in the correct order, but in rare cases this will fail and yield this error.

pmmmwh on Dec 31, 2020

By the way this might be an useful thread to reference in the troubleshooting guide. I think is safe to say that before installing this plugin we need to remove all circular dependencies from the project, isn’t it?

To be clear, this is not a problem that only exists on our side - it is a limitation of HMR of Webpack (or potentially any other bundlers that creates a module graph). When a graph needs to be created and there exists cyclic references, the order of which node is created first can be nondeterministic, which means while your app could work in production, it will not work in development with HMR enabled.

Generally, I think the Webpack maintainers hold a similar stance as I do - cyclic dependencies are bad and if you want your app to be deterministic always, you should try eliminate them. (You can search in webpack/webpack for many issues asking about the same error).

I’ll try to add a section in the troubleshooting guide highlighting this problem later.

pmmmwh on Sep 26, 2022

@wmertens - I was also facing a similar situation where I had a single const that broke on production build due to a circular dependency. Changing the const to a var also worked for me, but I don’t think that is the correct way to handle that situation. Instead, I moved the const into a new module and I can still use const and the ReferenceError went away. I was able to solve the issue by looking at https://github.com/webpack/webpack/issues/9173#issuecomment-494903242

kimbaudi on Mar 23, 2021