Error: Unable to lookup source.

[gezichenshan]

Using 3.0.0

Unable to lookup source: /Users/user/ryanown/khlt/registration/src/components/src/components/Reg1.vue

the "src/components" showed twice.

[alex-dow]

I get the same problem.

Some relevant version numbers:

istanbul-instrumenter-loader v3.0.0
webpack v3.10.0
vue-loader v13.7.0
karma v2.0.0
karma-coverage v1.1.1
karma-coverage-istanbul-reporter v1.3.3

webpack config:

Folder structure:

src/
components/
tests/
test-loader.js
package.json
webpack.config.js

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

var PROD = process.env.NODE_ENV === "production";
var DEV  = process.env.NODE_ENV === "development";
var TEST = process.env.NODE_ENV === "test";

var entries = [path.join(__dirname, 'src/index.js')];

if (DEV === true) {
    entries.unshift('webpack-hot-middleware/client?reload=true');
}

module.exports = {
    entry: entries,
    node: {
        fs: 'empty'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'app.js',
        publicPath: '/dist/'
    },
    module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: {
                    'scss': 'vue-style-loader!css-loader!sass-loader',
                    'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
                }
            }
        },{
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        },{
            test: /\.(png|jpg|gif|svg)$/,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]?[hash]'
            }
        },{
            test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: 'url-loader?limit=10000&mimetype=application/font-woff'
        },{
            test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: "file-loader"
        }]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html',
            inject: 'body',
            filename: 'index.html'
        }),
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        })
    ]
};

if (DEV === true) {
    module.exports.devtool = 'eval-source-map'
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.HotModuleReplacementPlugin()
    ]);
}

if (PROD === true) {
    module.exports.devtool = 'source-map';
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            compress: {
                warnings: false
            }
        }),

        new webpack.LoaderOptionsPlugin({
            minimize: true
        })
    ]);
};

Karma config:

var webpackConfig = require('./webpack.config.js');

delete webpackConfig.entry;
webpackConfig.devtool = 'eval-source-map';


webpackConfig.module.rules[0]['options']['postLoaders'] = {
    js: 'istanbul-instrumenter-loader?esModules=true'
};

webpackConfig.module.rules.push({
    enforce: 'post',
    test: /\.js$/,
    exclude: /(node_modules|\.test\.js|test\-loader\.js$)/,
    loader: 'istanbul-instrumenter-loader',
    query: {
        debug: true,
        preserveComments: true,
        esModules: true
    }
});

console.log('webpack conf:', webpackConfig.module.rules);


module.exports = function(config) {

    'use strict';

    config.set({
        browsers: ['PhantomJS'],
        frameworks: ['mocha', 'chai'],
        files: ['test-loader.js'],
        client: {
            mocha: {
                ui: 'bdd'
            }
        },
        reporters: ['coverage-istanbul'],
        preprocessors: {
            'test-loader.js': ['webpack']
        },
        webpack: webpackConfig,
        webpackMiddleware: {
            noInfo: true
        },
        coverage: {
            reporters: ['text-summary', 'html'],
            dir: './reports/coverage'
        },
        coverageIstanbulReporter: {
            dir: './reports/coverage-istanbul',
            reports: ['lcov','html'],
            fixWebpackSourcePaths: false,
            'report-config': {
                html: {
                    subdir: 'html'
                }
            }
        },
        port: 9876,
        colors: true,
        autoWatch: true,
        singleRun: true,
        logLevel: config.LOG_INFO
    });
}

test-loader.js

const tests = require.context('./tests/', true, /test\.js$/);
tests.keys().forEach(tests);

const components = require.context('./components', true, /\.vue$/);
components.keys().forEach(components);

const scripts = require.context('./src/', true, /\.js$/);
scripts.keys().forEach(scripts);

I have one file in /components folder: /components/App.vue

Error in App.vue coverage report (html) is:

Unable to lookup source: /home/v0id/TestApp/components/components/App.vue

As you can see, /components/components is wrong. It's not clear where the problem comes from.

[alex-dow]

I realise that I have fixWebpackSourcePaths: false, however this set to true does not change any of the behaviour I see.

[voy]

For what it's worth, I am getting the same error message trying to get coverage reports on my stack using mocha, webpack, typescript and babel. I will continue digging, but if anyone in the meantime has some ideas, they would be much appreciated.

[c7ming]

Any update for this issue?

[smoakey]

I am also having this issue with webpack 4 and mocha-webpack

[trouba]

Using '#eval' as devtool for source-map generation solved this issue for me

[expaso]

'#eval' did not work for me.

When I run 1 simple test on a test-project using typescript and webpack 4, I get a lcov.info like this:

TN:
SF:C:\dev\sources\testapp\src\app.ts
FNF:0
FNH:0
LF:0
LH:0
BRF:0
BRH:0
end_of_record
TN:
SF:C:\dev\sources\testapp\src\src\C:\dev\sources\testapp\src\app.ts
FN:1,(anonymous_0)
FNF:1
FNH:1
FNDA:2,(anonymous_0)
DA:1,1
DA:2,1
DA:3,1
LF:3
LH:3
BRF:0
BRH:0
end_of_record

The first file has a correct path, but no coverage.
The second file (basically the same file) has coverage, but the path is all messed-up.

[ejaz47]

Any update? I am having the same issue.

[Maximus1285]

I'm also having this same issue: Error: Unable to lookup source: /opt/cypress-code-coverage/path/to/my-file.component.ts (ENOENT: no such file or directory, open...

const webpackOptions = {
  resolve: {
    extensions: ['.ts', '.js'],
  },

  devtool: 'source-map',

  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: 'awesome-typescript-loader',
          },
        ],
      },
    ],
  },
};

const options = {
  webpackOptions,
};

module.exports = wp(options);

Any possible solution?

[chrisxxp]

Using '#eval' as devtool for source-map generation solved this issue for me

thanks, i delete the devtool property,and that is ok!