Develop Reference

Unable to set up hot module reload HMR for Symfony Webpack

I am currently using manual reloads with npx webpack which are time consuming.
So, attempting to implement HMR using Webpack docs and this tutorial
It does not throw any errors when I run npm start, tells me that files were generated but the files are not available in the destination directory /dist. If they are placed somewhere else, I could not find.
Also, the HMR as such seems to be working in the sense that it automatically recompiles once changes are made to the app files.
It automatically opens localhost:8080 as well, but shows only the directory list or a message like CANNOT GET.
By the way, I do not use Symfony Encore.
The directory looks like this:
- bin
- client // where the React files are
- config // Symfony
- node_modules
- public
- dist // here goes Webpack's output ( normally )
- index.php
- src // Symfony app files
- templates - Twig
- var
- vendor
webpack.config.js
The above webpack.config.js looks like below, in the latest config attempt
const webpack = require('webpack');
const { InjectManifest } = require('workbox-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const path = require('path');
const useDevServer = true;
const publicPath = useDevServer ? 'http://localhost:8080/public/dist/' : '/dist/';
console.log('path', path.resolve(__dirname, 'public/dist'));
console.log('public path', publicPath);
module.exports = {
mode: 'development',
entry: './client/index.js',
output: {
path: path.resolve(__dirname, 'public/dist'),
filename: '[name].[hash].js',
publicPath,
},
devtool: 'inline-source-map',
module: {
....
},
devServer: {
// contentBase: './dist',
hot: true,
allowedHosts: [
'http://127.0.0.1:8000',
'http://127.0.0.1:8001',
'http://localhost:8000',
'http://localhost:8001',
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
...

Webpack dev server not recompiling when files change

I have a project that's broken into 3 parts: a server and two webpack bundled web clients (App and Admin). The two web clients use basically the same webpack config with slight changes for setting output directories and dev server ports. Each client has its own package.json with a watch script that just runs webpack-dev-server.
The watch script on both clients succeed: the app builds and is accessible in a web browser. However, one of the clients (the Admin site) doesn't ever rebuild when changes are made, and seems to be constantly using an old build (webpack-dev-server hosts an old build even after restarting). The other client rebuilds fine.
What is happening here? They're configured almost exactly the same, they use the same plugins/loaders/etc, they're using similar libraries (React, mobx, etc).
Here's the base webpack config:
const webpack = require('webpack');
const path = require('path');
const { merge } = require('lodash');
const loaderUtils = require('loader-utils');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const env = process.env['NODE_ENV'];
const clientsRootDir = __dirname;
const defaultConfig = {
buildDir: 'dist',
entry: 'src/entry.js',
server: 'http://localhost:8000',
devServerPort: 8080,
constants: {
NODE_ENV: env,
PRODUCTION: env === 'production',
DEVELOPMENT: env === 'development',
DEBUG: env === 'development',
TEST: env === 'test',
LOG_LEVEL: env === 'production' ? 'error' : 'debug'
},
globalModules: {
React: 'react',
log: 'shared/log',
},
};
module.exports = (config) => {
config = merge({}, defaultConfig, config);
const { rootDir } = config;
const local = file => path.resolve(rootDir, file);
return {
devtool: 'eval-source-map',
entry: local(config.entry),
output: {
path: local(config.buildDir),
filename: 'bundle.js',
},
resolve: {
modules: [
'node_modules',
local('src'),
path.join(clientsRootDir, 'Shared')
],
},
module: {
rules: [
{test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
{test: /\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$/, use: [
{loader: 'file-loader'},
]},
{
test: /\.s?css$/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{loader: 'css-loader', options: {
modules: true,
importLoaders: 1,
localIdentName: '[path]_[local]',
}},
{loader: 'sass-loader'},
{loader: 'postcss-loader'},
],
}),
},
],
},
plugins: [
new ExtractTextPlugin('style.css', { allChunks: true }),
new webpack.ProvidePlugin(config.globalModules),
new webpack.DefinePlugin(config.constants),
new HtmlWebpackPlugin({
hash: true,
filename: 'index.html',
template: './src/index.html',
}),
],
devServer: {
port: config.devServerPort,
proxy: {
'/api': config.server
},
},
};
};
The working App webpack.config.js:
module.exports = require('../webpack.base.config')(Object.assign(
{rootDir: __dirname},
require('./config'),
));
And the app config:
module.exports = {
appId: 'com.company.app',
server: 'http://localhost:8000',
buildDir: 'www',
devServerPort: 8080,
};
The broken Admin webpack.config.js:
module.exports = require('../webpack.base.config')(Object.assign(
{rootDir: __dirname},
require('./config'),
));
And the admin config:
module.exports = {
appId: 'com.company.app_admin',
server: 'http://localhost:8000',
buildDir: '../../Server/public/admin',
devServerPort: 8081,
};

It ended up being some kind of folder renaming issue. I had moved the entire project and re-cloned while I had an iterm session open in the Admin folder. Either iterm or zshell got confused because pwd showed the correct path, but the branch zshell was displaying was incorrect. Running cd . corrected the branch zshell was displaying, and the watch script works fine now.
So the real issue was I was running watch in the wrong project even though my shell was telling me I was in the right project.

I had the same issue and SimpleJ's answer seems to have given me the hint I needed. I had a file SomeFolder/someFile.js, but it was being imported as ../somefolder/somefile (all lowercase).
Changing the capitalization in the import statement to match that of the actual folder and file seems to have remedied the issue.

Webpack DllPlugin with gulp: Cannot find module '... vendor-manifest.json'

I have a rather large React application built with webpack 2. The application is embedded into a Drupal site as a SPA within the existing site. The Drupal site has a complex gulp build setup and I can't replicate it with webpack, so I decided to keep it.
I have split my React application into multiple parts using the DllPlugin / DllReferencePlugin combo which is shipped out of the box in webpack 2. This works great, and I get a nice vendor-bundle when building with webpack.
The problem is when I try to run my webpack configuration in gulp, I get an error. I might be doing it wrong, as I have not been able to find much documentation on this approach, but nevertheless, it's not working for me.
It looks like it's trying to include the the manifest file from my vendor-bundle before creating it.
Whenever I run one of my defined gulp tasks, like gulp react-vendor I get an error, saying that it cannot resolve the vendor-manifest.json file.
If I on other hand run webpack --config=webpack.dll.js in my terminal, webpack compiles just fine and with no errors.
I have included what I think is the relevant files. Any help on this is appreciated.
webpack.config.js
// Use node.js built-in path module to avoid path issues across platforms.
const path = require('path');
const webpack = require('webpack');
// Set environment variable.
const production = process.env.NODE_ENV === "production";
const appSource = path.join(__dirname, 'react/src/');
const buildPath = path.join(__dirname, 'react/build/');
const ReactConfig = {
entry: [
'./react/src/index.jsx'
],
output: {
path: buildPath,
publicPath: buildPath,
filename: 'app.js'
},
module: {
rules: [
{
exclude: /(node_modules)/,
use: {
loader: "babel-loader?cacheDirectory=true",
options: {
presets: ["react", "es2015", "stage-0"]
},
},
},
],
},
resolve: {
modules: [
path.join(__dirname, 'node_modules'),
'./react/src/'
],
extensions: ['.js', '.jsx', '.es6'],
},
context: __dirname,
devServer: {
historyApiFallback: true,
contentBase: appSource
},
// TODO: Split plugins based on prod and dev builds.
plugins: [
new webpack.DllReferencePlugin({
context: path.join(__dirname, "react", "src"),
manifest: require(path.join(__dirname, "react", "vendors", "vendor-manifest.json"))
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
filename: 'webpack-loader.js'
}),
]
};
// Add environment specific configuration.
if (production) {
ReactConfig.plugins.push(
new webpack.optimize.UglifyJsPlugin()
);
}
module.exports = [ReactConfig];
webpack.dll.js
const path = require("path");
const webpack = require("webpack");
const production = process.env.NODE_ENV === "production";
const DllConfig = {
entry: {
vendor: [path.join(__dirname, "react", "vendors", "vendors.js")]
},
output: {
path: path.join(__dirname, "react", "vendors"),
filename: "dll.[name].js",
library: "[name]"
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, "react", "vendors", "[name]-manifest.json"),
name: "[name]",
context: path.resolve(__dirname, "react", "src")
}),
// Resolve warning message related to the 'fetch' node_module.
new webpack.IgnorePlugin(/\/iconv-loader$/),
],
resolve: {
modules: [
path.join(__dirname, 'node_modules'),
],
extensions: ['.js', '.jsx', '.es6'],
},
// Added to resolve a dependency issue in this build #https://github.com/hapijs/joi/issues/665
node: {
net: 'empty',
tls: 'empty',
dns: 'empty'
}
};
if (production) {
DllConfig.plugins.push(
new webpack.optimize.UglifyJsPlugin()
);
}
module.exports = [DllConfig];
vendors.js (to determine what to add to the Dll)
require("react");
require("react-bootstrap");
require("react-dom");
require("react-redux");
require("react-router-dom");
require("redux");
require("redux-form");
require("redux-promise");
require("redux-thunk");
require("classnames");
require("whatwg-fetch");
require("fetch");
require("prop-types");
require("url");
require("validator");
gulpfile.js
'use strict';
const gulp = require('gulp');
const webpack = require ('webpack');
const reactConfig = require('./webpack.config.js');
const vendorConfig = require('./webpack.dll.js');
// React webpack source build.
gulp.task('react-src', function (callback) {
webpack(reactConfig, function (err, stats) {
callback();
})
});
// React webpack vendor build.
gulp.task('react-vendor', function (callback) {
webpack(vendorConfig, function (err, stats) {
callback();
})
});
// Full webpack react build.
gulp.task('react-full', ['react-vendor', 'react-src']);
NOTE:
If I build my vendor-bundle with the terminal with webpack --config=webpack.dll.js first and it creates the vendor-manifest.json file, I can then subsequently successfully run my gulp tasks with no issues.
This is not very helpful though, as this still will not allow me to use webpack with gulp, as I intend to clean the build before new builds run.

I ended up using the solution mentioned in the end of my question. I build my DLL file first and then I can successfully run my gulp webpack tasks.
One change that can make it easier to debug the issue, is to use the Gulp utility module (gulp-util) to show any webpack errors that might show up during build of webpack, using gulp.
My final gulp setup ended up looking like this:
gulpfile.js
'use strict';
const gulp = require('gulp');
const gutil = require('gulp-util');
const webpack = require('webpack');
const reactConfig = require('./webpack.config.js');
const vendorConfig = require('./webpack.dll.js');
// React webpack source build.
gulp.task('react', function (callback) {
webpack(reactConfig, function (err, stats) {
if (err) {
throw new gutil.PluginError('webpack', err);
}
else {
gutil.log('[webpack]', stats.toString());
}
callback();
});
});
// React webpack vendor build.
gulp.task('react-vendor', function (callback) {
webpack(vendorConfig, function (err, stats) {
if (err) {
throw new gutil.PluginError('webpack', err);
}
else {
gutil.log('[webpack]', stats.toString());
}
callback();
});
});
// React: Rebuilds both source and vendor in the right order.
gulp.task('react-full', ['react-vendor'], function () {
gulp.start('react');
});
I hope this might help someone in a similar situation.

Whenever I run one of my defined gulp tasks, like gulp react-vendor I get an error, saying that it cannot resolve the vendor-manifest.json file.
Your gulpfile.js contains this:
const reactConfig = require('./webpack.config.js');
const vendorConfig = require('./webpack.dll.js');
And webpack.config.js contains this:
new webpack.DllReferencePlugin({
context: path.join(__dirname, "react", "src"),
manifest: require(path.join(__dirname, "react", "vendors", "vendor-manifest.json"))
}),
The require() calls are currently all executed immediately. Whenever you run Gulp, it will evaluate both Webpack configuration files. As currently configured, Node runs the code in webpack.config.js at startup, and from there it sees the require() used in your creation of the DllReferencePlugin, so it will also try to read manifest.json at that time and turn it into an object...which is before it has been built.
You can solve this in one of two ways:
The DllReferencePlugin's manifest option supports either an object (which is what you are currently providing), or else a string containing the path of the manifest file. In other words, it should work if you remove the require() from around your path.join(...) call.
Alternatively, you can also defer the loading of the Webpack config files. Moving your const reactConfig = require('./webpack.config.js'); from the top of the file directly into the gulp task function should be sufficient, assuming that this function is not invoked until after the manifest has been built.

Local JavaScript Files Not Updating - Stencil CLI

I am modifying a purchased stencil-based theme for a client. When I modify javascript files, bundle.js does not update and I do not see a file change in the CLI. I am unable to see my changes on the local site. However, as a test, I was able to modify bundle.js directly and saw my change take place.
I have looked through the BC docs and have asked questions in other forums, but still no solution. I am not getting any errors in the CLI when I start stencil or run the bundle command. I can also upload my theme to the store without error.
Any ideas?
**Edit:
Here are the contents of my stencil.conf.js file:
var path = require('path');
var webpack = require('webpack');
var webpackConfig = require('./webpack.conf.js');
webpackConfig.context = __dirname;
webpackConfig.entry = path.resolve(__dirname, 'assets/js/app.js');
webpackConfig.output = {
path: path.resolve(__dirname, 'assets/js'),
filename: 'bundle.js'
};
/**
* Watch options for the core watcher
* #type {{files: string[], ignored: string[]}}
*/
var watchOptions = {
// If files in these directories change, reload the page.
files: [
'/assets',
'/templates',
'/lang'
],
//Do not watch files in these directories
ignored: [
'/assets/scss',
'/assets/css',
]
};
/**
* Hook into the stencil-cli browsersync instance for rapid development of themes.
* Watch any custom files and trigger a rebuild
* #param {Object} Bs
*/
function development(Bs) {
var compiler = webpack(webpackConfig);
// Rebuild the bundle once at bootup
compiler.watch({}, function(err, stats) {
if (err) {
console.error(err)
}
Bs.reload();
});
}
/**
*/
/**
* Hook into the `stencil bundle` command and build your files before they are packaged as a .zip
* Be sure to call the `done()` callback when finished
* #param {function} done
*/
function production(done) {
var compiler;
webpackConfig.devtool = false;
webpackConfig.plugins.push(new webpack.optimize.DedupePlugin());
webpackConfig.plugins.push(new webpack.optimize.UglifyJsPlugin({
comments: false
}));
compiler = webpack(webpackConfig);
compiler.run(function(err, stats) {
if (err) {
throw err;
}
done();
});
}
module.exports = {
watchOptions: watchOptions,
development: development,
production: production,
};
Here are the contents of my webpack.conf.js file:
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval-cheap-module-source-map',
bail: false,
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
include: [
path.resolve(__dirname, 'assets/js'),
path.resolve(__dirname, 'node_modules/#bigcommerce/stencil-utils'),
],
query: {
compact: false,
cacheDirectory: true,
presets: [ ['es2015', {loose: true}] ]
}
}
]
},
plugins: [],
watch: false
};

How to allow for webpack-dev-server to allow entry points from react-router

I'm creating an app that uses webpack-dev-server in development alongside react-router.
It seems that webpack-dev-server is built around the assumption that you will have a public entry point at one place (i.e. "/"), whereas react-router allows for an unlimited amount of entry points.
I want the benefits of the webpack-dev-server, especially the hot reloading feature that is great for productivity, but I still want to be able to load routes set in react-router.
How could one implement it such that they work together? Could you run an express server in front of webpack-dev-server in such a way to allow this?

You should set historyApiFallback of WebpackDevServer as true for this to work. Here's a small example (tweak to fit your purposes):
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
var port = 4000;
var ip = '0.0.0.0';
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
historyApiFallback: true,
}).listen(port, ip, function (err) {
if(err) {
return console.log(err);
}
console.log('Listening at ' + ip + ':' + port);
});

I set up a proxy to achieve this:
You have a regular express webserver that serves the index.html on any route, except if its an asset route. if it is an asset, the request gets proxied to the web-dev-server
your react hot entrypoints will still point directly at the webpack dev server, so hot reloading still works.
Let's assume you run webpack-dev-server on 8081 and your proxy at 8080. Your server.js file will look like this:
"use strict";
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./make-webpack-config')('dev');
var express = require('express');
var proxy = require('proxy-middleware');
var url = require('url');
## --------your proxy----------------------
var app = express();
## proxy the request for static assets
app.use('/assets', proxy(url.parse('http://localhost:8081/assets')));
app.get('/*', function(req, res) {
res.sendFile(__dirname + '/index.html');
});
# -----your-webpack-dev-server------------------
var server = new WebpackDevServer(webpack(config), {
contentBase: __dirname,
hot: true,
quiet: false,
noInfo: false,
publicPath: "/assets/",
stats: { colors: true }
});
## run the two servers
server.listen(8081, "localhost", function() {});
app.listen(8080);
now make your entrypoints in the webpack config like so:
entry: [
'./src/main.js',
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8081'
]
note the direct call to 8081 for hotreload
also make sure you pass an absolute url to the output.publicPath option:
output: {
publicPath: "http://localhost:8081/assets/",
// ...
}

For anyone else that may still be looking for this answer. I put together a simple proxy bypass which achieves this without much hassle and the config goes into the webpack.config.js
I am sure there are much more elegant ways to test for local content using regex, but this works for my needs.
devServer: {
proxy: {
'/**': { //catch all requests
target: '/index.html', //default target
secure: false,
bypass: function(req, res, opt){
//your custom code to check for any exceptions
//console.log('bypass check', {req: req, res:res, opt: opt});
if(req.path.indexOf('/img/') !== -1 || req.path.indexOf('/public/') !== -1){
return '/'
}
if (req.headers.accept.indexOf('html') !== -1) {
return '/index.html';
}
}
}
}
}

If you're running webpack-dev-server using CLI, you can configure it through webpack.config.js passing devServer object and using the historyApiFallback option:
module.exports = {
entry: "index.js",
output: {
filename: "bundle.js"
},
devServer: {
historyApiFallback: true
}
}
This will redirect to index.html everytime it 404 is encountered.
NOTE: If you're using publicPath, you'll need to pass it to devServer too:
module.exports = {
entry: "index.js",
output: {
filename: "bundle.js",
publicPath: "admin/dashboard"
},
devServer: {
historyApiFallback: {
index: "admin/dashboard"
}
}
}
You can verify that everything is setup correctly by looking at the first few lines of the output (the part with "404s will fallback to: path").

For a more recent answer, the current version of webpack (4.1.1) you can just set this in your webpack.config.js like such:
const webpack = require('webpack');
module.exports = {
entry: [
'react-hot-loader/patch',
'./src/index.js'
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader','css-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: './dist',
hot: true,
historyApiFallback: true
}
};
The important part is historyApiFallback: true. No need to run a custom server, just use the cli:
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js --mode development"
},

I'd like to add to the answer for the case when you run an isomorphic app (i.e. rendering React component server-side.)
In this case you probably also want to automatically reload the server when you change one of your React components. You do this with the piping package. All you have to do is install it and add require("piping")({hook: true}) somewhere in the beginning of you server.js. That's it. The server will restart after you change any component used by it.
This rises another problem though - if you run webpack server from the same process as your express server (as in the accepted answer above), the webpack server will also restart and will recompile your bundle every time. To avoid this you should run your main server and webpack server in different processes so that piping would restart only your express server and won't touch webpack.
You can do this with concurrently package. You can find an example of this in react-isomorphic-starterkit. In the package.json he has:
"scripts": {
...
"watch": "node ./node_modules/concurrently/src/main.js --kill-others 'npm run watch-client' 'npm run start'"
},
which runs both servers simultaneously but in separate processes.

historyApiFallback can also be an object instead of a Boolean, containing the routes.
historyApiFallback: navData && {
rewrites: [
{ from: /route-1-regex/, to: 'route-1-example.html' }
]
}

May be not in all cases, but seems the publicPath: '/' option in the devServer is easiest solution to fix deep routes issue, see: https://github.com/ReactTraining/react-router/issues/676

This worked for me: just simply add the webpack middlewares first and the app.get('*'... index.html resolver later,
so express will first check if the request matches one of the routes provided by webpack (like: /dist/bundle.js or /__webpack_hmr_) and if not, then it will move to the index.html with the * resolver.
ie:
app.use(require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
}))
app.use(require('webpack-hot-middleware')(compiler))
app.get('*', function(req, res) {
sendSomeHtml(res)
})