Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

webpack + babel loader source map references empty file

I have an es6 project which I bundle using webpack + babel loader. When I open the devtools I can see 'webpack://' and all my sources (es6) underneath.

The problems are: breakpoints don't hit and function references directs me to a file name '?d41d

which has the following content:

undefined


/** WEBPACK FOOTER **
 ** 
 **/

if I drill down from document script to a function in my bundle I get to the ?d41d file as well

my webpack.config.js:

module.exports = {

    debug: true,
    devtool: 'cheap-module-eval-source-map',
    entry: "entry.js",
    output: {
        path: "C:/html5/",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['es2015'],
                    plugins: ['transform-object-assign'],
                    sourceMaps: ['inline']
                }
            }
        ]
    }
};

and part of package.json in case it might help:

"devDependencies": {
    "ava": "^0.16.0",
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-transform-object-assign": "^6.8.0",
    "babel-preset-es2015": "^6.13.2",
    "cheerio": "^0.22.0",
    "chokidar-cli": "^1.2.0",
    "eslint": "^3.3.1",
    "html-to-js": "0.0.1",
    "jsdoc": "^3.4.0",
    "jsdom": "^9.4.2",
    "minami": "^1.1.1",
    "obfuscator": "^0.5.4",
    "sinon": "^1.17.5",
    "uglify-js": "^2.7.3",
    "webpack": "^1.13.2",
    "yargs": "^5.0.0"
  },
  "dependencies": {
    "jquery": "^3.1.0"
  }

Thanks in advance.

like image 898
Gal Ziv Avatar asked Aug 29 '16 12:08

Gal Ziv


People also ask

How do I enable source maps in webpack?

Using Webpack, specifying devtool: "source-map" in your Webpack config will enable source maps, and Webpack will output a sourceMappingURL directive in your final, minified file. You can customize the source map filename itself by specifying sourceMapFilename .

What is Sourcemap?

A source map is a file that maps from the transformed source to the original source, enabling the browser to reconstruct the original source and present the reconstructed original in the debugger. To enable the debugger to work with a source map, you must: generate the source map.

Can webpack work without babel?

No unless all dependencies of your project supports ES6. There is one serious incompatibility: import is asynchronous while require() is synchronous.


1 Answers

This also just started happening to me today,

I'm not sure what the root of the problem is, but switching devtool from cheap-module-eval-source-map to sourceMap has fixed the problem for the time being.

like image 81
Chris Penner Avatar answered Oct 27 '22 11:10

Chris Penner