Develop Reference

Uncaught TypeError: Cannot read properties of undefined (reading 'locals')

I am developing a google chrome extension, today when I tried to run the google chrome extension, shows error like this in popup.js:
popup.js:21888 Uncaught TypeError: Cannot read properties of undefined (reading 'locals')
at Object../node_modules/element-ui/lib/theme-chalk/message.css (popup.js:21888:12)
at __webpack_require__ (popup.js:20:30)
at Module../src/js/popup/index.js (popup.js:38789:96)
at __webpack_require__ (popup.js:20:30)
at popup.js:84:18
at popup.js:87:10
the npm build was success, but failed in the runtime, I have no idea where is going wrong. this is my package.json:
{
"name": "cruise-radar",
"version": "0.0.1",
"description": "Browser extension to detect available RSS and RSSHub for current page",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack -w --mode=development --progress --display-error-details --colors",
"build": "webpack --mode=development --progress --display-error-details --colors",
"release": "npm run build && zip -r release/radar.zip dist",
"format": "eslint \"**/*.js\" --fix && prettier \"**/*.{js,scss,less}\" --write",
"format:staged": "eslint \"**/*.js\" --fix && pretty-quick --staged --verbose --pattern \"**/*.{js,scss,less}\"",
"format:check": "eslint \"**/*.js\" && prettier-check \"**/*.{js,scss,less}\""
},
"repository": {
"type": "git",
"url": "git+https://github.com/jiangxiaoqiang/Cruise-Radar.git"
},
"keywords": [
"rsshub",
"rss"
],
"gitHooks": {
"pre-commit": "npm run format:staged"
},
"author": "DIYgod",
"license": "MIT",
"bugs": {
"url": "https://github.com/DIYgod/RSSHub-Radar/issues"
},
"homepage": "https://github.com/DIYgod/RSSHub-Radar#readme",
"devDependencies": {
"#babel/core": "7.12.3",
"#babel/plugin-transform-runtime": "^7.17.0",
"#babel/preset-env": "7.12.1",
"#fingerprintjs/fingerprintjs": "3.1.2",
"autoprefixer": "9.8.6",
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"babel-plugin-component": "1.1.1",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"copy-webpack-plugin": "6.3.0",
"css-loader": "5.0.1",
"cssnano": "4.1.10",
"eslint": "7.13.0",
"eslint-config-prettier": "6.15.0",
"eslint-loader": "4.0.2",
"eslint-plugin-prettier": "3.1.4",
"file-loader": "6.2.0",
"js-wheel": "jiangxiaoqiang/js-wheel",
"less": "3.12.2",
"less-loader": "7.0.2",
"mini-css-extract-plugin": "1.3.0",
"postcss-loader": "3.0.0",
"prettier": "2.1.2",
"prettier-check": "2.0.0",
"pretty-quick": "3.1.0",
"sass-loader": "^10",
"svg-inline-loader": "0.8.2",
"template-string-optimize-loader": "3.0.0",
"url-loader": "4.1.1",
"vue": "2.6.12",
"vue-loader": "15.9.5",
"vue-template-compiler": "2.6.12",
"webpack": "4.44.2",
"webpack-cli": "3.3.12",
"yorkie": "2.0.0"
},
"dependencies": {
"#babel/runtime": "^7.17.2",
"clipboard": "2.0.6",
"core-js": "^3.21.1",
"element-ui": "2.14.0",
"md5.js": "^1.3.5",
"psl": "1.8.0",
"regenerator-runtime": "^0.13.9",
"route-recognizer": "0.3.4",
"rss-parser": "3.9.0",
"sass": "^1.44.0",
"vue-router": "3.4.9",
"yarn": "^1.22.17"
}
}
and this is the project webpack config:
const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
mode: 'production',
bail: true,
devtool: false,
performance: {
maxEntrypointSize: 1000000,
},
entry: {
'popup': './src/js/popup/index.js',
'content': './src/js/content/index.js',
'background': './src/js/background/index.js',
'options': './src/js/options/index.js',
'sandbox': './src/js/sandbox/index.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
publicPath: '/',
},
resolve: {
modules: ['node_modules'],
extensions: ['.js', '.less'],
},
module: {
strictExportPresence: true,
rules: [
{
test: /\.js$/,
enforce: 'pre',
loader: 'eslint-loader',
include: path.resolve(__dirname, '../src/js'),
},
{
test: /\.js$/,
use: [
'template-string-optimize-loader',
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: ['#babel/preset-env'],
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
},
],
],
}
}
]
},
{
test: /\.css$/,
use: [
'vue-style-loader',
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 2,
},
},
{
loader: 'postcss-loader',
options: {
config: {
path: path.join(__dirname, 'postcss.config.js')
}
}
},
],
},
{
test: /\.less$/,
use: [
'vue-style-loader',
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 2,
},
},
{
loader: 'postcss-loader',
options: {
config: {
path: path.join(__dirname, 'postcss.config.js')
}
}
},
'less-loader'
],
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 2,
},
},
{
loader: 'postcss-loader',
options: {
config: {
path: path.join(__dirname, 'postcss.config.js')
}
}
},
'sass-loader'
],
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader',
options: {
'limit': 40000
}
},
{
test: /\.svg$/,
loader: 'svg-inline-loader'
},
{
test: /\.(ttf|woff)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css'
}),
new CopyPlugin({
patterns: [
{
from: 'src/assets',
to: '',
},
],
}),
new VueLoaderPlugin(),
new webpack.DefinePlugin({
VERSION: JSON.stringify(require('./src/assets/manifest.json').version)
}),
],
node: {
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
},
};
what should I do to fix this problem? I tried to debbuging with breakpoint, but it did not going into the breakpoint when I using the extension, only show this error when I open the popup page(did not trigger the error again). If I tried to reproduce the error, I have to close the popup window and reopen it.
For hours search and tried to debugging, finally from the error message I guess that my mac book pro system language was en, but the element-ui did not support the en right now(the other computer language set zh works fine). I just did not know how to make the element-ui support the en in the google chrome extension popup page, I only using the Message from element ui like this in the popup.js:
import { Message } from 'element-ui';
and there is no Vue or other framework that could let me set the multi language support, there is only one js file in the context, what should I do to fix it?

VueJS - “npm run build” does not generate index.html file in dist folder

I have developed a VueJS project. After I run the command
npm run build
a dist folder containing a build.js file, build.js.map and images, get generated.
But there is no index.html file in /dist.
My project structure looks like this
And my webpack.config.js looks like this
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map',
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
Here is my package.json
"name": "jitsi-demo",
"description": "This is demo Jitsi Project",
"version": "1.0.0",
"author": "---",
"license": "MIT",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"ajax": "0.0.4",
"jquery": "^3.5.0",
"vue": "^2.5.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"copy-webpack-plugin": "^5.1.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"html-webpack-plugin": "^4.2.0",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
I have tried using CopyWebpackPlugin and HtmlWebpackPlugin after using I get another error
^
ReferenceError: HtmlWebpackPlugin is not defined```

Postcss-loader not minifying css output

I'm using webpack and postcss-loader to autoprefix and minify my CSS, before loading it into css-loader to use css-modules. I'm having trouble with minifying CSS. Examining the emitted .js file by webpack shows the CSS isn't minified with cssnano (because I can still see whitespace characters). What am I doing wrong?
Some relevant configuration files:
webpack.config.js:
const path = require('path');
const webpack = require('webpack');
var postCompileScript = require('./postCompile');
module.exports = {
entry: './src/popup.js',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]__[hash:base64:6]',
importLoaders: 1,
minimize: true
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('autoprefixer')({})
],
minimize: true
}
}
]
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
},
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
mode: 'production',
resolve: {
alias: {
"react": "preact-compat",
"react-dom": "preact-compat"
},
extensions: ['.js', '.jsx']
}
};
postcss.config.js:
module.exports = {
parser: 'sugarss',
plugins: {
'postcss-import': {},
'postcss-preset-env': {},
'cssnano': {}
}
}
package.json
{
"name": "REDACTED",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config ./webpack.config.js",
"deploy": "node ftp"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.1.2",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^1.0.0",
"cssnano": "^4.1.0",
"ftp": "^0.3.10",
"post-compile-webpack-plugin": "^0.1.2",
"postcss-loader": "^3.0.0",
"prepend-file": "^1.3.1",
"style-loader": "^0.22.1",
"uglifyjs-webpack-plugin": "^1.3.0",
"url-loader": "^1.1.1",
"webpack": "^4.16.5",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^3.1.0"
},
"dependencies": {
"iframe-resizer": "^3.6.1",
"js-cookie": "^2.2.0",
"npm": "^6.4.0",
"preact": "^8.3.1",
"preact-compat": "^3.18.3",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-iframe-resizer-super": "^0.2.0"
}
}
Thanks in advance.

For any future readers: I solved my problem by just adding the cssnano plugin to the postcss-loader in the config. Thus the css rule is as follows (webpack.config.js):
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]__[hash:base64:6]',
importLoaders: 1,
minimize: true
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('autoprefixer')({}),
require('cssnano')({ preset: 'default' })
],
minimize: true
}
}
]
}

eslint loader (for webpack 2) - You may need an appropriate loader to handle this file type

I'm using eslint-loader (for webpack 2) in my application, and I have this error:
./src/index.js
Module parse failed: /home/brenopolanski/github/saiku/srep-ui/saiku-report-viewer-ui/node_modules/eslint-loader/index.js!/home/brenopolanski/github/saiku/srep-ui/saiku-report-viewer-ui/src/index.js Unexpected token (28:4)
You may need an appropriate loader to handle this file type.
| const renderApp = (NewRoot) => {
| render(
| <AppContainer>
| <NewRoot />
| </AppContainer>,
# multi react-hot-loader/patch webpack-dev-server/client?http://localhost:3000 webpack/hot/only-dev-server ./src/index
well... if I remove the eslint-loader in my webpack, my application work correctly, but I need the eslint-loader working in my webpack.
package.json
{
"scripts": {
"start": "webpack-dashboard -- node server.js",
"build": "npm run clean && npm run build:webpack",
"build:webpack": "cross-env NODE_ENV=production webpack --progress --config ./config/webpack.prod -p",
"test": "jest --coverage",
"test:watch": "npm run test -- --watch",
"storybook": "start-storybook -p 6006 -c storybook",
"build-storybook": "build-storybook -c storybook",
"clean": "rimraf build"
},
"devDependencies": {
"#kadira/storybook": "^2.35.3",
"autoprefixer": "^6.7.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-jest": "^18.0.0",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"babel-preset-stage-0": "^6.22.0",
"chai": "^3.5.0",
"cross-env": "^3.1.4",
"css-loader": "^0.26.1",
"deepmerge": "^1.3.2",
"eslint": "^3.15.0",
"eslint-loader": "^1.6.1",
"eslint-plugin-flowtype": "^2.30.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-mocha": "^4.8.0",
"eslint-plugin-react": "^6.9.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.10.0",
"html-webpack-plugin": "^2.28.0",
"jest-cli": "^18.1.0",
"json-loader": "^0.5.4",
"postcss-loader": "^1.2.2",
"react-hot-loader": "^3.0.0-beta.6",
"rimraf": "^2.5.4",
"style-loader": "^0.13.1",
"stylus": "^0.54.5",
"stylus-loader": "^2.4.0",
"svg-url-loader": "^2.0.1",
"url-loader": "^0.5.7",
"webpack": "^2.2.1",
"webpack-dashboard": "^0.3.0",
"webpack-dev-server": "^2.3.0",
"webpack-merge": "^2.6.1"
},
"dependencies": {
"axios": "^0.15.3",
"bootstrap": "^3.3.7",
"classnames": "^2.2.5",
"font-awesome": "^4.7.0",
"moment": "^2.17.1",
"pdfjs-dist": "^1.7.246",
"react": "^15.4.2",
"react-bootstrap": "^0.30.7",
"react-datepicker": "^0.40.0",
"react-dom": "^15.4.2",
"react-pdfjs": "^1.0.7",
"react-prop-types": "^0.4.0",
"react-redux": "^5.0.2",
"react-router": "^3.0.2",
"react-router-bootstrap": "^0.23.1",
"react-router-redux": "^4.0.7",
"redux": "^3.6.0"
}
}
.babelrc
{
"presets": ["es2015", "stage-0", "react"],
"plugins": ["react-hot-loader/babel"]
}
webpack.core.js
'use strict';
const webpack = require('webpack');
const HtmlPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
const path = require('path');
module.exports = {
output: {
path: path.join(__dirname, '../build'),
filename: '[name]-[hash].js'
},
plugins: [
new HtmlPlugin({
title: 'Saiku Report Viewer',
template: path.join(__dirname, '../src', 'html', 'template.html')
}),
new webpack.LoaderOptionsPlugin({
options: {
eslint: {
configFile: path.join(__dirname, './eslint.core.js'),
useEslintrc: false
},
postcss: () => {
return [autoprefixer];
}
}
})
],
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
include: /src/,
loader: 'eslint-loader'
}
],
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
include: /src/,
loader: 'babel-loader'
},
{
test: /\.styl$/,
loaders: [
'style-loader',
'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
'postcss-loader',
'stylus-loader'
]
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
query: {
limit: 10000,
mimetype: 'application/font-woff'
}
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
query: {
limit: '10000',
mimetype: 'application/octet-stream'
}
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'svg-url-loader',
query: {
limit: '10000',
mimetype: 'application/svg+xml'
}
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader',
query: {
limit: 8192
}
},
{
test: /\.ico(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader'
}
]
},
node: {
dns: 'empty',
net: 'empty',
tls: 'empty'
},
resolve: {
alias: {
src: path.join(__dirname, '../src'),
components: path.join(__dirname, '../src', 'components')
}
}
};
webpack.dev.js
'use strict';
const webpack = require('webpack');
const HtmlPlugin = require('html-webpack-plugin');
const DashboardPlugin = require('webpack-dashboard/plugin');
const path = require('path');
const merge = require('webpack-merge');
const core = require('./webpack.core');
module.exports = merge.smart(core, {
devtool: 'source-map',
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
path.join(__dirname, '../src', 'index')
],
output: {
publicPath: ''
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new DashboardPlugin(),
new webpack.LoaderOptionsPlugin({
options: {
eslint: {
configFile: path.join(__dirname, './eslint.dev.js')
}
}
})
],
module: {
loaders: [
{
test: /\.css$/,
include: /(node_modules|bower_components|src)/,
loaders: [
'style-loader',
'css-loader'
]
}
]
}
});
src/index.js
import React from 'react';
import { render } from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import Root from './containers/Root';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.min.css';
import './styl/saiku.styl';
const renderApp = (NewRoot) => {
render(
<AppContainer>
<NewRoot />
</AppContainer>,
document.querySelector('[data-js="app"]')
);
};
renderApp(Root);
if (module.hot) {
module.hot.accept('./containers/Root', () => {
const NewRoot = require('./containers/Root').default;
renderApp(NewRoot);
});
}

In your webpack.core.js you define both module.rules and module.loaders. Although the module.loaders is still valid, for compatibility reasons, Webpack seems to ignore it when module.rules is present.
To solve your problem you can simply put all loaders in module.rules. Since you're merging the two configs, you also have to update webpack.dev.js to use module.rules, which is also recommend by the official docs: https://webpack.js.org/guides/migrating/#module-loaders-is-now-module-rules.
webpack.core.js
'use strict';
const webpack = require('webpack');
const HtmlPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
const path = require('path');
module.exports = {
output: {
path: path.join(__dirname, '../build'),
filename: '[name]-[hash].js'
},
plugins: [
new HtmlPlugin({
title: 'Saiku Report Viewer',
template: path.join(__dirname, './src', 'html', 'template.html')
}),
new webpack.LoaderOptionsPlugin({
options: {
eslint: {
configFile: path.join(__dirname, './eslint.core.js'),
useEslintrc: false
},
postcss: () => {
return [autoprefixer];
}
}
})
],
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
include: /src/,
loader: 'eslint-loader'
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
include: /src/,
loader: 'babel-loader'
},
{
test: /\.styl$/,
loaders: [
'style-loader',
'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
'postcss-loader',
'stylus-loader'
]
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
query: {
limit: 10000,
mimetype: 'application/font-woff'
}
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
query: {
limit: '10000',
mimetype: 'application/octet-stream'
}
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'svg-url-loader',
query: {
limit: '10000',
mimetype: 'application/svg+xml'
}
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader',
query: {
limit: 8192
}
},
{
test: /\.ico(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader'
}
]
},
node: {
dns: 'empty',
net: 'empty',
tls: 'empty'
},
resolve: {
alias: {
src: path.join(__dirname, './src'),
components: path.join(__dirname, './src', 'components')
}
}
};
webpack.dev.js
'use strict';
const webpack = require('webpack');
const HtmlPlugin = require('html-webpack-plugin');
const DashboardPlugin = require('webpack-dashboard/plugin');
const path = require('path');
const merge = require('webpack-merge');
const core = require('./webpack.core');
module.exports = merge.smart(core, {
devtool: 'source-map',
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
path.join(__dirname, './src', 'index')
],
output: {
publicPath: ''
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new DashboardPlugin(),
new webpack.LoaderOptionsPlugin({
options: {
eslint: {
configFile: path.join(__dirname, './eslint.dev.js')
}
}
})
],
module: {
rules: [
{
test: /\.css$/,
include: /(node_modules|bower_components|src)/,
use: [
'style-loader',
'css-loader'
]
}
]
}
});

Source map points always to same line

I've just noticed that when I inspect any element in Chrome or Firefox dev tools the attributes assigned to that element always point to same line, which is either the end of the source file (when I open static index.html) or, if I run my app by webpack-dev-server, beginning of the file.
My webpack.config.js:
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: 'source-map',
module: {
loaders: [
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000'
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
loader: ['css-loader?sourceMap', 'postcss-loader', 'sass-loader?sourceMap']
})
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
loader: ['css-loader?sourceMap']
})
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
},
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./app/static/js/app.js'
],
output: {
filename: './app/dist/js/bundle.js',
//publicPath: './', // adding back will break webpack-dev-server!
},
watch: false,
plugins: [
new ExtractTextPlugin('./app/dist/css/main.css'),
new webpack.HotModuleReplacementPlugin()
],
devServer: {
host: 'localhost',
//hot: true, // adding back will break webpack-dev-server!
port: 8080,
inline: true,
stats: '_errors-only',
contentBase: './'
}
};
My package.json:
{
"name": "new-admin",
"version": "1.0.0",
"description": "",
"main": "0.44132ff81411f73136a6.hot-update.js",
"dependencies": {
"autoprefixer": "^6.5.3",
"bootstrap-loader": "^2.0.0-beta.15",
"bootstrap": "^3.3.7",
"css-loader": "^0.26.0",
"file-loader": "^0.9.0",
"jquery": "^3.1.1",
"postcss": "^5.2.5",
"postcss-loader": "^1.1.1",
"sass-loader": "^4.0.2",
"url-loader": "^0.5.7",
"webpack-dev-server": "^1.16.2",
"webpack-uglify-js-plugin": "^1.1.9"
},
"devDependencies": {
"postcss-load-config": "^1.0.0",
"postcss-loader": "^1.1.1"
},
"scripts": {},
"author": "",
"license": "ISC"
}