Fix react-native-web example by adding babel plugin #9078
Merged
Conversation
This file contains 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
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles
Commit: 0caaf60 |
|
This seems unneeded based on your description. |
|
@timneutkens I think it's a rare case where RNW Next won't be used alongside a full react-native app. So I think most people are going to have this problem. At the very least, info on the babel plugin should be clearly documented (it took me many hours to track down this issue). |
|
The reason I'm saying it doesn't sound correct is that you're saying that Babel somehow resolves modules which is not a feature that Babel has. webpack resolves modules, Babel only transforms code. Meaning that the webpack alias that is already in the example should be enough to make it work. |
timneutkens
reviewed
Oct 16, 2019
|
Ok yeah, I admit I not an expert at webpack and babel, so not sure exactly what's going on. Changing The error without the babel plugin is: As you can see, for some reason something is loading files inside the |
|
Fyi, it's confirmed this PR does fix #7276 |
|
The reason why it works with the Babel plugin is that the plugin rewrites the imports. Technically using the plugin is good because it enables tree shaking. |
timneutkens
reviewed
Oct 26, 2019
| config.resolve.alias = { | ||
| ...(config.resolve.alias || {}), | ||
| // Transform all direct `react-native` imports to `react-native-web` | ||
| 'react-native$': 'react-native-web' | ||
| } | ||
| defaultLoaders.babel.options.plugins = [ | ||
| ['react-native-web', { commonjs: true }] |
There was a problem hiding this comment.
Can you add this to a .babelrc instead. Then it'll be fine to merge 👍
|
I moved the babel config out to it's own file, and I also added resolve extensions for I just also ran into that issue. Most RNW projects will likely make use of the platform imports: |
Stats from current PRDefault Server ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Client Pages
Client Pages Modern
Client Build Manifests
Rendered Page Sizes
Serverless ModeGeneral
Client Bundles (main, webpack, commons)
Client Bundles (main, webpack, commons) Modern
Client Pages
Client Pages Modern
Client Build Manifests
Serverless bundles
Commit: a1a750b |
timneutkens
approved these changes
Oct 27, 2019
This was referenced Nov 12, 2019
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
Problem
This example will not compile if
react-nativeis also installed in the same directory (you can test by addingreact-nativeto this package.json.It won't compile because babel also needs an alias config for react-native to react-native-web
Compile error without the babel plugin:
Solution
Add
babel-plugin-react-native-webwhich properly configures babel to use react-native-web instead of react-nativeEdit: This does fix #7276