image-size, image-width, image-height doesn't work correctly

[mdreizin]

For instance, we have "sub/variables.less" which contains:

@img-width: image-width("../img/test.png");

And if try to import "~sub/variables.less" in other file (the resolve.root is set correctly) via:

@import (reference) "~sub/variables.less";

the "less-loader" will throws exception:

Module build failed: error evaluating function `image-width`: Cannot 'resolveSync' because the fileSystem is not sync. Use 'resolve'!
 @ <full-path-to-file>/sub/less/variables.less

[jhnns]

Mhmmm that might be a limitation by webpack @sokra? Why is resolveSync not allowed?

[sokra]

webpack uses a async filesystem. You must use the async version of resolve.

[malykhinvi]

I have the same problem. Is there some workaround for this problem?

[jhnns]

@sokra Shouldn't sync resolving be opt-in?

[sokra]

resolveSync can only be used with a sync filesystem. This never occurs with webpack. It only occurs with enhanced-require when you use a sync require. You must not use resolveSync in webpack.

The problem is that some parts of less.js don't use loadFile but only loadFileSync. Because you are not allowed to use sync io in a loader this breaks...

Either we use a uncool workaround with multiple less passes, or we fixed the occrences of loadFileSync in less.js (might require design changes).

[next0]

@sokra @jhnns, what about just use less.js FileManager insted of WebpackFileManager in this case? You can check this #58

[avivr]

i'm having the same problem, trying to use image-height("../some/path/to/image.png") and get:

ERROR in ../~/css-loader!../~/less-loader!./less/main.less
Module build failed: error evaluating function `image-height`: Cannot 'resolveSync' because the fileSystem is not sync. Use 'resolve'!

can you please explain how to solve/workaround this, or what i'm doing wrong?
thanks!

[next0]

@avivr, as @sokra explain before, the less.js use only loadFileSync for functions like data-uri, image-size, image-width, image-height and etc. less-loader use custom WebpackFileManager as a plugin for less.js. The main issue, what webpack can't resolve sync file loads when running in async mode, but WebpackFileManager tells otherwise here. In case if supportsSync will be return false here in async mode, all sync file loads will be managed by native less.js and that error will be disappeared.
You can check my PR #58 , it should fix your issue.

[jhnns]

Fix shipped with 2.2.2