webpack: Disk cache + asset module regression in v5.72.0

Bug report

What is the current behavior?

Webpack throws this error when using asset modules + disk caching:

Error: Cannot read properties of undefined (reading ‘get’) during rendering of asset asset/resource|/Users/mattlewis/Code/clickup/frontend/node_modules/.pnpm/resolve-url-loader@5.0.0/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[0].use[0]!/Users/mattlewis/Code/clickup/frontend/node_modules/.pnpm/sass-loader@13.0.2/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!/Users/mattlewis/Code/clickup/frontend/libs/theme/quill/quill-lazy-styles.scss?lazy-styles

The build works fine the first time, but then when making a change to the source and rebuilding it throws this error.

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

I’m really struggling to reproduce this outside of our app, it seems very nuanced and even the conditions to consistently reproduce are difficult.

After some debugging I determined the source of the regression was this change: https://github.com/webpack/webpack/pull/15515

The error is getting thrown here: https://github.com/webpack/webpack/blob/9fcaa243573005d6fdece9a3f8d89a0e8b399613/lib/asset/AssetModulesPlugin.js#L186 which is throwing because both module.buildInfo.filename and codeGenResult.data are undefined.

Adding some logs to that line, the value of codeGenResult is:

{
  sources: Map(1) {
    'asset' => CachedSource {
      _source: [Function],
      _cachedSourceType: false,
      _cachedSource: undefined,
      _cachedBuffer: <Buffer 2e 73 6c 61 73 68 2d 63 6f 6d 6d 61 6e 64 73 5f 6f 70 65 6e 20 2e 71 6c 2d 65 64 69 74 6f 72 20 2e 63 75 2d 73 6c 61 73 68 2d 63 6f 6d 6d 61 6e 64 5f ... 223147 more bytes>,
      _cachedSize: undefined,
      _cachedMaps: [Map],
      _cachedHashUpdate: [Array]
    }
  },
  runtimeRequirements: Set(0) {},
  data: undefined
}

and the value of module is:

NormalModule {
  dependencies: [],
  blocks: [],
  parent: undefined,
  type: 'asset/resource',
  context: '/Users/mattlewis/Code/clickup/frontend/libs/theme/quill',
  layer: null,
  needId: true,
  debugId: 2710,
  resolveOptions: {},
  factoryMeta: undefined,
  useSourceMap: false,
  useSimpleSourceMap: false,
  _warnings: undefined,
  _errors: undefined,
  buildMeta: { exportsType: 'default', defaultObject: false },
  buildInfo: {
    cacheable: true,
    parsed: true,
    fileDependencies: undefined,
    contextDependencies: undefined,
    missingDependencies: undefined,
    buildDependencies: LazySet {
      _set: [Set],
      _toMerge: Set(0) {},
      _toDeepMerge: [],
      _needMerge: false,
      _deopt: false
    },
    valueDependencies: undefined,
    hash: '8795b2198d6a3fc4',
    assets: undefined,
    assetsInfo: undefined,
    strict: true,
    dataUrl: false,
    snapshot: Snapshot {
      _flags: 5001,
      startTime: 1660738122934,
      fileTimestamps: undefined,
      fileHashes: undefined,
      fileTshs: [Map],
      contextTimestamps: undefined,
      contextHashes: undefined,
      contextTshs: undefined,
      missingExistence: [Map],
      managedItemInfo: [Map],
      managedFiles: [Set],
      managedContexts: undefined,
      managedMissing: undefined,
      children: [Set]
    }
  },
  presentationalDependencies: undefined,
  codeGenerationDependencies: undefined,
  request: '/Users/mattlewis/Code/clickup/frontend/node_modules/.pnpm/resolve-url-loader@5.0.0/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[0].use[0]!/Users/mattlewis/Code/clickup/frontend/node_modules/.pnpm/sass-loader@13.0.2/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!/Users/mattlewis/Code/clickup/frontend/libs/theme/quill/quill-lazy-styles.scss?lazy-styles',
  userRequest: '/Users/mattlewis/Code/clickup/frontend/libs/theme/quill/quill-lazy-styles.scss?lazy-styles',
  rawRequest: '@cu/theme/quill/quill-lazy-styles.scss?lazy-styles',
  binary: true,
  parser: AssetParser { dataUrlCondition: false },
  parserOptions: undefined,
  generator: AssetGenerator {
    dataUrlOptions: undefined,
    filename: '[hash].css',
    publicPath: undefined,
    outputPath: undefined,
    emit: true
  },
  generatorOptions: { filename: '[hash].css' },
  resource: '/Users/mattlewis/Code/clickup/frontend/libs/theme/quill/quill-lazy-styles.scss?lazy-styles',
  resourceResolveData: {
    _ResolverCachePluginCacheMiss: true,
    context: {
      issuer: '/Users/mattlewis/Code/clickup/frontend/libs/common/lazy-link/src/lib/lazy-link.service.ts',
      issuerLayer: null,
      compiler: undefined
    },
    path: '/Users/mattlewis/Code/clickup/frontend/libs/theme/quill/quill-lazy-styles.scss',
    request: undefined,
    query: '?lazy-styles',
    fragment: '',
    module: false,
    directory: false,
    file: false,
    internal: false,
    fullySpecified: false,
    descriptionFilePath: '/Users/mattlewis/Code/clickup/frontend/package.json',
    descriptionFileData: {
      name: 'clickup-frontend',
      version: '0.0.0',
      license: 'UNLICENSED',
      scripts: [Object],
      'lint-staged': [Object],
      private: true,
      dependencies: [Object],
      devDependencies: [Object],
      optionalDependencies: [Object],
      prettier: [Object],
      'jest-junit': [Object],
      engines: [Object],
      pnpm: [Object],
      packageManager: 'pnpm@7.9.0'
    },
    descriptionFileRoot: '/Users/mattlewis/Code/clickup/frontend',
    relativePath: './libs/theme/quill/quill-lazy-styles.scss',
    typescriptPathMapped: true,
    __innerRequest_request: undefined,
    __innerRequest_relativePath: './libs/theme/quill/quill-lazy-styles.scss',
    __innerRequest: './libs/theme/quill/quill-lazy-styles.scss'
  },
  matchResource: undefined,
  loaders: [
    {
      loader: '/Users/mattlewis/Code/clickup/frontend/node_modules/.pnpm/resolve-url-loader@5.0.0/node_modules/resolve-url-loader/index.js',
      options: [Object],
      ident: 'ruleSet[1].rules[0].use[0]'
    },
    {
      loader: '/Users/mattlewis/Code/clickup/frontend/node_modules/.pnpm/sass-loader@13.0.2/node_modules/sass-loader/dist/cjs.js',
      options: [Object],
      ident: 'ruleSet[1].rules[0].use[1]'
    }
  ],
  error: null,
  _source: RawSource {
    _valueIsBuffer: true,
    _value: <Buffer 2e 73 6c 61 73 68 2d 63 6f 6d 6d 61 6e 64 73 5f 6f 70 65 6e 20 2e 71 6c 2d 65 64 69 74 6f 72 20 2e 63 75 2d 73 6c 61 73 68 2d 63 6f 6d 6d 61 6e 64 5f ... 223147 more bytes>,
    _valueAsBuffer: <Buffer 2e 73 6c 61 73 68 2d 63 6f 6d 6d 61 6e 64 73 5f 6f 70 65 6e 20 2e 71 6c 2d 65 64 69 74 6f 72 20 2e 63 75 2d 73 6c 61 73 68 2d 63 6f 6d 6d 61 6e 64 5f ... 223147 more bytes>,
    _valueAsString: undefined
  },
  _sourceSizes: undefined,
  _sourceTypes: Set(2) { 'javascript', 'asset' },
  _lastSuccessfulBuildMeta: { exportsType: 'default', defaultObject: false },
  _forceBuild: false,
  _isEvaluatingSideEffects: false,
  _addedSideEffectsBailout: undefined,
  _ast: null
}

The asset module rule in the webpack config we’re using is:

{
    resourceQuery: /lazy-styles/,
    type: 'asset/resource',
    generator: {
      filename: '[hash].css',
    },
    test: /\.scss$/,
    use: [
      {
        loader: 'resolve-url-loader',
        options: {
          sourceMap: config.mode === 'development',
        },
      },
      {
        loader: 'sass-loader',
        options: {
          sourceMap: true,
        },
      },
    ],
  }

Maybe this info is enough to provide some clues as to what’s going wrong, but also happy to provide more info or debug output!

What is the expected behavior?

It should not throw an error.

Other relevant information: webpack version: 5.72.0 Node.js version: 16.16.0 Operating System: MacOS Additional tools:

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 27 (24 by maintainers)

Most upvoted comments

@alexander-akait I’ve been able to isolate this further and I believe this is a bug in Webpack and not in the image-minimizer-webpack-plugin

I’ve updated my example repo to replace that plugin with a simple loader that just does the following:

// Naive loader that just returns a constant static SVG placeholder
module.exports = function loader(content) {
  return '<svg></svg>';
}

Using this, we still get the same error message after building, modifying the svg file, and then building again

ryanwilsonperkin on Feb 7, 2023

Interestingly it doesn’t seem like it’s the filename that’s getting lost, it’s the data itself that’s undefined based on my reading of the error Cannot read properties of undefined (reading 'get')

ryanwilsonperkin on Sep 14, 2022