HMR not working (screenshot attached) #493
Comments
|
From the screenshot it looks like something is going wrong with the dev server connection itself. How are the logs for the webpack dev server looking? Anything there that mentions any errors? Are you able to provide reproduction repo? At the very least, we would need to see your Shakapacker and webpack configs to see how everything is set up. |
Starting server by doing webpack.config.js const { env, webpackConfig, generateWebpackConfig, inliningCss } = require('shakapacker');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const isDevelopment = process.env.NODE_ENV !== 'production';
const { existsSync } = require('fs');
const { resolve } = require('path');
const envSpecificConfig = () => {
const path = resolve(__dirname, `${env.nodeEnv}.js`);
if (existsSync(path)) {
console.log(`Loading ENV specific webpack configuration file ${path}`);
return require(path);
} else {
return webpackConfig;
}
};
let webpackConfiguration = envSpecificConfig();
if (isDevelopment && inliningCss) {
webpackConfiguration.plugins.push(
new ReactRefreshWebpackPlugin({
overlay: {
sockPort: webpackConfiguration.devServer.port,
},
})
);
}
// To debug the webpack configuration
// 1. Uncomment debugger line below
// 2. Run `bin/webpacker --debug-webpacker`
// 3. Examine the webpackConfiguration variable
// 4. Consider adding a 'debugger` line to the beginning of this file.
// debugger
module.exports = webpackConfiguration;shakapacker.yml # Note: You must restart bin/shakapacker-dev-server for changes to take effect
# This file contains the defaults used by shakapacker.
default: &default
source_path: app/javascript
# You can have a subdirectory of the source_path, like 'packs' (recommended).
# Alternatively, you can use '/' to use the whole source_path directory.
# Notice that this is a relative path to source_path
source_entry_path: packs
# If nested_entries is true, then we'll pick up subdirectories within the source_entry_path.
# You cannot set this option to true if you set source_entry_path to '/'
nested_entries: true
# While using a File-System-based automated bundle generation feature, miscellaneous warnings suggesting css order
# conflicts may arise due to the mini-css-extract-plugin. For projects where css ordering has been mitigated through
# consistent use of scoping or naming conventions, the css order warnings can be disabled by setting
# css_extract_ignore_order_warnings to true
css_extract_ignore_order_warnings: false
public_root_path: public
public_output_path: packs
cache_path: tmp/shakapacker
webpack_compile_output: true
# See https://github.com/shakacode/shakapacker#deployment
shakapacker_precompile: true
# Location for manifest.json, defaults to {public_output_path}/manifest.json if unset
# manifest_path: public/packs/manifest.json
# Additional paths webpack should look up modules
# ['app/assets', 'engine/foo/app/assets']
additional_paths: []
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
# Select loader to use, available options are 'babel' (default), 'swc' or 'esbuild'
webpack_loader: 'babel'
# Set to true to enable check for matching versions of shakapacker gem and NPM package - will raise an error if there is a mismatch or wildcard versioning is used
ensure_consistent_versioning: false
# Select whether the compiler will use SHA digest ('digest' option) or most most recent modified timestamp ('mtime') to determine freshness
compiler_strategy: digest
# Select whether the compiler will always use a content hash and not just in production
# Don't use contentHash except for production for performance
# https://webpack.js.org/guides/build-performance/#avoid-production-specific-tooling
useContentHash: false
# Setting the asset host here will override Rails.application.config.asset_host.
# Here, you can set different asset_host per environment. Note that
# SHAKAPACKER_ASSET_HOST will override both configurations.
# asset_host: custom-path
development:
<<: *default
compile: false
compiler_strategy: mtime
# Reference: https://webpack.js.org/configuration/dev-server/
# Keys not described there are documented inline and in https://github.com/shakacode/shakapacker/
dev_server:
# For running dev server with https, set `server: https`.
# server: https
host: localhost
port: 3035
# Hot Module Replacement updates modules while the application is running without a full reload
# Used instead of the `hot` key in https://webpack.js.org/configuration/dev-server/#devserverhot
hmr: true
# If HMR is on, CSS will by inlined by delivering it as part of the script payload via style-loader. Be sure
# that you add style-loader to your project dependencies.
#
# If you want to instead deliver CSS via <link> with the mini-css-extract-plugin, set inline_css to false.
# In that case, style-loader is not needed as a dependency.
#
# mini-css-extract-plugin is a required dependency in both cases.
inline_css: true
# Defaults to the inverse of hmr. Uncomment to manually set this.
# live_reload: true
client:
# Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
overlay: true
# May also be a string
# webSocketURL:
# hostname: '0.0.0.0'
# pathname: '/ws'
# port: 8080
# Should we use gzip compression?
compress: true
# Note that apps that do not check the host are vulnerable to DNS rebinding attacks
allowed_hosts: 'auto'
# Shows progress and colorizes output of bin/shakapacker[-dev-server]
pretty: true
headers:
'Access-Control-Allow-Origin': '*'
static:
watch:
ignored: '**/node_modules/**'
test:
<<: *default
compile: true
# Compile test packs to a separate directory
public_output_path: packs-test
production:
<<: *default
# Production depends on precompilation of packs prior to booting for performance.
compile: false
# Use content hash for naming assets. Cannot be overridden by for production.
useContentHash: true
# Cache manifest.json for performance
cache_manifest: true |
|
Checking back in on this. Would really like to find a solution as it'll help me build 3x faster. |
|
Sorry, I've missed your initial reply. Nothing quite stands out in the config. What's the running URL of your app? Is it running on localhost URL also? In the initial screenshot there were errors with WS connection failing and some dev server event causing error. Could you unfurl and screenshot those so more information is visible? Also just confirming - when you save a file after initial load - the terminal output of dev server indicates that the recompile happens without errors, right? |
Aaahhh that's what it was! I'm using ngrok and not localhost! Is it possible to use wildcard ngroks? |
|
Ah, so looks like some cross domain issues. Not entirety sure what you mean by wildcard ngroks. I would probably play around with host option if the client and set it to 0.0.0.0 and then in webSocketUrl section of the config you could point out at the ngrok domain if it still resolves to the local machine. I've used setup like that before to run my dev server behind nginx but same principle should apply here. There might be other options in dev server around allowed hosts if firewall that could be useful here but I didn't dig too deep into that. |
This is the error i got after i did the settings below. development:
<<: *default
compile: false
compiler_strategy: mtime
# Reference: https://webpack.js.org/configuration/dev-server/
# Keys not described there are documented inline and in https://github.com/shakacode/shakapacker/
dev_server:
# For running dev server with https, set `server: https`.
# server: https
host: '0.0.0.0' # Allow connections from any IP
port: 3035
# Hot Module Replacement updates modules while the application is running without a full reload
# Used instead of the `hot` key in https://webpack.js.org/configuration/dev-server/#devserverhot
hmr: false
# If HMR is on, CSS will by inlined by delivering it as part of the script payload via style-loader. Be sure
# that you add style-loader to your project dependencies.
#
# If you want to instead deliver CSS via <link> with the mini-css-extract-plugin, set inline_css to false.
# In that case, style-loader is not needed as a dependency.
#
# mini-css-extract-plugin is a required dependency in both cases.
inline_css: true
# Defaults to the inverse of hmr. Uncomment to manually set this.
# live_reload: true
client:
# Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
overlay: true
# May also be a string
webSocketURL: {
hostname: 'queue.ngrok.io',
pathname: '/ws',
port: 8080
}
# Should we use gzip compression?
compress: true
# Note that apps that do not check the host are vulnerable to DNS rebinding attacks
allowed_hosts:
- '0.0.0.0'
- '.ngrok.io' # Allow all ngrok subdomains
pretty: true
headers:
'Access-Control-Allow-Origin': '*'
static:
watch:
ignored: '**/node_modules/**' |
|
See if adding |
|
I'll close for now. Sounds like maybe a doc issue. |
Notice: A bug is a crash or incorrect behavior. If you have a debugging or troubleshooting question, please open a discussion on the Discussions Tab. Otherwise, remove this line and fill out the following sections.
Expected behavior:
Hot reloading of the page whenever I save a js file.
Actual behavior:
Not hot reloading. Still have to hard reload it.
Small, reproducible repo:
Setup environment:
This is what I see when i go to a page.
The text was updated successfully, but these errors were encountered: