Closed Ashiria7 closed 2 years ago
Enable experimentalImportSupport: true,
metro.config.js
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: true,
inlineRequires: true,
},
}),
},
};
babel.config.js
module.exports = {
presets: [
['module:metro-react-native-babel-preset', { useTransformReactJSXExperimental: true }],
],
plugins: [
[
'@babel/plugin-transform-react-jsx',
{
runtime: 'automatic',
},
],
],
};
Should work fine :)
Enable experimentalImportSupport: true,
metro.config.js
module.exports = { transformer: { getTransformOptions: async () => ({ transform: { experimentalImportSupport: true, inlineRequires: true, }, }), }, };
babel.config.js
module.exports = { presets: [ ['module:metro-react-native-babel-preset', { useTransformReactJSXExperimental: true }], ], plugins: [ [ '@babel/plugin-transform-react-jsx', { runtime: 'automatic', }, ], ], };
Should work fine :)
Thanks! It did work. But now I'm thinking this maybe need be added in doc? Or the beginner'll meet this problem with high probability.
Enable experimentalImportSupport: true,
metro.config.js
module.exports = { transformer: { getTransformOptions: async () => ({ transform: { experimentalImportSupport: true, inlineRequires: true, }, }), }, };
babel.config.js
module.exports = { presets: [ ['module:metro-react-native-babel-preset', { useTransformReactJSXExperimental: true }], ], plugins: [ [ '@babel/plugin-transform-react-jsx', { runtime: 'automatic', }, ], ], };
Should work fine :)
Thanks a lot, this babel config worked for me as well, now it does not ask me to import React in every component where there is JSX :)
Sorry for bumping this, but how would you use this in an expo project? I can't seem to get it to work.
This is my babel.config.js
:
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: [],
};
};
These are two ways I've tried that don't work:
module.exports = function (api) {
api.cache(true);
return {
presets: [
"babel-preset-expo",
[
"module:metro-react-native-babel-preset",
{ useTransformReactJSXExperimental: true },
],
],
plugins: [
[
"@babel/plugin-transform-react-jsx",
{
runtime: "automatic",
},
],
],
};
};
and
module.exports = function (api) {
api.cache(true);
return {
presets: [
[
"module:metro-react-native-babel-preset",
{ useTransformReactJSXExperimental: true },
],
],
plugins: [
[
"@babel/plugin-transform-react-jsx",
{
runtime: "automatic",
},
],
],
};
};
I am using react native with expo and having the same error message while using the ImageData constructor. I tried the metro.config.js and babel.config.js configurations mentioned by @przemyslav which seems to be working for react-native projects but does not work for projects using expo. What exactly causes the error and is there a solution?
For me was enough remove the ^ char from the ui-kitten deps into the package.json
For me was enough remove the ^ char from the ui-kitten deps into the package.json
Hi, what is "ui-kitten deps" ?
Description
I follow the guide and using
npx react-native init AwesomeTSProject --template react-native-template-typescript
create a project. And I find I should writeimport React from 'react'
in every.tsx
file. It's quite troubled. So I find this blog Introducing the New JSX Transform in React website. And I follow this blog. But it's not working. This is the whole error log:And this is my
package.json
andbabel.config.js
Version
0.69.3
Output of
npx react-native info
System: OS: macOS 12.2.1 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 458.96 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm Watchman: 2022.03.21.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.3 - /usr/local/bin/pod SDKs: iOS SDK: Not Found Android SDK: Not Found IDEs: Android Studio: 2021.2 AI-212.5712.43.2112.8609683 Xcode: /undefined - /usr/bin/xcodebuild Languages: Java: 11.0.16 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.0.0 => 18.0.0 react-native: 0.69.3 => 0.69.3 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found
Steps to reproduce
npx react-native init AwesomeTSProject --template react-native-template-typescript
@babel/preset-react
dependencyEdit
babel.config.js
see the descriptionRemove the import remove all the
import React from 'react'
Run
yarn android
Snack, code example, screenshot, or link to a repository
https://github.com/AXiLiYa/ReactNativeDemo
This is my demo project. It's has few test page. But they are very simple. So if you need, you can clone it. Thanks.