Fix webpack dev server watch behavior and port conflicts#3026
Open
Fix webpack dev server watch behavior and port conflicts#3026
Conversation
 |
|
Overall Grade |
Security Reliability Complexity Hygiene |
Code Review Summary
| Analyzer | Status | Updated (UTC) | Details |
|---|---|---|---|
| PHP |  |
Mar 17, 2026 2:19p.m. | Review ↗ |
| JavaScript | |
Mar 17, 2026 2:19p.m. | Review ↗ |
Contributor
📝 WalkthroughWalkthroughThe webpack development configuration was updated to rename an environment variable from SITE_URL to SITE_DOMAIN, change dev server ports from 3000/3001 to 8880/8881, add third-party directory exclusions to watch options, and introduce conditional file watching handlers for JS and PHP files triggered by ENABLE_WATCH. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
📝 Coding Plan
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@webpack.dev.js`:
- Around line 93-109: The compiled-output watcher (config.jsPath) is matching
source JS files and causing browserSyncInstance.reload() to run before webpack
finishes; update the watcher for config.jsPath to exclude source directories
(the same paths used by config.jsSrcPath) — either by changing the glob to
exclude js/src/** or by adding an ignore/negation pattern so the match for
config.jsPath only targets compiled bundles, ensuring only the jsSrcPath watcher
logs "JS source updated" while the compiled watcher triggers reload after build
completion.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 790a2da0-442a-4a0d-8ace-f4227e833e25
📒 Files selected for processing (1)
webpack.dev.js
Comment on lines
+93
to
+109
| // Conditionally watch compiled JS and PHP files for full page reload | ||
| ...( process.env.ENABLE_WATCH && process.env.ENABLE_WATCH.toLowerCase().startsWith( 'y' ) ? [ | ||
| { | ||
| match: [ config.jsPath ], | ||
| fn: ( event, file ) => { | ||
| console.log( `JS updated: ${ file }` ); | ||
| browserSyncInstance.reload(); | ||
| } | ||
| }, | ||
| { | ||
| match: [ config.phpPath ], | ||
| fn: ( event, file ) => { | ||
| console.log( `PHP updated: ${ file }` ); | ||
| browserSyncInstance.reload(); | ||
| } | ||
| } | ||
| ] : [] ) |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify the directory structure to understand where compiled JS files are output
# vs where source files reside
echo "=== Looking for JS source directories ==="
fd -t d 'src' --full-path '.*js/src.*' | head -20
echo -e "\n=== Looking for webpack output configuration ==="
rg -n 'output.*path|outputPath' webpack.config.js 2>/dev/null || echo "webpack.config.js not found or no output path defined"
echo -e "\n=== Sample JS file locations ==="
fd -e js --full-path 'formidable' -E node_modules -E vendor | head -30Repository: Strategy11/formidable-forms
Length of output: 625
🏁 Script executed:
#!/bin/bash
# First, let's find webpack.dev.js and examine it
echo "=== Finding webpack.dev.js ==="
fd -e js webpack.dev | head -10
echo -e "\n=== Looking at webpack.dev.js lines 93-109 ==="
if [ -f webpack.dev.js ]; then
sed -n '85,115p' webpack.dev.js
fi
echo -e "\n=== Searching for config definition (jsPath, jsSrcPath) ==="
rg -n 'jsPath|jsSrcPath' --context 3 | head -50
echo -e "\n=== Repository root structure ==="
ls -la | grep -E '^d'
echo -e "\n=== Checking for js directories ==="
find . -type d -name js -not -path '*/node_modules/*' -not -path '*/.git/*' 2>/dev/null
echo -e "\n=== Checking if js/src exists ==="
if [ -d js/src ]; then
echo "js/src EXISTS:"
ls -la js/src
else
echo "js/src DOES NOT EXIST"
fiRepository: Strategy11/formidable-forms
Length of output: 4696
🏁 Script executed:
#!/bin/bash
# Let's examine the actual JS files and understand the directory structure better
echo "=== JS files in js/ root (compiled output) ==="
ls -la js/*.js 2>/dev/null | head -20
echo -e "\n=== Sample JS files in js/src/ (source) ==="
find js/src -maxdepth 2 -name '*.js' | head -20
echo -e "\n=== Check if js/src files would match jsPath pattern ==="
# jsPath pattern: '../formidable*/**/*.js'
# This would match both js/ and js/src/ files in the actual formidable project
echo "jsPath pattern: '../formidable*/**/*.js'"
echo "jsSrcPath pattern: '../formidable*/*/js/src/**/*.js'"
echo ""
echo "Pattern analysis:"
echo "- jsPath matches: any .js file under formidable* dir (includes js/src/)"
echo "- jsSrcPath matches: specifically js/src/ files"
echo "- OVERLAP: YES - both match js/src/*.js files"
echo -e "\n=== Webpack entry points and output ==="
rg -n 'entry|output' webpack.dev.js | head -20
echo -e "\n=== Full webpack config section ==="
sed -n '1,60p' webpack.dev.jsRepository: Strategy11/formidable-forms
Length of output: 4353
🏁 Script executed:
#!/bin/bash
# Need to understand: are js/ files (compiled output) or js/src/ (source)?
# And where does webpack actually output its compiled files?
echo "=== Check git status of js files ==="
git ls-files js/ | head -20
echo -e "\n=== Are js/ files tracked in git? ==="
git ls-files js/*.js | wc -l
echo -e "\n=== Are js/src/ files tracked in git? ==="
git ls-files js/src/ | wc -l
echo -e "\n=== Check if js directory is in .gitignore ==="
cat .gitignore | grep -i "js" || echo "No js-related .gitignore entries found"
echo -e "\n=== What does webpack.config output to? ==="
grep -A 5 -B 2 'output\|filename' webpack.config.js | head -40Repository: Strategy11/formidable-forms
Length of output: 1354
🏁 Script executed:
#!/bin/bash
# Let's verify the actual impact and if this is really a problem
echo "=== Check webpack.config to understand path context ==="
grep -B 5 -A 10 'paths\.' webpack.config.js | head -30
echo -e "\n=== How are the watch paths actually used in browser-sync? ==="
grep -B 5 -A 5 'match:' webpack.dev.js
echo -e "\n=== Check if ENABLE_WATCH is documented ==="
grep -r 'ENABLE_WATCH' --include='*.md' --include='*.txt' 2>/dev/null | head -10
echo -e "\n=== Check if there are any comments about the watch behavior ==="
grep -B 3 -A 3 'reload\|watch' webpack.dev.js | head -50Repository: Strategy11/formidable-forms
Length of output: 3730
🏁 Script executed:
#!/bin/bash
# Let me verify the actual paths being used and understand the context better
echo "=== Understanding the relative paths context ==="
echo "Current directory in repo: root of formidable-forms"
echo "Watch paths start with '../formidable*' meaning parent directory"
echo ""
echo "If parent directory structure is:"
echo " ../formidable-pro/formidable/js/src/..."
echo " ../formidable-pro/formidable/js/*.js (compiled)"
echo ""
echo "=== Let's see what the paths object resolves to ==="
grep -n 'const paths\|paths\.' webpack.config.js | head -20
echo -e "\n=== Final check: are js/src source files or compiled? ==="
file js/src/blocks.js js/addons-page.js
echo -e "\n=== Check first few lines of source vs compiled ==="
echo "=== js/src/blocks.js (first 5 lines) ==="
head -5 js/src/blocks.js
echo -e "\n=== js/addons-page.js (first 5 lines) ==="
head -5 js/addons-page.jsRepository: Strategy11/formidable-forms
Length of output: 30808
🏁 Script executed:
#!/bin/bash
# Verify: when webpack outputs compiled files, do they get written to js/ root?
echo "=== Check webpack output path in webpack.config ==="
grep -A 2 "output:" webpack.config.js | grep -A 2 "path:"
echo -e "\n=== Verify paths definition ==="
head -40 webpack.config.js | grep -A 5 "const paths"Repository: Strategy11/formidable-forms
Length of output: 488
Source file changes trigger premature page reload before webpack compilation completes.
The jsPath glob (../formidable*/**/*.js) matches all JS files including source files in js/src/. When ENABLE_WATCH=Y, both watchers respond to a source file change:
jsSrcPathwatcher logs "JS source updated" (no reload)jsPathwatcher logs "JS updated" and triggers reload immediately — before webpack finishes compiling the changes
This defeats the purpose of watching compiled output, as the browser reloads with stale bundles.
Consider excluding source directories from the compiled JS watcher:
Proposed fix
// Conditionally watch compiled JS and PHP files for full page reload
...( process.env.ENABLE_WATCH && process.env.ENABLE_WATCH.toLowerCase().startsWith( 'y' ) ? [
{
- match: [ config.jsPath ],
+ match: [ config.jsPath, '!**/js/src/**' ],
fn: ( event, file ) => {
console.log( `JS updated: ${ file }` );
browserSyncInstance.reload();
}
},📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| // Conditionally watch compiled JS and PHP files for full page reload | |
| ...( process.env.ENABLE_WATCH && process.env.ENABLE_WATCH.toLowerCase().startsWith( 'y' ) ? [ | |
| { | |
| match: [ config.jsPath ], | |
| fn: ( event, file ) => { | |
| console.log( `JS updated: ${ file }` ); | |
| browserSyncInstance.reload(); | |
| } | |
| }, | |
| { | |
| match: [ config.phpPath ], | |
| fn: ( event, file ) => { | |
| console.log( `PHP updated: ${ file }` ); | |
| browserSyncInstance.reload(); | |
| } | |
| } | |
| ] : [] ) | |
| // Conditionally watch compiled JS and PHP files for full page reload | |
| ...( process.env.ENABLE_WATCH && process.env.ENABLE_WATCH.toLowerCase().startsWith( 'y' ) ? [ | |
| { | |
| match: [ config.jsPath, '!**/js/src/**' ], | |
| fn: ( event, file ) => { | |
| console.log( `JS updated: ${ file }` ); | |
| browserSyncInstance.reload(); | |
| } | |
| }, | |
| { | |
| match: [ config.phpPath ], | |
| fn: ( event, file ) => { | |
| console.log( `PHP updated: ${ file }` ); | |
| browserSyncInstance.reload(); | |
| } | |
| } | |
| ] : [] ) |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@webpack.dev.js` around lines 93 - 109, The compiled-output watcher
(config.jsPath) is matching source JS files and causing
browserSyncInstance.reload() to run before webpack finishes; update the watcher
for config.jsPath to exclude source directories (the same paths used by
config.jsSrcPath) — either by changing the glob to exclude js/src/** or by
adding an ignore/negation pattern so the match for config.jsPath only targets
compiled bundles, ensuring only the jsSrcPath watcher logs "JS source updated"
while the compiled watcher triggers reload after build completion.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR fixes issues in the Formidable development server setup.
Testing
npm run servenode_modulesorvendorSummary by CodeRabbit