Skip to content

Can't resolve 'node_modules/html-loader/dist/runtime/getUrl.js' for processing attributes #370

@GallardoCode

Description

@GallardoCode
  • Operating System: Windows 10
  • Node Version: v14.15.5
  • NPM Version: 7.5.4 or Yarn Version: 1.22.10
  • webpack Version: 5.23.0
  • html-loader Version: 2.1.0
  • html-webpack-plugin Version: 5.2.0

Expected Behavior

Index.html is loaded as a template with HtmlWebPackPlugin, html-loader is then used to process the attribute sources in the HTML. Using Webpack 5's asset modules, the resulting html should have the new source directories and the assets should be in that directory with the new filenames.

Actual Behavior

I get a child compilation error when webpack tries to use the html-loader module.

ERROR in Error: Child compilation failed:
Module not found: Error: Can't resolve 'node_modules/html-loader/dist/runtime/getUrl.js' in 'D:\Work\SharePlace'
Did you mean './node_modules/html-loader/dist/runtime/getUrl.js'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

This error can be avoided if I put

options: { sources: false }

but then the attribute sources are not processed. If I roll back html-loader to 1.3.2 then everything works as expected

Code

module.exports = {
  output: {
    assetModuleFilename: 'assets/[hash][ext][query]',
  },
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: 'html-loader',
        // options: { sources: false }
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './index.html' }),
  ],
}

How Do We Reproduce?

Simply use the template option in html-webpack-plugin with a html file containing attributes with sources. Then use html-loader 2.X+ and the child compilation error will occur

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions