Skip to content

[Bug]: Asset entry points export undefined in ESM and library mode #10024

@altinokdarici

Description

@altinokdarici

System Info

System:
OS: macOS 15.4
CPU: (8) arm64 Apple M1 Pro
Memory: 122.56 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
Yarn: 1.22.21 - /opt/homebrew/bin/yarn
npm: 10.8.2 - ~/.nvm/versions/node/v20.17.0/bin/npm
Browsers:
Edge: 135.0.3179.73
Safari: 18.4
npmPackages:
@rspack/cli: ^1.0.0 => 1.3.4
@rspack/core: ^1.0.0 => 1.3.4

Details

Problem Description

When configuring an asset file (such as a PNG image) as an entry point in Rspack with library mode and ECMAScript modules output, the generated module doesn't properly export the asset content.

Current Behavior

When importing the generated module, the imported value is undefined

// The module sets the content correctly
module.exports = "data:image/png;base64,iVBORw0KGgoAAAAN...";

// ...but later tries to export a non-existent default property
var __webpack_exports__default = __webpack_exports__["default"];
export { __webpack_exports__default as default };

The output code contains module.exports = "data:image/png;base64,..." but the export statement is looking for a default module property that doesn't exist (__webpack_exports__["default"]). As a result, it returns undefined instead of the actual asset content.

Expected Behavior

The imported value should be a string containing the data URI of the image (for asset/inline) or a URL to the image (for asset/resource).

Important Note

This issue only reproduces when:

  • An asset file is configured as a direct entry point
  • Library mode is enabled with ECMAScript modules output

The issue does not occur when:

  • Images are referenced and used internally within a bundle
  • Using non-library mode or non-ESM output formats

Reproduction Configuration

// rspack.config.mjs
import { defineConfig } from '@rspack/cli';

export default defineConfig({
  entry: {
    "image.png": './image.png',  // Using an image as entry point
  },
  mode: 'development',
  target: ['web', 'es2022'],
  output: {
    library: {
      type: 'module',
    },
    module: true,
  },
  experiments: {
    outputModule: true,
  },
  module: {
    rules: [
      {
        test: /\.png$/,
        type: 'asset/inline',
        generator: {
          export: 'default'
        }
      },
    ],
  }
});

Output Content

var __webpack_modules__ = ({
"./image.png": 
/*!*******************!*\
  !*** ./image.png ***!
  \*******************/
(function (module) {
module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAEElEQVR4nGKSW9kFCAAA//8CQgFUFnaljwAAAABJRU5ErkJggg==";

}),

});
/************************************************************************/
// The module cache
var __webpack_module_cache__ = {};

// The require function
function __webpack_require__(moduleId) {

// Check if module is in cache
var cachedModule = __webpack_module_cache__[moduleId];
if (cachedModule !== undefined) {
return cachedModule.exports;
}
// Create a new module (and put it into the cache)
var module = (__webpack_module_cache__[moduleId] = {
exports: {}
});
// Execute the module function
__webpack_modules__[moduleId](module, module.exports, __webpack_require__);

// Return the exports of the module
return module.exports;

}

/************************************************************************/
// startup
// Load entry module and return exports
// This entry module doesn't tell about it's top-level declarations so it can't be inlined
var __webpack_exports__ = __webpack_require__("./image.png");
var __webpack_exports__default = __webpack_exports__["default"];
export { __webpack_exports__default as default };

Reproduce link

https://github.com/altinokdarici/rspack-image-entry

Reproduce Steps

  1. Clone the repository: https://github.com/altinokdarici/rspack-image-entry
  2. Install dependencies: npm install
  3. Build the project: npm run build
  4. Start the server: npm start
  5. Open the browser and check the console to see that the imported image URL is undefined

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions