Source-Maps not working with react-hot-loader - reactjs

I'm using react-hot-loader in my react app. I'm using devtool: 'source-maps', but the source-maps don't seem to work. I'm able to view the original source in chrome's dev-tools, but when I get an error, I only see the following:
I've also tried pretty much every other setting for devtool, but I always get this behaviour. What can I do to get source-maps working properly?
Here's my webpack.config.js:
'use strict';
const webpack = require('webpack');
const path = require('path');
const cssModulesLoader =
'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]__[hash:base64:5]';
const cssLoaders = [
// loaders for loading external css
{
test: /\.s[ac]ss$/,
include: path.resolve(__dirname, 'node_modules'),
exclude: path.resolve(__dirname, 'ui'),
loaders: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.css$/,
include: path.resolve(__dirname, 'node_modules'),
exclude: path.resolve(__dirname, 'ui'),
loaders: ['style-loader', 'css-loader']
},
// loaders for custom css
{
test: /\.css$/,
exclude: path.resolve(__dirname, 'node_modules'),
loaders: ['style-loader', cssModulesLoader]
},
{
test: /\.s[ac]ss$/,
exclude: [
path.resolve(__dirname, 'node_modules'),
path.resolve(__dirname, 'ui/src/global.scss')
],
loaders: ['style-loader', cssModulesLoader, 'sass-loader']
},
{
test: /global\.scss$/,
include: path.resolve(__dirname, 'ui/src/global.scss'),
loaders: ['style-loader', 'css-loader', 'sass-loader']
}
];
module.exports = {
devtool: 'source-maps',
entry: {
app: ['babel-polyfill', 'react-hot-loader/patch', './ui/src/index']
},
output: {
path: path.resolve(__dirname, './ui/assets'),
filename: 'bundle.js',
publicPath: 'assets/'
},
module: {
rules: [
{ test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader' },
{ test: /\.json/, loader: 'json-loader' },
...cssLoaders,
{
test: /\.(ttf|eot|woff|svg)/,
include: [path.resolve(__dirname, 'node_modules')],
loader: 'file-loader'
}
]
},
plugins: [
new webpack.ProvidePlugin({
React: 'react'
})
],
devServer: {
historyApiFallback: true,
proxy: {
'/api': {
target: 'http://localhost:48763/',
secure: false
},
'/wsapi': {
target: 'ws://localhost:48763',
ws: true
}
}
}
};

Related

Cant display images on website Webpack React-dom unexpected syntax

error message:
webpack-dev-server
/home/panecitodigital/Desktop/react-course-projects/cse-app/webpack.config.js:35
};
^
my webpack.config.js
It was working fine until i tried to add the file-loader to work with images, every time i try to fix the mistake the cmd tells me i have a new one comes up. A newbie that has tried the solutions that were on the web with no results too. Please help :) will pay foward when im not a newb
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
]
},
{
test : /\.jpg$/,
exclude: /(node_modules)/,
loader : 'file-loader'
}],
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true,
}
};
It looks like you're missing an } after your rules in module. The error is showing up on the last line because it's not expecting the ; it's expecting one more } to close the entire object.
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [
{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test : /\.jpg$/,
exclude: /(node_modules)/,
loader : 'file-loader'
}
]
}, // <---- this is missing
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true,
}
};
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true,
},
module: {
rules:[
{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
]
},
{
test : /\.jpg$/,
exclude: /(node_modules)/,
loader : 'file-loader'
}
]
}
};

Webpack 3.0: How can I exclude node_modules from build?

I tried to add 'target:node' to the webpack.dev.js to exclude node_modules from my bundle file. This results in an error. Now I have 'target:web' but has the node_modules back in. This is my config file for the applicationpart(trying to use DllReferencePlugin):
var path = require("path");
var webpack = require("webpack");
module.exports = {
target:'web',
devServer: {
contentBase: path.join(__dirname, "build"),
compress: true,
port: 9000
},
node: {
fs: 'empty'
},
cache: true,
devtool: "eval", //or cheap-module-eval-source-map
entry: {
app: path.join(__dirname, "client/app", "app.js")
},
output: {
path: path.join(__dirname, "buildf"),
filename: "ha.js",
chunkFilename: "[name].js"
},
plugins: [
//Typically you'd have plenty of other plugins here as well
new webpack.DllReferencePlugin({
context: path.join(__dirname, "client"),
manifest: require("./build/vendor-manifest.json")
}),
],
module: {
loaders: [
{
test: /\.js?$/,
loader: "babel-loader",
include: [
path.join(__dirname, "client") //important for performance!
],
exclude: [
path.resolve(__dirname, "node_modules")
],
query: {
cacheDirectory: true, //important for performance
plugins: ["transform-regenerator"],
presets: ["es2015", "stage-0"]
}
},
{ test: /\.(scss|sass)$/, loader: ['style-loader', 'css-loader', 'sass-loader'] },
{ test: /\.html$/, loader: 'raw-loader' },
{ test: /\.css$/, loader: 'css-loader' }
]
}
};
How can I exclude the node_modules folder from the ha.js (app bundle) build? for the complete code see here
Here an example:
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/, // <---
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
}
]

How to use webpack HotModuleReplacementPlugin to build two html website

I use webpack HotModuleReplacementPlugin to let my website could hot reload when I fix the code.
But I don't know how to build two html page.
I want to build two page "index.html" & "introduction.html"
Now I use these code in my webpack.config.js but it will have a problem, in the Chrome dev tool would show
「Uncaught Error: _registerComponent(...): Target container is not a DOM element.」
How could I solved these problem?
var webpack = require('webpack');
var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
var autoprefixer = require('autoprefixer');
var config = {
entry: {
index: [
'webpack-dev-server/client?http://0.0.0.0:8080',
'webpack/hot/only-dev-server',
path.resolve(__dirname, 'src/index.jsx')
],
introduction: [
'webpack-dev-server/client?http://0.0.0.0:8080',
'webpack/hot/only-dev-server',
path.resolve(__dirname, 'src/introduction.jsx')
],
},
output: {
path: path.resolve(__dirname, 'build'),
publishPath: '/',
filename: 'js/[name].js'
},
module: {
loaders: [
{
test:/\.jsx?$/,
exclude: /node_modules/,
loader: 'react-hot!babel'
},
{
test: /\.sass$/,
execlude: /node_modules/,
loader: 'style!css!postcss!sass'
},{
test: /\.scss$/,
execulde: /node_modules/,
loader: 'style!css!postcss!sass'
},
{
test: /\.css$/,
exclude: /node_modules/,
loader: 'style!css!postcss',
},
{
test: /\.(jpg|png|gif)$/,
exclude: /node_modules/,
loader: 'file?name=images/[name].[ext]'
},
{
test: /\.(woff|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'
}
]
},
postcss: [
autoprefixer({ browsers: ['last 2 versions']})
],
resolve: {
extensions: ['', '.js', '.jsx']
},
exclude: [
/(test)/
],
devServer: {
contenBase: './dist'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new htmlWebpackPlugin({
filename: 'index.html',
template: './src/html/index.html'
}),
new htmlWebpackPlugin({
filename: 'introduction.html',
template: './src/html/introduction.html'
}),
]
}
module.exports = config;

webpack : AngularJS 1.6.1(ES6) and SCSS packaging

Somebody can help me on configuring webpack for following requirements
AngularJS (1.6) ES6 to ES5 converstion
SCSS to CSS compiler
All js to single bundle
All css to single bundle
All folder structure should created with html only ( no js files, since we alrady bundling it )
This is what I have tried so far
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, './app/app.module.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{ test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader'},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&minetype=application/font-woff'
},
{
test: /\.woff2$/,
loader: 'url?limit=10000&minetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&minetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&minetype=image/svg+xml'
}
]
},
plugins: [
//new ExtractTextPlugin("styles.css"),
]
};
Updated webpack conf
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, './app/app.module.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
devtool: 'source-map',
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}, {
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}, {
test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
loader: 'file-loader?name=[name].[ext]&publicPath=../fonts/&outputPath=/assets/fonts/'
},
{ test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader?name=/assets/images/[name].[ext]' },
{
test: /\.(html)$/,
loader: 'file-loader?name=[path][name].[ext]'
},
{
test: /\.(json)$/,
loader: 'file-loader?name=[path][name].[ext]'
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
use: [{
loader: 'css-loader'
}, {
loader: 'sass-loader' // compiles Sass to CSS
}],
fallback: 'style-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin('assets/css/styles.css')
]
};
sample project with webpack configured posted it in my github

Using react-infinite-calendar with css-modules

I'd like to use react-infinite-calendar component for a personal project. It's not picking up the css. I think my webpack configuration is the problem as I'm using react-css-modules.
Could someone show me what I'd need to do to get it working?
My webpack configuration is:
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
module.exports = {
entry: './index.js',
context: path.join(__dirname, 'client'),
devtool: 'source-map',
output: {
path: './dist/client/',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
// https://github.com/gajus/react-css-modules
test: /\.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
}
]
},
resolve: {
extensions: ['', '.js', '.json']
},
plugins: [
new CopyWebpackPlugin([
{from: 'static/index.html'}
])
]
};
My date selector component is:
import React from 'react';
import InfiniteCalendar from 'react-infinite-calendar';
import 'react-infinite-calendar/styles.css'; // only needs to be imported once
import {TODAY} from '../../server/constants/date';
export default class DateSelector extends React.Component {
render() {
return (
<div>
<InfiniteCalendar
width={400}
height={600}
selectedDate={TODAY}
maxDate={TODAY}
/>
</div>
);
}
}
Another option is to exclude react-infinite-calendar from your CSS module loader and include it in the standard CSS loader.
That way you don't have to rename all of your CSS files.
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
exclude: /react-infinite-calendar/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
},
{
test: /\.css$/,
include: /react-infinite-calendar/,
loader: 'style-loader!css-loader',
},
]
I worked around this by having to separate webpack loaders for locally scoped css-modules and globally scoped ones. My webpack configuration is below and so for css modules I've had to name the files so they end with .module.css.
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
module.exports = {
entry: './index.js',
context: path.join(__dirname, 'client'),
devtool: 'source-map',
output: {
path: './dist/client/',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
// https://github.com/gajus/react-css-modules
test: /\.module.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
},
{
test: /^((?!\.module).)*css$/,
loader: 'style-loader!css-loader'
},
]
},
resolve: {
extensions: ['', '.js', '.json']
},
plugins: [
new CopyWebpackPlugin([
{from: 'static/index.html'}
])
]
};

Resources