Bundled code is attempting to export before importing (ERROR: _common__WEBPACK_IMPORTED_MODULE_1__ is undefined)

[rwilliams3088]

Bug report

What is the current behavior?

I have an simple index file that exposes various tsx components and interfaces that looks like so:

export * from './BatchesApi';
export * from './common';
export * from './GetBatches';
export * from './GetBatchStats';
export * from './PinBatch';
export * from './ScheduleBatches';
export * from './TransitionBatchEvent';

Unfortunately, when I attempt to load the page, the output bundle.js file is erroring on this code with the error: _common__WEBPACK_IMPORTED_MODULE_1__ is undefined

If I dive into the bundled code, it is clear why. The bundle generated by webpack 5 is attempting to export the various modules prior to importing them - and so of course the variables in question are undefined...

/***/ "./src/api/core/Batches/index.ts":
/*!***************************************!*\
  !*** ./src/api/core/Batches/index.ts ***!
  \***************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   BatchEvent: () => (/* reexport safe */ _common__WEBPACK_IMPORTED_MODULE_1__.BatchEvent),
/* harmony export */   BatchFlag: () => (/* reexport safe */ _common__WEBPACK_IMPORTED_MODULE_1__.BatchFlag),
/* harmony export */   BatchStatus: () => (/* reexport safe */ _common__WEBPACK_IMPORTED_MODULE_1__.BatchStatus),
/* harmony export */   BatchType: () => (/* reexport safe */ _common__WEBPACK_IMPORTED_MODULE_1__.BatchType),
/* harmony export */   BatchesApi: () => (/* reexport safe */ _BatchesApi__WEBPACK_IMPORTED_MODULE_0__.BatchesApi),
/* harmony export */   EmptyLineItemSourceCount: () => (/* reexport safe */ _common__WEBPACK_IMPORTED_MODULE_1__.EmptyLineItemSourceCount),
/* harmony export */   EmptyLineItemStatusCount: () => (/* reexport safe */ _common__WEBPACK_IMPORTED_MODULE_1__.EmptyLineItemStatusCount),
/* harmony export */   GetBatchStatsDeserializationSchema: () => (/* reexport safe */ _GetBatchStats__WEBPACK_IMPORTED_MODULE_3__.GetBatchStatsDeserializationSchema),
/* harmony export */   GetBatchesDeserializationSchema: () => (/* reexport safe */ _GetBatches__WEBPACK_IMPORTED_MODULE_2__.GetBatchesDeserializationSchema),
/* harmony export */   GetBatches_AliasMap: () => (/* reexport safe */ _GetBatches__WEBPACK_IMPORTED_MODULE_2__.GetBatches_AliasMap),
/* harmony export */   ScheduleBatchesDeserializationSchema: () => (/* reexport safe */ _ScheduleBatches__WEBPACK_IMPORTED_MODULE_5__.ScheduleBatchesDeserializationSchema),
/* harmony export */   batchDeserializationSchema: () => (/* reexport safe */ _common__WEBPACK_IMPORTED_MODULE_1__.batchDeserializationSchema),
/* harmony export */   deserializeBatch: () => (/* reexport safe */ _common__WEBPACK_IMPORTED_MODULE_1__.deserializeBatch),
/* harmony export */   deserializeBatchArray: () => (/* reexport safe */ _common__WEBPACK_IMPORTED_MODULE_1__.deserializeBatchArray),
/* harmony export */   deserializeGetBatchStats: () => (/* reexport safe */ _GetBatchStats__WEBPACK_IMPORTED_MODULE_3__.deserializeGetBatchStats),
/* harmony export */   deserializeGetBatches: () => (/* reexport safe */ _GetBatches__WEBPACK_IMPORTED_MODULE_2__.deserializeGetBatches),
/* harmony export */   deserializePinBatch: () => (/* reexport safe */ _PinBatch__WEBPACK_IMPORTED_MODULE_4__.deserializePinBatch),
/* harmony export */   deserializeScheduleBatches: () => (/* reexport safe */ _ScheduleBatches__WEBPACK_IMPORTED_MODULE_5__.deserializeScheduleBatches),
/* harmony export */   deserializeTransitionBatchEvent: () => (/* reexport safe */ _TransitionBatchEvent__WEBPACK_IMPORTED_MODULE_6__.deserializeTransitionBatchEvent)
/* harmony export */ });
/* harmony import */ var _BatchesApi__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BatchesApi */ "./src/api/core/Batches/BatchesApi.tsx");
/* harmony import */ var _common__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./common */ "./src/api/core/Batches/common.ts");
/* harmony import */ var _GetBatches__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./GetBatches */ "./src/api/core/Batches/GetBatches.ts");
/* harmony import */ var _GetBatchStats__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./GetBatchStats */ "./src/api/core/Batches/GetBatchStats.ts");
/* harmony import */ var _PinBatch__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./PinBatch */ "./src/api/core/Batches/PinBatch.ts");
/* harmony import */ var _ScheduleBatches__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./ScheduleBatches */ "./src/api/core/Batches/ScheduleBatches.ts");
/* harmony import */ var _TransitionBatchEvent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./TransitionBatchEvent */ "./src/api/core/Batches/TransitionBatchEvent.ts");

/***/ }),

If the current behavior is a bug, please provide the steps to reproduce.

My webpack.common.js file is as so:

const path = require('path');
const Webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const isProduction = process.env.NODE_ENV == 'production';
const isDevelopment = process.env.NODE_ENV == 'development';
const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader';

const ASSET_PATH = process.env.ASSET_PATH || '/';

module.exports = {
    entry: './src/index.tsx',
    output: {
      clean: true,
      path: path.resolve(__dirname, 'dist'),
      filename: 'static/js/[name].[contenthash:8].bundle.js',
      chunkFilename: 'static/js/[name].[contenthash:8].chunk.js',
      chunkFormat: "commonjs",
      publicPath: ASSET_PATH,
      globalObject: "this",
    },
    plugins: [
      new HtmlWebpackPlugin(
        Object.assign(
          {},
          isProduction ? {
            minify: {
              removeComments: true,
              collapseWhitespace: true,
              removeRedundantAttributes: true,
              useShortDoctype: true,
              removeEmptyAttributes: true,
              removeStyleLinkTypeAttributes: true,
              keepClosingSlash: true,
              minifyJS: true,
              minifyCSS: true,
              minifyURLs: true,
            },
          } : undefined,
        )
      ),

      // fix "process is not defined" error:
      new Webpack.ProvidePlugin({
        process: 'process/browser',
      }),

      // expose ASSET_PATH
      new Webpack.DefinePlugin({
        'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH),
      }),
    ],
    module: {
      rules: [
        {
          test: /\.(?:(j|t)sx?|mjs|cjs)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                ['@babel/preset-env', { targets: "defaults" }]
              ]
            }
          }
        },
        {
          test: /\.s[ac]ss$/i,
          use: [stylesHandler, 'css-loader', 'postcss-loader', 'sass-loader'],
        },
        {
          test: /\.less$/i,
          use: [
            stylesHandler, 
            'css-loader', 
            'postcss-loader', 
            {
              loader: 'less-loader',
              options: {
                lessOptions: {
                  javascriptEnabled: true
                }
              }
            }
          ],
        },
        {
          test: /\.css$/i,
          use: [stylesHandler, 'css-loader', 'postcss-loader'],
        },
        {
          test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
          type: 'asset',
        },
      ],
    },
    resolve: {
      extensions: ['.tsx', '.ts', '.jsx', '.js'],
    },
};

And my webpack.develoment.js file is like so:

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    open: true,
    host: 'localhost',
    port: 3000,
  },
  optimization: {
    emitOnErrors: true,
  },
});

What is the expected behavior?

Webpack should be able to handle export * from <file>; statements properly, first importing and then exporting.

Other relevant information:
webpack version: ^5.90.0
Node.js version: 16.16.0
Operating System: Ubuntu running in WSL2 on Windows 11

[alexander-akait]

Looks like you have circular modules, can you create reproducible test repo?

[rwilliams3088]

This is a large project that I'm converting from webpack 4 to 5; the only thing that has changed is the webpack dependencies + configuration. I think there maybe some circular dependencies between files in the project - though that hasn't been a problem in the past. Is there some special configuration needed to make them work with webpack 5? I'll see if i can create a small reproduction...

[rwilliams3088]

FYI, I added in the circular-dependency-plugin (https://github.com/aackerman/circular-dependency-plugin) to my configuration and it didn't report any circular dependencies. I also went ahead and removed all imports from the common.ts file and continued to get the same error.

[alexander-akait]

Can you try to remove all imports to isolate the problem, also how do you split chunks and how you generate HTML file?

[Juexro]

Same problem, any solution?

[alexander-akait]

Please provide a reproducible test repo, thank you

[rwilliams3088]

After a lot of work, I was able to find that two interfaces in separate files were referencing one another. To break up the circular reference, I created a base interface of one of them that lacked the reference to the other interface. I still have no clue why webpack 4 was able to handle this without issue, while webpack 5 just gives up on life.... rather annoying.

The best solution i found was to bite the bullet and just start commenting out /removing large swaths of code until you have a working app again (albeit with limited functionality), and then start adding things back in a bit at a time - fixing things that break along the way.

[alexander-akait]

@rwilliams3088 intresting... maybe you can create a simple example of the problem, I want investigate

[rwilliams3088]

@alexander-akait I'll try to find some time to see if I can't replicate using a minimal example.