-
Notifications
You must be signed in to change notification settings - Fork 614
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ReferenceError: Property 'React' doesn't exist after upgrade react-native to 0.64.0 #646
Comments
I'm having a similar issue using typescript and Setting:
Gives me the error: |
Because, metro/packages/metro-react-native-babel-preset/src/configs/main.js Lines 59 to 61 in 6cb3ec8
But set So you might want to change your module.exports = {
presets: [['module:metro-react-native-babel-preset', { useTransformReactJSXExperimental: true }]],
plugins: [
[
'@babel/plugin-transform-react-jsx',
{
runtime: 'automatic',
},
],
]
} |
I'm having the same issue:
Thanks for the suggestion, @moonlight8978, but I unfortunately still can't get mine working. I originally started my project with Expo but have since ejected to bare workflow. My module.exports = function (api) {
api.cache(true)
const presets = ['babel-preset-expo']
const plugins = ['react-native-reanimated/plugin']
return {
presets,
plugins,
} Since updating to React Native module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: ['react-native-reanimated/plugin'],
} Despite this, I still get the ReferenceError: Can't find variable: React error. Hopefully there's something I'm missing but I'm relatively new to this and it's already been a little confusing since ejecting from Expo a while ago. Update: I was missing the |
Thanks @moonlight8978. Your suggestion of adding |
@darrylyoung I'm not familiar with expo, but I tried to take a look at I believe that the only way for using React 17 new JSX transformation with expo is remove |
Hi, @moonlight8978. 👋
Thanks for the message. I checked Regardless, I tried removing module.exports = {
presets: [
['babel-preset-expo'],
['module:metro-react-native-babel-preset', { useTransformReactJSXExperimental: true }],
],
plugins: [
['react-native-reanimated/plugin'],
[
'@babel/plugin-transform-react-jsx',
{
runtime: 'automatic',
},
],
],
} I don't have that much experience with Babel so I'm not sure how acceptable this is but I can say that by doing this, I no longer get the Can't find variable: React error and I have no problems with the icon fonts, etc. Maybe, once |
Solution from #646 (comment) is working on development for me, but when I make production build it doesn't work with error "Can't find variable: React" |
Hello, I updated my
Here's my
I tried:
Any help would be appreciated! |
@jmfigueroa Your
presets: [
[
'module:metro-react-native-babel-preset',
{
'useTransformReactJSXExperimental': true,
}
]
] not presets: [
'module:metro-react-native-babel-preset',
{
'useTransformReactJSXExperimental': true,
},
] it makes babel think that you are using 2 presets
|
Don't forget to run |
Hello, I followed this comment and c&p the given // babel.config.js
module.exports = {
presets: [
[
"module:metro-react-native-babel-preset",
{ useTransformReactJSXExperimental: true },
],
],
plugins: [
[
"@babel/plugin-transform-react-jsx",
{
runtime: "automatic",
},
],
],
}; I tried having the |
I am using react-native with typescript. I am still facing this issue. Here's my module.exports = {
presets: [
[
'module:metro-react-native-babel-preset',
{ useTransformReactJSXExperimental: true },
],
],
plugins: [
[
'@babel/plugin-transform-react-jsx',
{
runtime: 'automatic',
},
],
[
'module-resolver',
{
root: ['./'],
extensions: ['.ts', '.tsx', '.android.tsx', '.ios.tsx'],
alias: {
'~src/*': './src/*',
},
},
],
],
}; I also tried installing |
yarn start --reset-cache solved my issues with typescript |
Do you want to request a feature or report a bug?
Report a bug and suggestion to fix it.
What is the current behavior?
I try to upgrade to 0.64.0 from 0.63.4 which include react 17 with the New JSX Transform.
After I remove React import from all my component files.
I got below error when running the app
yarn android
withyarn start --reset-cache
If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can
yarn install
andyarn test
.npx react-native init AwesomeTSProject --template react-native-template-typescript
import React from 'react';
from component file.ReferenceError: Property 'React' doesn't exist
What is the expected behavior?
As from React blog about New JSX Transform, it needs additional config in babel.config.js
yarn start --reset-cache
andyarn android
the error was gone.Please provide your exact Metro configuration and mention your Metro, node, yarn/npm version and operating system.
The text was updated successfully, but these errors were encountered: