1

I'm newbie in NodeJS, React and Webpack. I have installed bootstrap which needs popper.js. When I run my application everything works fine but I've got an error in the console of Firefox like this:

enter image description here

File package.json

{
  "name": "basketmetrics2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon --exec babel-node src/server/server.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.3.3",
    "@babel/node": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.11.0",
    "nodemon": "^1.18.10",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.4",
    "webpack-dev-middleware": "^3.5.2",
    "webpack-livereload-plugin": "^2.2.0"
  },
  "dependencies": {
    "bootstrap": "^4.3.1",
    "express": "^4.16.4",
    "jquery": "^3.3.1",
    "react": "^16.8.2",
    "react-bootstrap": "^1.0.0-beta.5",
    "react-dom": "^16.8.2"
  }
}

File webpack.config.js

import webpack from "webpack";
import htmlWebpackPlugin from "html-webpack-plugin";
import LiveReloadPlugin from "webpack-livereload-plugin";


export default {
    mode: "development",
    entry: "./src/client/index.js",
    output: {
        path: "/",
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                use: {
                    loader: "babel-loader"
                },                
                test: /\.js$/,
                exclude: /node_modules/
            },
            {
                use: ["style-loader", "css-loader"],
                test: /\.css$/
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: "saas-loader", 
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
                loader: "url-loader",
                options: {
                    limit: 10000
                }
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: "./src/client/index.html"
        }),
        new LiveReloadPlugin()
    ]
}

I have tried to add to my webpack.config.js file this configuration plugin, but it doesn't work to me :(

module.exports = {
  // other configs
  plugins: [
    new htmlWebpackPlugin({
        template: "./src/client/index.html"
    }),
    new LiveReloadPlugin(),
    new webpack.SourceMapDevToolPlugin({
      exclude: ['popper.js']
    })
  ]
}

I don't know what I am doing wrong. How can I configure my application to avoid this kind of errors?

Edit I:

If I modify my webpack.config.js file adding this entry "new webpack.SourceMapDevToolPlugin()" to the plugins, it doesn't work to me :(

import webpack from "webpack";
import htmlWebpackPlugin from "html-webpack-plugin";
import LiveReloadPlugin from "webpack-livereload-plugin";


export default {
    mode: "development",
    entry: "./src/client/index.js",
    output: {
        path: "/",
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                use: {
                    loader: "babel-loader"
                },                
                test: /\.js$/,
                exclude: /node_modules/
            },
            {
                use: ["style-loader", "css-loader"],
                test: /\.css$/
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: "saas-loader", 
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
                loader: "url-loader",
                options: {
                    limit: 10000
                }
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: "./src/client/index.html"
        }),
        new LiveReloadPlugin(),
        new webpack.SourceMapDevToolPlugin()
    ]
}
José Carlos
  • 2,850
  • 12
  • 59
  • 95

1 Answers1

1

It is a warning, not an error. And it is occurring because the devtools are trying to find the sourcemap files for pooper.js and you have excluded those in your configuration file.

In the config:

new webpack.SourceMapDevToolPlugin({
  exclude: ['popper.js']
})

should be replaced by

new webpack.SourceMapDevToolPlugin()

Also, try adding devtool: 'eval-source-map', in the webpack config file

Saransh Kataria
  • 1,447
  • 12
  • 19