Add babel plugin to @react-native/babel-preset for console.warn injection under deep react native imports - #50802
Closed
coado wants to merge 1 commit into
Closed
Add babel plugin to @react-native/babel-preset for console.warn injection under deep react native imports#50802coado wants to merge 1 commit into
@react-native/babel-preset for console.warn injection under deep react native imports#50802coado wants to merge 1 commit into
Conversation
Contributor
|
This pull request was exported from Phabricator. Differential Revision: D70783145 |
@react-native/babel-preset for console.warn injection under deep react native imports
@react-native/babel-preset for console.warn injection under deep react native imports@react-native/babel-preset for console.warn injection under deep react native imports
Contributor
|
This pull request was exported from Phabricator. Differential Revision: D70783145 |
coado
force-pushed
the
export-D70783145
branch
2 times, most recently
from
April 24, 2025 11:23
4282948 to
23dd5f7
Compare
…njection under deep react native imports (#50802) Summary: Pull Request resolved: #50802 The plugin analyses the source of all `import`, `require`, and `export` statements and injects the `console.warn` statement for each path targeting deep react-native source code. It runs only on a dev mode so there is no need to keep that in the `if (__DEV__) ` block. It is possible to disable this plugin by setting `disableDeepImportWarnings: true` and **resetting** the Metro cache: ```js module.exports = { presets: [['module:react-native/babel-preset', { "disableDeepImportWarnings": true }]], }; ``` Changelog: [General][Internal] - Added plugin to react-native/babel-preset injecting `console.warn` for each react native deep import in dev mode. For a given code: ```js import { Image } from 'react-native'; import View from 'react-native/Libraries/Components/View/View'; const Text = require('react-native/Libraries/Text/Text'); export { PressabilityDebugView } from 'react-native/Libraries/Pressability/PressabilityDebug'; ``` The transformed output should look like: ```js import { Image } from 'react-native'; import View from 'react-native/Libraries/Components/View/View'; const Text = require('react-native/Libraries/Text/Text'); export { PressabilityDebugView } from 'react-native/Libraries/Pressability/PressabilityDebug'; console.warn("Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Components/View/View')."); console.warn("Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Text/Text')."); console.warn("Deep imports from the 'react-native' package are deprecated ('react-native/Libraries/Pressability/PressabilityDebug')."); ``` For more information about why this plugin was needed, please check [RFC](react-native-community/discussions-and-proposals#894). Reviewed By: huntie Differential Revision: D70783145
Contributor
|
This pull request was exported from Phabricator. Differential Revision: D70783145 |
3 tasks
Contributor
|
This pull request has been merged in 3e14d16. |
Collaborator
|
This pull request was successfully merged by @coado in 3e14d16 When will my fix make it into a release? | How to file a pick request? |
EvanBacon
added a commit
to expo/expo
that referenced
this pull request
May 15, 2025
…reset` (#36362) # Why <!-- Please describe the motivation for this PR, and link to relevant GitHub issues, forums posts, or feature requests. --> The react-native `0.80` version will introduce [deep import warnings plugin](react/react-native#50802) built in `@react-native/babel-preset`. This is the first step towards deprecating deep react native imports in favor of a more stricter root imports. It should be possible to opt-out of these warnings by passing `disableDeepImportWarnings` option to the `@react-native/babel-preset`. # How <!-- How did you build this feature or fix this bug and why? --> This PR adds `disableDeepImportWarnings` property to the `BabelPresetExpoPlatformOptions` which is passed to the base react-native preset. The plugin can be disabled by modifying `babel.config.js`: ```js module.exports = function (api) { api.cache(true); return { presets: [['babel-preset-expo', { disableDeepImportWarnings: true}]], }; }; ``` # Test Plan <!-- Please describe how you tested this change and how a reviewer could reproduce your test, especially if this PR does not include automated tests! If possible, please also provide terminal output and/or screenshots demonstrating your test/reproduction. --> Tested on a new app with Expo by adding this plugin in the `node_modules`: | Disabled | Default | |--------|-------| | <img width="1199" alt="disabled" src="https://github.com/user-attachments/assets/a38b67d2-cf6b-4375-8543-1464d6d361ca" /> | <img width="1199" alt="default" src="https://github.com/user-attachments/assets/887c2b76-b922-48dc-9472-f1660478c7af" /> | # Checklist <!-- Please check the appropriate items below if they apply to your diff. --> - [x] I added a `changelog.md` entry and rebuilt the package sources according to [this short guide](https://github.com/expo/expo/blob/main/CONTRIBUTING.md#-before-submitting) - [x] This diff will work correctly for `npx expo prebuild` & EAS Build (eg: updated a module plugin). - [x] Conforms with the [Documentation Writing Style Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md) --------- Co-authored-by: Evan Bacon <bacon@expo.io>
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
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.
Summary:
The plugin analyses the source of all
import,require, andexportstatements and injects theconsole.warnstatement for each path targeting deep react-native source code. It runs only on a dev mode so there is no need to keep that in theif (__DEV__)block. It is possible to disable this plugin by settingdisableDeepImportWarnings: trueand resetting the Metro cache:Changelog:
[General][Internal] - Added plugin to react-native/babel-preset injecting
console.warnfor each react native deep import in dev mode.For a given code:
The transformed output should look like:
For more information about why this plugin was needed, please check RFC.
Reviewed By: huntie
Differential Revision: D70783145