Wrong absolute path with .vue files

[riophae]

Hi, I'm having an issue with HTML report saying "Unable to lookup source", and this is specific to .vue files. I have created a repo to demonstrate it: https://github.com/riophae/istanbuljs-bug-reproduction
You can download the repo as a ZIP and see it in action (located in test/coverage/index.html).

Unable to lookup source: /mnt/c/Projects/istanbuljs-bug-reproduction/src/src/Component.vue(ENOENT: no such file or directory, open '/mnt/c/Projects/istanbuljs-bug-reproduction/src/src/Component.vue')
Error: Unable to lookup source: /mnt/c/Projects/istanbuljs-bug-reproduction/src/src/Component.vue(ENOENT: no such file or directory, open '/mnt/c/Projects/istanbuljs-bug-reproduction/src/src/Component.vue')
    at Context.defaultSourceLookup [as sourceFinder] (/mnt/c/Projects/istanbuljs-bug-reproduction/node_modules/istanbul-lib-report/lib/context.js:15:15)
    at Context.getSource (/mnt/c/Projects/istanbuljs-bug-reproduction/node_modules/istanbul-lib-report/lib/context.js:78:17)
    at Object.annotateSourceCode (/mnt/c/Projects/istanbuljs-bug-reproduction/node_modules/istanbul-reports/lib/html/annotator.js:217:40)
    at HtmlReport.onDetail (/mnt/c/Projects/istanbuljs-bug-reproduction/node_modules/istanbul-reports/lib/html/index.js:265:27)
    at Visitor. [as onDetail] (/mnt/c/Projects/istanbuljs-bug-reproduction/node_modules/istanbul-lib-report/lib/tree.js:34:30)
    at ReportNode.Node.visit (/mnt/c/Projects/istanbuljs-bug-reproduction/node_modules/istanbul-lib-report/lib/tree.js:114:17)
    at /mnt/c/Projects/istanbuljs-bug-reproduction/node_modules/istanbul-lib-report/lib/tree.js:118:15
    at Array.forEach ()
    at ReportNode.Node.visit (/mnt/c/Projects/istanbuljs-bug-reproduction/node_modules/istanbul-lib-report/lib/tree.js:117:24)
    at /mnt/c/Projects/istanbuljs-bug-reproduction/node_modules/istanbul-lib-report/lib/tree.js:118:15
    at Array.forEach ()
    at ReportNode.Node.visit (/mnt/c/Projects/istanbuljs-bug-reproduction/node_modules/istanbul-lib-report/lib/tree.js:117:24)
    at Tree.visit (/mnt/c/Projects/istanbuljs-bug-reproduction/node_modules/istanbul-lib-report/lib/tree.js:150:20)
    at /mnt/c/Projects/istanbuljs-bug-reproduction/node_modules/karma-coverage/lib/reporter.js:278:16
    at FSReqCallback.oncomplete (fs.js:154:23)

If you take a closer look, you see there are duplications in the path src/src/Component.vue, which should be src/Component.vue if correctly determined.

After hours of diving in the source code of InstanbulJS packages, I found the path manipulation that causes the bug happens there:

istanbuljs/packages/istanbul-lib-source-maps/lib/get-mapping.js

Line 168 in 025e8af

source: pathutils.relativeTo(start.source, origFile),

For the src/Component.vue file mentioned above, the values of start.source and origFile are "src/Component.vue" and "/mnt/c/Projects/istanbuljs-bug-reproduction/src/Component.vue" respectively.

istanbuljs/packages/istanbul-lib-source-maps/lib/pathutils.js

Lines 16 to 20 in 025e8af

	relativeTo(file, origFile) {
	return path.isAbsolute(file)
	? file
	: path.resolve(path.dirname(origFile), file);
	}

You see "src/Component.vue" as the file argument is not an absolute path. So the result returned by pathutils.relativeTo() becomes "/mnt/c/Projects/istanbuljs-bug-reproduction/src/src/Component.vue", resulting in the duplications.

I don't know why the file argument here is not an absolute path. Maybe this is also related to vue-loader that I've used to process .vue files.

Any ideas? Thanks.

Related issues:

• Unable to lookup source nyc#359
• Error: Unable to lookup source. webpack-contrib/istanbul-instrumenter-loader#80

[Blackgan3]

I ran into the same problem

[ejaz47]

Any update on this issue?

[alan1111]

@ejaz47 , Maybe this link can help you https://gist.github.com/lsapan/3bfd0ffc0fb3d4a036fce84f6eea142e.

[coreyfarrell]

This strikes me as possibly an issue with the source-maps being generated. If src/Component.vue has a source-map that refers to src/Component.vue that is incorrect, it should be Component.vue (alternatively istanbuljs could deal with the source-map referring to an absolute path). I don't think istanbuljs can change the logic here because doing so would cause a problem for components that generate correct source-maps.

I'm leaving this issue open so it can be discussed and hopefully a solution can be found but I don't really know vue so I don't think I can help.

[sebtiz13]

Hello i don't know if issue is due by error in generation of source-maps in vue or if is an error in pathutils.

Source map it's build like this:

{
  "source": ["file.vue"],
  "sourceRoot": ["/src/components/" ]
} 

SourceMapConsumer build this in sources:
[ "/src/components/file.vue" ]

it's okay but if filePath is absolute file of file.vue and source is relative path of file.vue why build path with
path.resolve(path.dirname(origFile), file)

A solution can be add conditions like this to solve problem

if (origFile.indexOf(file) !== -1) {
  return origFile
}

I don't know if it's possible to custom the source path in webpack or vue-loader to build absolute path like js file, but i think it's not bad to add an condition like this

Edit:
Source map of vue files it's generate here.
https://github.com/vuejs/component-compiler-utils/blob/master/lib/parse.ts#L96-L99

The SourceMapConsumer result (/src/components/file.vue) seems normal to me.
So to me the problem is in "relativeTo" function

istanbuljs/packages/istanbul-lib-source-maps/lib/pathutils.js

Lines 16 to 20 in 025e8af

	relativeTo(file, origFile) {
	return path.isAbsolute(file)
	? file
	: path.resolve(path.dirname(origFile), file);
	}

Since the relative path seems to be built from the root of project why not replace path.resolve(path.dirname(orig File), file) with path.resolve(process.cwd(), file) as in asAbsolute funciton ?

[coreyfarrell]

From what I can tell the changes being requested here would break projects that construct correct source-maps.

Can someone commit generated files to a git repo so I can browser the files that are generated? This would allow me to be very specific and say exactly what is wrong with the example source-map. No archives please.

[sebtiz13]

Ok so if i understand correctly, good practice would be that sourceRoot is an absolute path to obtain /root/projects/src/components/file.vue in output of SourceMapConsumer. So doesn't need change in "pathutils" and just need update this
https://github.com/vuejs/component-compiler-utils/blob/master/lib/parse.ts#L96-L99