Source map points always to same line - javascript

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"
}

Related

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?

Javascript es6 class is not defined

After building my project it gives me this error but in the console of chrome it gives me the following error. Could someone help me? I have no idea what causes this. It feels like im using export and class in a wrong way.
Node version: v11.6.0
Npm version: 4.6.1
webpack.config.js
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const autoprefixer = require('autoprefixer');
const webpack = require('webpack');
module.exports = {
entry:
{
widget: ['./src/js/widget/v1/widget.js', './src/sass/widget/widget.scss'],
website: ['./src/sass/website/website.scss', './src/js/website/website.js']
},
output: {
path: path.resolve(__dirname, 'static'),
filename: '[name]/[name].js',
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
enforce: 'pre',
},
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015'],
},
},
{
test: /\.(css|scss)$/,
loaders: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader?minimize!sass-loader'],
}),
},
{
test: /\.(scss)$/,
loader: "sass-loader", // compiles Sass to CSS
options: {
data: "$HOST-URL: '" + "localhost:8000" + "';"
}
},
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml' },
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=application/font-woff' },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=application/font-woff' },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=application/octet-stream' },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' },
],
},
stats: {
colors: true,
},
devtool: 'source-map',
plugins: [
new webpack.DefinePlugin({
HOST_URL: "localhost:8000"
}),
new CopyWebpackPlugin([
{ from: './node_modules/font-awesome/fonts/', to: './assets/fonts/' },
{ from: './src/widget/', to: './widget/' },
{ from: './src/website/', to: './website/' },
]),
new StyleLintPlugin(),
new ExtractTextPlugin({
filename: '[name]/css/[name].css',
allChunks: true,
}),
new UglifyJSPlugin(),
],
};
package.json
{
"name": "name",
"version": "0.0.1",
"main": "index.js",
"author": "author",
"license": "MIT",
"devDependencies": {
"autoprefixer": "^6.7.7",
"babel-core": "^6.26.3",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.4.0",
"babel-preset-es2015": "^6.22.0",
"css-loader": "^0.26.4",
"eslint": "^3.17.1",
"eslint-config-airbnb": "^14.1.0",
"eslint-loader": "^1.6.3",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.10.0",
"file-loader": "^0.10.1",
"http-server": "^0.11.1",
"node-sass": "^4.9.2",
"postcss-loader": "^1.3.3",
"sass-loader": "^6.0.3",
"style-loader": "^0.13.2",
"stylelint-config-standard": "^16.0.0",
"stylelint-webpack-plugin": "^0.7.0",
"uglifyjs-webpack-plugin": "^0.3.0",
"webpack": "^2.7.0",
"webpack-shell-plugin": "^0.5.0"
},
"scripts": {
"babel": "babel --presets es2015 js/main.js -o build/main.bundle.js",
"webpack": "webpack",
"watch": "webpack --watch"
},
"dependencies": {
"bootstrap": "^4.0.0",
"bootstrap-datepicker": "^1.6.4",
"bootstrap-sass": "^3.3.7",
"copy-webpack-plugin": "^4.5.2",
"extract-text-webpack-plugin": "^2.1.0",
"font-awesome": "^4.7.0",
"formdata-polyfill": "^3.0.9",
"jquery": "^3.2.1",
"popper.js": "^1.12.9"
}
}
widget.js
import Video from './video';
import Overlay from './overlay';
class Widget {
...
}
export {Widget as default}
window.Widget = Widget;
Video and Overlay are also classes and exported the same way as the Widget class. Before this, it was declares as
export default class Widget{}
The code where I am trying to access Widget is in the index.html, where I create a new Widget inside the script tag.
index.html
<script type="text/javascript">
var widget = new Widget({
});
widget.render();
</script>

Vue not running in FireFox

Version
2.5.11
Reproduction link
https://jsfiddle.net/ranjs/eh10wju7/
Steps to reproduce:
In Google Chrome this works fine but in Firefox I get the error:
'TypeError: undefined is not a constructor[Learn More]
and nothing is displayed on the screen.
[Show/hide message details.] TypeError: undefined is not a constructor[Learn More] build.js:1:182494
<anonymous>
http://localhost:25555/static/dist/build.js:1:182494
<anonymous>
http://localhost:25555/static/dist/build.js:1:181955
r
http://localhost:25555/static/dist/build.js:1:96
<anonymous>
http://localhost:25555/static/dist/build.js:1:4377
r
http://localhost:25555/static/dist/build.js:1:96
<anonymous>
http://localhost:25555/static/dist/build.js:1:247068
r
http://localhost:25555/static/dist/build.js:1:96
<anonymous>
http://localhost:25555/static/dist/build.js:1:457
<anonymous>
http://localhost:25555/static/dist/build.js:1:2
What is expected?
App shows normaly
What is actually happening? Getting the error and nothing is displayed.
I upload my main.js and this is my package.json:
'{
"name": "chatbotmariana",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "Ranieri Abreu Silva Junior <rabreu#indracompany.com>",
"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",
"prod": "cross-env NODE_ENV=development webpack-dev-server --port 80 --hot --host 0.0.0.0"
},
"dependencies": {
"axios": "^0.18.0",
"compression": "^1.7.3",
"express-minify": "^1.0.0",
"jquery": "^3.3.1",
"popper.js": "^1.14.4",
"vue": "^2.5.17",
"vue-resource": "^1.5.1",
"vue-router": "^3.0.1"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"vue-loader": "^13.7.3",
"vue-template-compiler": "^2.5.17",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.11.3"
}
}
I'm using JavaScript and I dont have tsconfig.
.bablrc :
{
"presets": [
["env", { "modules": false }],
"stage-3"
]
}
webpack.config.js
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
loaders: [
{
test: /\.css$/,
loader: 'style!css'
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/octet-stream"
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file"
},{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=image/svg+xml"
}
],
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]'
}
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ] // <= Order is very important
}
]
},
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.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
i found.
const SpeechRecognition =
window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.lang = "pt-BR";
recognition.interimResults = false;
recognition.maxAlternatives = 1;
This code don't works in firefox

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

SCSS files not compiling to CSS in react using Webpack

Following is my folder structure & Files for React project which is working fine but I am unable to add CSS through SCSS via Webpack using extract-text-webpack-plugin. Let me know what I am doing wrong with the configuration.
Folder Structure -
Webpack.config.js File -
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './app/index.html',
filename: 'index.html',
inject: 'body'
});
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ExtractTextPluginConfig = new ExtractTextPlugin('main.css',{
allChunks: true
});
module.exports = {
entry: './app/app.jsx',
output: {
path: path.resolve('dist'),
filename: 'bundle.js'
},
devtool: 'source-map',
module: {
loaders: [
{test: /.js$/, loader: 'babel-loader', exclude: /node_modules/},
{test: /.jsx$/, loader: 'babel-loader', exclude: /node_modules/},
{test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")}
]
},
plugins: [HtmlWebpackPluginConfig, ExtractTextPluginConfig]
};
Package.json -
{
"name": "reactyarn",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --hot"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.4",
"extract-text-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^2.29.0",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^3.3.0",
"webpack-dev-server": "^2.5.1"
},
"dependencies": {
"path": "^0.12.7",
"react": "^15.6.1",
"react-dom": "^15.6.1"
}
}
FYI -
I am not getting any JS error in console, so I believe its only the configuration which is not working.
You appear to be missing one of the loaders (sass-loader) and setting them up in your modules incorrectly.
Try the example below:
module.exports = {
entry: './app/app.jsx',
output: {
path: path.resolve('dist'),
filename: 'bundle.js'
},
devtool: 'source-map',
module: {
loaders: [
{test: /.js$/, loader: 'babel-loader', exclude: /node_modules/},
{test: /.jsx$/, loader: 'babel-loader', exclude: /node_modules/},
{test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'] // <-- this is new
]
},
sassLoader: {
includePaths: [path.resolve(__dirname, 'relative/path/to/scss')]
}, // <--- this is new
plugins: [HtmlWebpackPluginConfig, ExtractTextPluginConfig]
};
By using ExtractPlugin.extract you're referencing the means to do this in Webpack 2 (using rules and use) but your Webpack config file appears to be geared toward Webpack 1.

Categories

Resources