Fixed WebPack and caniuse-lite Deprecation Warnings #2276
Conversation
Our Pull Request Approval ProcessWe have these basic policies to make the approval process smoother for our volunteer team. Testing Your CodePlease make sure your code passes all tests. Our test code coverage system will fail if these conditions occur:
The process helps maintain the overall reliability of the code base and is a prerequisite for getting your PR approved. Assigned reviewers regularly review the PR queue and tend to focus on PRs that are passing. ReviewersDo not assign reviewers. Our Queue Monitors will review your PR and assign them.
Reviewing Your CodeYour reviewer(s) will have the following roles:
CONTRIBUTING.mdRead our CONTRIBUTING.md file. Most importantly:
Other
|
WalkthroughThe changes introduce the Changes
Assessment against linked issues
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
Files selected for processing (2)
- package.json (2 hunks)
- patches/react-scripts+5.0.1.patch (1 hunks)
Additional comments not posted (5)
package.json (2)
37-37: LGTM!The addition of
patch-packageas a dependency is a good choice for managing patches to npm packages. It can help improve the maintainability and stability of the project by allowing for fixes and modifications to dependencies.The version constraint
^8.0.0is also reasonable, as it allows for automatically using compatible newer versions ofpatch-package.
78-79: LGTM!The addition of the
postinstallscript to automatically runpatch-packageis a great way to ensure that patches are always applied after everynpm install. This automates the process and reduces the chances of forgetting to apply patches manually, improving the developer experience and reducing human errors.The placement of the
postinstallscript after thecheck-localstoragescript is also correct, maintaining the existing order of operations.patches/react-scripts+5.0.1.patch (3)
21-27: LGTM!The code segment improves the configuration by explicitly defining environment variables for host and WebSocket connection options. The fallback and default values provide sensible defaults while allowing customization through environment variables.
32-33: LGTM!The code segment refines the logic for handling firewall settings, ensuring that the server can disable host checks when no proxy is set or when explicitly allowed via an environment variable. This change aims to balance security with usability, particularly in development environments where proxies may be used.
152-183: LGTM!The code segment improves the middleware setup for the Webpack development server:
- The addition of middleware for source maps enhances the debugging experience.
- The custom proxy setup allows for flexibility in handling backend requests during development.
- The redirection of unmatched paths to the public URL or index.html supports SPA routing.
- Preventing service workers from being served in development avoids potential caching issues.
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## develop #2276 +/- ##
========================================
Coverage 97.54% 97.54%
========================================
Files 241 241
Lines 6887 6887
Branches 2016 2016
========================================
Hits 6718 6718
Misses 157 157
Partials 12 12 ☔ View full report in Codecov by Sentry. |
|
Closing #2258 (comment) |
What kind of change does this PR introduce?
This PR introduces a fix by updating the node_modules/react-scripts/config/webpackDevServer.config.js file.
The changes involve replacing the deprecated onAfterSetupMiddleware and onBeforeSetupMiddleware methods with setupMiddlewares. Additionally, the browserslist-db was updated to the latest version to resolve outdated browserlist warnings.
Issue Number:
Fixes #2258
Did you add tests for your changes?
No, these changes are primarily related to build configuration, and the existing test suite should cover the resulting behavior.
Snapshots/Videos:
N/A
If relevant, did you update the documentation?
No, these changes are related to internal build configuration and do not impact user-facing documentation.
Summary:
This PR resolves deprecation warnings associated with react-scripts by applying the following fixes:
Since modifying node_modules directly is not recommended, I utilized npx patches to create a patch file that automatically applies the necessary changes. This ensures that after running npm install, the deprecated warnings will be resolved without manually altering node_modules.
Does this PR introduce a breaking change?
No
Other information:
This PR uses a patch folder to automatically update react-scripts. After applying the patch, the build warnings related to deprecated methods in webpackDevServer.config.js are resolved. This helps to maintain a clean developer environment by removing unnecessary warnings.
Have you read the contributing guide?
Yes
Summary by CodeRabbit
New Features
patch-packagedependency for managing and applying patches to dependencies automatically.postinstallscript to ensure patches are applied after package installations.Improvements