-
-
Notifications
You must be signed in to change notification settings - Fork 781
Description
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
- Clone the repository: https://github.com/altinokdarici/rspack-image-entry
- Install dependencies:
npm install - Build the project:
npm run build - Start the server:
npm start - Open the browser and check the console to see that the imported image URL is undefined