bug(windows): paths #17

Kristinita · 2020-10-08T17:01:37Z

1. Summary

posthtml-img-autosize doesn’t work for Windows.

I get errors as:

Error: Promise rejected with value: "ENOENT: no such file or directory, open 'C:\\path\\to\\project\\C:\\KiraImage.jpg'"

2. Reproducibility

I reproduce the problem for posthtml-cli and grunt-posthtml both on Windows.

On Linux I don’t have this problem.

I successfully use some another posthtml plugins (example), so I think that possibly that the problem is specific for the posthtml-img-autosize plugin.

3. Configuration

Operating system:
1. Ubuntu 20.04.1 LTS (Travis CI)
2. Windows Server 2019 (AppVeyor)
3. Windows 10.0.18363 Pro N for Workstations 64-bit EN (Local)
posthtml:
1. posthtml-cli 0.7.6
2. grunt-posthtml 0.5.1
posthtml-img-autosize 0.1.5

4. MCVE

You can see the configuration in the KiraPosthtmlAsync branch of my demo/debugging repository.

KiraPosthtml.html:

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Kira Goddess!</title>
</head>

<body>
    <img alt="Nelia leaves" src="NeliaLeaves.jpg">
    <img alt="Kira Goddess" src="https://i.imgur.com/J17UOiZ.jpg">
    <picture>
        <source srcset="NeliaLeaves.webp" type="image/webp">
        <img src="NeliaLeaves.jpg" alt="Nelia leaves again">
    </picture>
</body>

</html>

Gruntfile.coffee:

module.exports = (grunt) ->

    grunt.loadNpmTasks 'grunt-posthtml'

    grunt.initConfig

        posthtml:
            options:
                use: [
                    require('posthtml-img-autosize')(processEmptySize: true)
                ]
            single:
                files: [
                    src: 'KiraPostHTML.html'
                    dest: 'KiraImgAutosizeGrunt.html'
                ]

The part of .travis.yml — Ubuntu build:

install:
- npm install -g grunt-cli posthtml-cli posthtml-img-autosize
- npm install

script:
- posthtml KiraPostHTML.html -o KiraImgAutosizeCLI.html -u posthtml-img-autosize --posthtml-img-autosize.processEmptySize true
- grunt posthtml --verbose
- cat KiraImgAutosizeCLI.html
- cat KiraImgAutosizeGrunt.html

The part of appveyor.yml — Windows build:

install:
- npm install -g grunt-cli posthtml-cli posthtml-img-autosize
- npm install

test_script:
- posthtml KiraPostHTML.html -o KiraImgAutosizeCLI.html -u posthtml-img-autosize --posthtml-img-autosize.processEmptySize true

on_failure:
- grunt posthtml --verbose

5. Behavior

5.1. Ubuntu — expected

Travis build:

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>Kira Goddess!</title>

</head>

<body>

    <img alt="Nelia leaves" src="NeliaLeaves.jpg" width="620" height="1080">

    <img alt="Kira Goddess" src="https://i.imgur.com/J17UOiZ.jpg" width="864" height="1078">

    <picture>

        <source srcset="NeliaLeaves.webp" type="image/webp">

        <img src="NeliaLeaves.jpg" alt="Nelia leaves again" width="620" height="1080">

    </picture>

</body>

</html>

posthtml-img-autosize successfully add width and height for CLI and Grunt commands.

5.2. Windows — bug

AppVeyor build:

posthtml KiraPostHTML.html -o KiraImgAutosizeCLI.html -u posthtml-img-autosize --posthtml-img-autosize.processEmptySize true
Error: Promise rejected with value: "ENOENT: no such file or directory, open 'C:\\projects\\sashagruntdebugging\\C:\\NeliaLeaves.jpg'"
    at process.<anonymous> (C:\Users\appveyor\AppData\Roaming\npm\node_modules\posthtml-cli\node_modules\hard-rejection\index.js:15:12)
    at process.emit (events.js:314:20)
    at processPromiseRejections (internal/process/promises.js:245:33)
    at processTicksAndRejections (internal/process/task_queues.js:94:32)
Command exited with code 1


grunt posthtml --verbose
(node:2368) UnhandledPromiseRejectionWarning: ENOENT: no such file or directory, open 'C:\projects\sashagruntdebugging\C:\NeliaLeaves.jpg'

Path problem for CLI and Grunt both.

6. Not helped

I tried:

6.1. CLI

Command-line arguments like:

6.2. Grunt

Options like:

root: '\.'
root: process.cwd()

7. root option

I don’t understand why posthtml-img-autosize has a root option at all. PostHTML works with HTML directly. In HTML, relative links to images look like:

src="NeliaLeaves.jpg"
src="..\..\path\to\NeliaLeaves.jpg"

Is these cases a root option not really needed.

Is it needed in any other cases?

Thanks.

The text was updated successfully, but these errors were encountered:

Scrum · 2020-10-09T13:49:52Z

@Kristinita resolve in version 0.1.6

Kristinita · 2020-10-10T12:03:27Z

Status: CONFIRMED ✔️

I upgraded posthtml-img-autosize to the version 0.1.6 → in Windows I got the same behavior as for Linux; see AppVeyor build.

Thanks.

Kristinita · 2020-10-10T18:35:24Z

@Scrum, excuse me, I said “confirmed” too early

Status: Another problem ❗

1. Summary

posthtml-img-autosize 0.1.6 works incorrectly, if HTML files and images are in folders and/or subfolders.

2. Details

As I wrote in the section 7 of original issue, “I don’t understand why posthtml-img-autosize has a root option at all”.

HTML already use relative paths. For example, we have a line in our HTML:

<img alt="Nelia leaves" src="NeliaLeaves.jpg">

And a project where HTML files are located in various folders and subfolders.

3. Behavior 1

3.1. Expected

If HTML file is KiraPostHTML.html:

NeliaLeaves.jpg should be in the root folder

elif KiraFolder/KiraPostHTML.html:

correct path for image is KiraFolder/NeliaLeaves.jpg

else KiraFolder/KiraSubfolder/KiraPostHTML.html:

KiraFolder/KiraSubfolder/NeliaLeaves.jpg

and so on.

3.2. Current

In all three cases above posthtml-img-autosize tries to find the file NeliaLeaves.jpg in the root folder.

4. MCVE

You can see this configuration in the KiraPosthtmlImgAutosizePaths branch of my demo/debugging repository.

The part of package.json:

{
  "devDependencies": {
    "coffeescript": "^2.5.1",
    "grunt": "^1.3.0",
    "grunt-posthtml": "0.5.1",
    "posthtml-img-autosize": "^0.1.6"
  }
}

Gruntfile.coffee (in example I builded the file object dynamically):

module.exports = (grunt) ->

    grunt.loadNpmTasks 'grunt-posthtml'

    grunt.initConfig

        posthtml:
            options:
                use: [
                    require('posthtml-img-autosize')(processEmptySize: true)
                ]
            target:
                files: [
                    expand: true
                    cwd: '.'
                    src: 'KiraFolder/*.html'
                    dest: '.'
                    ext: '.output.html'
                ]

The part of .travis.yml:

install:
- npm install -g grunt-cli posthtml-cli posthtml-img-autosize
- npm install

script:
- posthtml KiraFolder/KiraPostHTML.html -o KiraFolder/KiraImgAutosizeCLI.html -u posthtml-img-autosize --posthtml-img-autosize.processEmptySize true
- grunt posthtml --verbose
- cat KiraFolder/KiraImgAutosizeCLI.html
- cat KiraFolder/KiraPostHTML.output.html

KiraFolder/KiraPostHTML.html:

<!doctype html>
<html>

<head>
    <title>Kira Goddess!</title>
</head>

<body>
    <img alt="Nelia leaves" src="NeliaLeaves.jpg">
</body>

</html>

5. Behavior 2

Correct image path is SashaGruntDebugging/KiraFolder/NeliaLeaves.jpg, not SashaGruntDebugging/NeliaLeaves.jpg.

5.1. CLI

Travis build:

$ posthtml KiraFolder/KiraPostHTML.html -o KiraFolder/KiraImgAutosizeCLI.html -u posthtml-img-autosize --posthtml-img-autosize.processEmptySize true

Error: Promise rejected with value: "ENOENT: no such file or directory, open '/home/travis/build/Kristinita/SashaGruntDebugging/NeliaLeaves.jpg'"

    at process.<anonymous> (/home/travis/.nvm/versions/node/v14.13.1/lib/node_modules/posthtml-cli/node_modules/hard-rejection/index.js:15:12)

    at process.emit (events.js:314:20)

    at processPromiseRejections (internal/process/promises.js:245:33)

    at processTicksAndRejections (internal/process/task_queues.js:94:32)

The command "posthtml KiraFolder/KiraPostHTML.html -o KiraFolder/KiraImgAutosizeCLI.html -u posthtml-img-autosize --posthtml-img-autosize.processEmptySize true" exited with 1.

5.2. Grunt

Travis build:

Running "posthtml:target" (posthtml) task

Verifying property posthtml.target exists in config…OK

Files: KiraFolder/KiraPostHTML.html -> KiraFolder/KiraPostHTML.output.html

Options: use=[null], singleTags=[], closingSingleTag="default", skipParse=null, sync=null

Reading KiraFolder/KiraPostHTML.html…OK

(node:6165) UnhandledPromiseRejectionWarning: ENOENT: no such file or directory, open '/home/travis/build/Kristinita/SashaGruntDebugging/NeliaLeaves.jpg'

(Use `node --trace-warnings …` to show where the warning was created)

(node:6165) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)

(node:6165) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Thanks.

Scrum · 2020-10-12T08:07:38Z

As I wrote in the section 7 of original issue, “I don’t understand why posthtml-img-autosize has a root option at all”.

HTML already use relative paths. For example, we have a line in our HTML:

The build process itself has a root and all running build processes will rely on this root, accordingly plugins need to specify paths relative to the root of the build process

module.exports = (grunt) ->

	grunt.loadNpmTasks 'grunt-posthtml'

	grunt.initConfig

		posthtml:
			options:
				use: [
					require('posthtml-img-autosize')(
						root: 'KiraFolder',
						processEmptySize: true
					)
				]
			target:
				files: [
					expand: true
					cwd: '.'
					src: 'KiraFolder/*.html'
					dest: '.'
					ext: '.output.html'
				]

Kristinita · 2020-10-18T07:19:19Z

Status: Not fixed 😿

1. Details

@Scrum, I don’t understand, how it can solve paths problem for real projects with multiple folders and subfolders. And I still think that the root option — this is a wrong scenario.

If it doesn’t, please show the correct Gruntfile.coffee for the MCVE below.

2. MCVE

See this configuration in KiraPosthtmlImgAutosizeMultipleFiles branch of my repository for demonstrations and debugging.

Content of output folder of my repository:

├───KiraAnotherFolder
│       KiraPostHTML.html
│
└───KiraFolder
    │   KiraPostHTML.html
    │   NeliaLeaves.jpg
    │
    └───KiraSubfolder
            KiraPostHTML.html

Parts of the files:

KiraFolder/KiraPostHTML.html:

<img alt="Nelia leaves" src="NeliaLeaves.jpg">

KiraFolder/KiraSubfolder/KiraPostHTML.html:

<img alt="Nelia leaves" src="../NeliaLeaves.jpg">

KiraAnotherFolder/KiraPostHTML.html:

<img alt="Nelia leaves" src="../KiraFolder/NeliaLeaves.jpg">

Paths in the src attribute of all 3 files are correct, but posthtml-img-autosize doesn’t work as expected, see the Travis build.

Thanks.

Scrum · 2020-10-19T10:03:11Z

@Scrum, I don’t understand, how it can solve paths problem for real projects with multiple folders and subfolders. And I still think that the root option — this is a wrong scenario.

If it doesn’t, please show the correct Gruntfile.coffee for the MCVE below.

You can not specify the root directory, but then you need to specify the full path to the resource location.

Because your paths are relative to the root directory output. This is how it will be right for all three files where used img

<img alt="Nelia leaves" src="KiraFolder/NeliaLeaves.jpg">

Kristinita · 2020-10-19T16:30:12Z

Status: Not fixed 😿

Because your paths are relative to the root directory output. This is how it will be right for all three files where used img

<img alt="Nelia leaves" src="KiraFolder/NeliaLeaves.jpg">

@Scrum, but browsers will not find the correct path to the image in this case. The image will not be displayed in browsers.

Thanks.

Scrum · 2020-10-20T07:12:16Z

It seems to me that you have a rather confusing connection between templates and static resources.

I can suggest you structure your ecosystem to something like this

src
├── assets
│   ├── configs
│   ├── styles
│   ├── fonts
│   ├── images
│   ├── videos
│   ├── audios
│   └── javascripts
└── templates
    ├── base
    │   └── base.html
    ├── coponents
    │   └── button.html    
    ├── layout
    │   └── header.html    
    └── pages
        └── index.html

Try to keep all static resources in one place assets

Kristinita · 2020-10-20T08:38:00Z

Status: Still not fixed 😿

1. MCVE

Type: Counterargument 💬

The structure of files and folders in the folder output:

│   KiraRoot.html
│
├───assets
│       NeliaLeaves.jpg
│
└───KiraFolder
    │   KiraInFolder.html
    │
    └───KiraSubfolder
            KiraInSubfolder.html

Parts of files:

KiraRoot.html:

<img alt="Nelia leaves" src="assets/NeliaLeaves.jpg">

KiraFolder/KiraInFolder.html:

<img alt="Nelia leaves" src="../assets/NeliaLeaves.jpg">

KiraFolder/KiraSubfolder/KiraInSubfolder.html:

<img alt="Nelia leaves" src="../../assets/NeliaLeaves.jpg">

posthtml-img-autosize will not work in this case.

2. Questions

Type: Questions ❓

Will posthtml-img-autosize support relative paths in the src attribute as in this MCVE?
If not, can I hear the reasons for this solution? What’s wrong with such paths?

Thanks.

Scrum · 2020-10-20T08:48:51Z

1. Will posthtml-img-autosize support relative paths in the `src` attribute as in this MCVE?
2. If not, can I hear the reasons for this solution? What’s wrong with such paths?

At the moment, relative paths are supported, but it should be borne in mind that they are resolved relative to the running process + root options and not relative to the html file

Kristinita · 2020-10-20T09:30:42Z

Type: Questions ❓

At the moment, relative paths are supported, but it should be borne in mind that they are resolved relative to the running process + root options and not relative to the html file

Yes, I understand the behavior at the moment, but my question is about something else. I’ll try to ask questions in other words:

Will posthtml-img-autosize support paths relative to the HTML file in the src attribute in the future?
If no, any reasons? Maybe I don’t know something, and paths relative to the HTML file no longer recommended.

Thanks.

Scrum · 2020-10-20T09:39:56Z

Yes, you can create a task feature where the root directory will be the context entry file.

Kristinita · 2020-10-20T09:50:09Z

Type: Question ❓

Yes, you can create a task feature where the root directory will be the context entry file.

Could you give an example of what you said (for example, for this MCVE)?

Thanks.

Scrum · 2020-10-20T09:57:51Z

posthtml:
			options:
				use: [
					require('posthtml-img-autosize')(
						root: 'byEntry'
					)
				]

or new property ctx

posthtml:
			options:
				use: [
					require('posthtml-img-autosize')(
						ctx: 'byEntry'
					)
				]

Kristinita · 2020-10-20T10:12:25Z

Type: Reply 💬

It has no effect: commit changes — Travis build failed.

Thanks.

Scrum · 2020-10-20T10:23:53Z

This is an example of a feature that needs to be implemented. :)

Kristinita · 2020-10-20T10:46:28Z

Type: Question ❓

Are there any chances that this feature will be implemented?

Thanks.

Scrum · 2020-10-20T11:23:09Z

Are there any chances that this feature will be implemented?

There are always chances

Kristinita · 2020-11-03T08:52:38Z

@Scrum, OK, we are waiting for this feature to be implemented.

Thanks.

Kristinita · 2022-08-16T18:24:16Z

This issue is still relevant for August, 2022.

I still can’t find any alternative that automatically adds height and width for all img.

Thanks.

Scrum · 2022-08-17T07:38:22Z

@Kristinita Hello, please create a new task, it is very difficult to understand the essence of the problem. a lot of comments.

Thank you.

Kristinita · 2022-09-05T18:07:32Z

@Scrum , OK, see #26.

Thanks.

Kristinita mentioned this issue Oct 9, 2020

bug(documentation): All plugins doesn't work posthtml/grunt-posthtml#3

Closed

Scrum closed this as completed in 9d23988 Oct 9, 2020

Scrum mentioned this issue Oct 20, 2020

path regarding context entry #19

Open

Kristinita mentioned this issue Sep 5, 2022

feature_request(paths): support relative paths for any valid folder structure #26

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

bug(windows): paths #17

bug(windows): paths #17

Kristinita commented Oct 8, 2020

Scrum commented Oct 9, 2020

Kristinita commented Oct 10, 2020

Kristinita commented Oct 10, 2020

Scrum commented Oct 12, 2020

Kristinita commented Oct 18, 2020 •

edited

Loading

Scrum commented Oct 19, 2020

Kristinita commented Oct 19, 2020

Scrum commented Oct 20, 2020

Kristinita commented Oct 20, 2020

Scrum commented Oct 20, 2020

Kristinita commented Oct 20, 2020

Scrum commented Oct 20, 2020

Kristinita commented Oct 20, 2020

Scrum commented Oct 20, 2020

Kristinita commented Oct 20, 2020

Scrum commented Oct 20, 2020

Kristinita commented Oct 20, 2020

Scrum commented Oct 20, 2020

Kristinita commented Nov 3, 2020

Kristinita commented Aug 16, 2022

Scrum commented Aug 17, 2022

Kristinita commented Sep 5, 2022

bug(windows): paths #17

bug(windows): paths #17

Comments

Kristinita commented Oct 8, 2020

1. Summary

2. Reproducibility

3. Configuration

4. MCVE

5. Behavior

5.1. Ubuntu — expected

5.2. Windows — bug

6. Not helped

6.1. CLI

6.2. Grunt

7. root option

Scrum commented Oct 9, 2020

Kristinita commented Oct 10, 2020

Kristinita commented Oct 10, 2020

1. Summary

2. Details

3. Behavior 1

3.1. Expected

3.2. Current

4. MCVE

5. Behavior 2

5.1. CLI

5.2. Grunt

Scrum commented Oct 12, 2020

Kristinita commented Oct 18, 2020 • edited Loading

1. Details

2. MCVE

Scrum commented Oct 19, 2020

Kristinita commented Oct 19, 2020

Scrum commented Oct 20, 2020

Kristinita commented Oct 20, 2020

1. MCVE

2. Questions

Scrum commented Oct 20, 2020

Kristinita commented Oct 20, 2020

Scrum commented Oct 20, 2020

Kristinita commented Oct 20, 2020

Scrum commented Oct 20, 2020

Kristinita commented Oct 20, 2020

Scrum commented Oct 20, 2020

Kristinita commented Oct 20, 2020

Scrum commented Oct 20, 2020

Kristinita commented Nov 3, 2020

Kristinita commented Aug 16, 2022

Scrum commented Aug 17, 2022

Kristinita commented Sep 5, 2022

Kristinita commented Oct 18, 2020 •

edited

Loading