Skip to content

altinokdarici/rspack-image-entry

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Issue with Asset Entry Points in Library Mode and ESM

This repository demonstrates an issue in Rspack where entry points that are assets (like images) generate broken modules when used as direct entry points in library mode with ECMAScript modules.

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'
        }
      },
    ],
  }
});

Steps to Reproduce

  1. Clone this repository
  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

Environment

@rspack/cli: v1.3.4 @rspack/core: v1.3.4

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors