Как избежать сообщения «TypeError: popper.js.map не является действительным URL» - PullRequest
0 голосов
/ 19 февраля 2019

Я новичок в NodeJS, React и Webpack.Я установил загрузчик, который нуждается в popper.js.Когда я запускаю свое приложение, все работает нормально, но у меня появляется ошибка в консоли Firefox, например:

enter image description here

Пакет файлов.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"
  }
}

Файл 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()
    ]
}

Я попытался добавить в свой файл webpack.config.js этот плагин конфигурации, но это не работает для меня: (

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

Я не знаю, что я делаю неправильно. Как я могу настроить свое приложение, чтобы избежать ошибок такого рода?

Редактировать I:

Если я изменю свой файл webpack.config.js, добавив эту запись "new webpack.SourceMapDevToolPlugin ()" в плагины, она не будет работать для меня: (

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()
    ]
}

1 Ответ

0 голосов
/ 19 февраля 2019

Это предупреждение, а не ошибка.И это происходит потому, что devtools пытаются найти файлы исходных карт для pooper.js, а вы исключили их в своем файле конфигурации.

В конфигурации:

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

следует заменить

new webpack.SourceMapDevToolPlugin()

Также попробуйте добавить devtool: 'eval-source-map', в файл конфигурации веб-пакета

...