Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

support ES module syntax #203

Closed
alexander-akait opened this issue Dec 6, 2019 · 9 comments
Closed

support ES module syntax #203

alexander-akait opened this issue Dec 6, 2019 · 9 comments

Comments

@alexander-akait
Copy link
Member

webpack/webpack#10053
@alexander-akait alexander-akait mentioned this issue Dec 6, 2019
Closed
@nil4
Copy link

nil4 commented Dec 7, 2019

Below are the details for reference. I would like to attempt a PR to fix, if someone can share some guidance on how to resolve this issue in html-loader.

Bug report

What is the current behavior?

[object Module] output instead of image links after processing through Webpack, e.g.

  • <link rel="shortcut icon" href="[object Module]" />
  • <img src="[object Module]" alt=""/>.

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

  1. Extract the attached repro-webpack.zip.
  2. Run npm install
  3. Run npm bundle (this is a script for webpack --mode development)
  4. Examine the file dist/index@hash.html

What is the expected behavior?

The dist/index@hash.html file should contain links to image URLs.
Instead, wherever an image URL is expected, [object Module] is output instead.

Here is a diff between the actual and expected output:

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
-    <link rel="shortcut icon" href="[object Module]" />
+    <link rel="shortcut icon" href="/favicon@hash.ico" />
</head>
<body>
-    <img src="[object Module]" alt=""/>
+    <img src="/favicon@hash.ico" alt=""/>
<script type="text/javascript" src="/app@13359e76.js"></script></body>
</html>

Other relevant information:
webpack version: 4.41.2
Node.js version: 13.2.0
Operating System: Windows 10 1909 (x64)
Additional tools: NPM 6.13.1

@abrindam
Copy link

@nil4 The problem was solved in css-loader by introducing code of the form url = url.__esModule ? url.default : url; (https://github.com/webpack-contrib/css-loader/pull/984/files)

The fix will definitely involve code of this form, I would think, but this code has to be executed at runtime. So you wouldn't put this code in loader, you'd put it in the code the loader generates.

css-loader already had clean infrastructure for doing this in the form of a runtime library that is always included in the generated code. However, html-loader doesn't have this, which makes it trickier.

Just from 20 minutes of looking at the code, I'd try changing the end of index.js to look something like this:

var getUrlString = "function getUrl(url) { return  url.__esModule ? url.default : url; }\n";
return getUrlString + exportsString + content.replace(/xxxHTMLLINKxxx[0-9\.]+xxx/g, function(match) {
		if(!data[match]) return match;
		
		var urlToRequest;

		if (config.interpolate === 'require') {
			urlToRequest = data[match];
		} else {
			urlToRequest = loaderUtils.urlToRequest(data[match], root);
		}
		
		return '" + getUrl(require(' + JSON.stringify(urlToRequest) + ')) + "';
	}) + ";";

Disclaimer: I haven't run or tested anything above, just trying to help you get started.

@alexander-akait
Copy link
Member Author

Good solution, yes, we need this, in near future we refactor code and i will do it

@kagz
Copy link

kagz commented Dec 23, 2019

I had same problem in vue js when i upgraded .....i realized it was caused by file-loader version 5+
i had to install a lower version...

@abrindam
Copy link

@kagz Yes, until this issue is fixed, file-loader 5+ and html-loader will be incompatible at their default settings.

Downgrading file-loader is one option, but you can also use file-loader 5+ with esModule: false (see https://github.com/webpack-contrib/file-loader#esmodule)

@ryanclark ryanclark mentioned this issue Dec 24, 2019
Merged
11 tasks
@alexander-akait
Copy link
Member Author

/cc @ryanclark i think we can close issue, right?

@ryanclark
Copy link
Contributor

Yep should be good to close @evilebottnawi

@vishal423 vishal423 mentioned this issue Feb 7, 2020
Closed
@flipcc flipcc mentioned this issue Mar 3, 2020
Closed
@SMKrizan
Copy link

Unfortunately, the esModule: false solution is not doing the trick for me in what seems to be an identical instance.

@buchatsky
Copy link

Still need to set esModule: false in order to make angular AOT to work with img

@oliviasculley oliviasculley mentioned this issue Jul 26, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@nil4 @abrindam @alexander-akait @ryanclark @buchatsky @SMKrizan @kagz