inconsistent export syntax when used with file-loader@1.0

[cainlevy]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

When used in a project with file-loader@1.0, the current version of url-loader will create a CommonJS export for inlined images but an ES module export for external images.

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

1. create a webpack project with file-loader@1.0.0 and url-loader@0.5.9
2. render two images, where one is greater than url-loader's configured limit
3. depending on the import or require syntax, one of the images will be broken

What is the expected behavior?

Consistent export syntax.

[alexander-akait]

@cainlevy can your provide test repo, what is broken?

[alexander-akait]

Maybe related to webpack-contrib/file-loader#185

[cainlevy]

I tested webpack-contrib/file-loader#183 and confirmed that it does not solve the bug.

The problem is that https://github.com/webpack-contrib/url-loader/blob/master/index.js#L31 returns CommonJS exports while https://github.com/webpack-contrib/url-loader/blob/master/index.js#L36 returns ES exports. This inconsistency means that I must switch import syntax depending on whether the image will be inlined or not.

Possible solutions:

• update peerDependencies in package.json to "file-loader": "<1.0"
• update url-loader to ES exports (related? webpack-defaults upgrade #69)

I can create a test repo if necessary, I'm just hoping to save the work if this issue can be described simply.

[alexander-akait]

@cainlevy be greate if your create test repo, thanks!

[cainlevy]

Test repo: https://github.com/cainlevy/webpack-contrib-url-loader-issue-85

When the source files use ES2015 import syntax, Webpack is able to obscure the difference between url-loader's CommonJS modules and file-loader's ES2015 modules. This can be seen by opening dist/index-es2015.html and noting only one broken image where the source file used CommonJS.

But when Webpack bundles with a loader that transpiles to CommonJS (from src/index-es2015.js to src/index-cjs.js) then the differences between url-loader and file-loader mean that there is no single import syntax that will work consistently. This can be seen by opening dist/index-cjs.html and noting that the inlined image is broken when the source file used ES2015 import syntax and the referenced image is broken when the source file used CommonJS import syntax.

[alexander-akait]

@cainlevy let's fix this after webpack-contrib/file-loader#183

[michael-ciniawsky]

We should pin the file-loader dependency to < v1.0.0 for now. css-loader && html-loader asset resolving is also affected by CJS => ES2015 Modules change, we sadly can't do that now

@cainlevy Downgrade file-loader for now as it isn't correctly working in v1.0.0+