DevTools failed to parse SourceMap: webpack:///node_modules/sockjs-client/dist/sockjs.js.map

Question

I'm trying to setup a simple html/Js page.

I've installed webpack and babel. I've configured package.json file with the "build" and "start" scripts.

The page works pretty well but the Warning: "DevTools failed to parse SourceMap: webpack:///node_modules/sockjs-client/dist/sockjs.js.map" raises every time I execute the "npm run start" command and I can't debug my code in the Chome Devtools

package.json:

{
  "name": "my-proyect",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
    "build": "webpack --config ./webpack.config.js --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.0",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.0.3",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 1
    entry: './src/index.js',

    /////////  BABEL ///////////////
    module: {
        rules: [
          {
            test: /\.(js)$/,
            exclude: /node_modules/,
            use: ['babel-loader']
          }
        ]
      },
      resolve: {
        extensions: ['*', '.js']
      },
    ////////////////////////
    ///////// Plugins ///////////
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Hello Webpack bundled JavaScript Project',
            template: './src/index.html'
          })
    ],
    // 2
    output: {
      path: __dirname + '/dist',
      publicPath: '/',
      filename: 'bundle.js'
    },
    // 3
    devServer: {
      contentBase: './dist'
    }
  };

I will really appreciate if someone can guide me through this problem.

Regards.

Raydot · Accepted Answer · 2021-09-21 14:35:09Z

11

Adding this to the top of your webpack config file might help:

devtool: 'eval-source-map'

edited Sep 21, 2021 at 14:35

Raydot

1,5942 gold badges24 silver badges44 bronze badges

answered Jul 14, 2020 at 3:13

Vince

88713 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kent Weigel Over a year ago

It wasn't clear where to add the line. Adding at the topmost (leftmost) level worked for me. That is between that last two curly braces in the OP's webpack.config.js file.

Vince Over a year ago

add at the top if it works and open your web browser devtools search for Sources look for webpack if there's a webpack their you know it works

Kenna · Accepted Answer · 2020-04-08 13:54:46Z

1

Go to Dev tools settings then go to Preferences. Try to turn off the "Enable Javascript source map" and turn off "Enable CSS source map" and see if it works.

answered Apr 8, 2020 at 13:54

Kenna

92 bronze badges

Comments

MaBbKhawaja · Accepted Answer · 2020-09-03 08:07:14Z

0

"source-map-loader": "^1.0.0",

add this line to your devDependencies in package.json and run npm install

answered Sep 3, 2020 at 8:07

MaBbKhawaja

90010 silver badges17 bronze badges

Comments

Zephyr · Accepted Answer · 2020-06-14 04:15:19Z

-2

If they are just unimportant warnings that are bothering you when leaving the console, you can temporarily disable them...

edited Jun 14, 2020 at 4:15

Zephyr

12.6k91 gold badges53 silver badges92 bronze badges

answered Jun 13, 2020 at 12:19

Maya Fiuza

93 bronze badges

Collectives™ on Stack Overflow

DevTools failed to parse SourceMap: webpack:///node_modules/sockjs-client/dist/sockjs.js.map

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related