React Native - How to enable jsx syntax in js files - react-native

I tried use react-navigation (6.5.8) drawer navigator in a react-native web application, but I get 3 error messages. It seams the jsx syntax not allowed in js files. How should I enable it?
I tried tsconfig.json
{
"extends": "#tsconfig/react-native/tsconfig.json",
"include": [
"src",
"/node_modules/**/*"
],
"compilerOptions": {
"jsx": "react",
"allowJs": true,
},
}
And babel.config.js
module.exports = {
presets: ['#babel/preset-env', '#babel/preset-react', 'module:metro-react-native-babel-preset'],
plugins: ['react-native-reanimated/plugin']
};
But not helped yet.
Here is my git repo:
https://github.com/pzoli/WebDemoProject-drawer

Related

Cannot find module or its corresponding type declarations in React Native project

I'm trying to include paths aliases to my project in React Native.
In fact when I start the app it's working so I think my babel.config.js is ok, but in VSCode stills appear an error telling Cannot find module or its corresponding type declarations so I think I'm having my tsconfig.json wrong
babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
root: ['.'],
alias: {
'#ali/assets': './src/assets',
'#ali/components': './src/components',
'#ali/colors': './src/theme/colors.ts'
}
}
]
]
}
tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "commonjs",
"lib": ["es2017"],
"allowJs": true,
"jsx": "react-native",
"noEmit": true,
"isolatedModules": true,
"strict": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"skipLibCheck": false,
"rootDir": ".",
"paths": {
"#ali/assets": ["./src/assets/*"],
"#ali/components": ["./src/components/*"],
"#ali/colors": ["./src/theme/colors"]
}
},
"exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"],
"extends": "expo/tsconfig.base"
}
Here's my file
src/screens/Login/index.tsx
import Wellcome from '#ali/components/LogIn/Wellcome'
import React from 'react'
import LoginForm from '../../components/forms/LoginForm'
export const LogIn = () => {
return (
<>
<Wellcome />
<LoginForm />
</>
)
}
export default LogIn
I can see my component Wellcome in my app, but in VSCode stills appear the error.
This is due to a tsconfig.json bad configuration.
You should add baseUrl and remove the starting "." from paths routes.
Try this:
"baseUrl": ".",
"paths": {
"#ali/assets/*": ["src/assets/*"],
"#ali/components/*": ["src/components/*"],
"#ali/colors/*": ["src/theme/colors"]
}

React Native Jest Test Suite Fails: TypeError: Cannot read property 'propTypes' of undefined

I am trying to use the Jest test suite that comes with the app created with react-native init but I am getting this error when I run npm test:
TypeError: Cannot read property 'propTypes' of undefined
at propTypes (node_modules/react-native/Libraries/Animated/src/createAnimatedComponent.js:178:31)
at Object.oldCreate [as createAnimatedComponent] (node_modules/react-native/jest/setup.js:79:23)
at Object.Animated (node_modules/react-navigation-stack/lib/commonjs/views/BorderlessButton.tsx:5:28)
at Object.<anonymous> (node_modules/react-navigation-stack/lib/commonjs/views/TouchableItem.tsx:19:1)
This is the code of the test that is failing...
import 'react-native';
import React from 'react';
import App from '../App';
import renderer from 'react-test-renderer';
beforeAll(() => {
jest.mock('#react-native-community/async-storage');
});
it('renders correctly', () => {
renderer.create(<App />);
});
Not sure how to resolve it, several errors I was getting i managed to fix by either mocking the module (like AsyncStorage, geolocation, NetInfo) or adding their package name to the jest object in package.json like so:
"jest": {
"preset": "react-native",
"transformIgnorePatterns": [
"node_modules/(?!(react-native|react-native-barcode-builder|react-native-maps|react-native-android-open-settings|react-native-qrcode-scanner|react-native-permissions|react-native-camera|react-native-google-maps-directions|jsbarcode|react-native-picker-select|react-native-datepicker|react-native-touch-id|react-native-screens|react-native-gesture-handler|react-navigation|react-navigation-stack)/)"
]
}
My babel.config file just has...
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
};
Am I missing some step in the configuration? Not sure if it helps but I am using React Native v0.60.5. Thanks in advance.
Adding the right mocks for react-native-gesture-handler fixed it for me. I had to add:
"setupFiles": [
"./node_modules/react-native-gesture-handler/jestSetup.js"
],
You can find more documentation here:
https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#testing
You should define jest config like this in your package.json.
"jest": {
"preset": "react-native",
"collectCoverage": true,
"testEnvironment": "jsdom",
"moduleDirectories": [
"node_modules",
"components"
],
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
},
"setupFiles": [
"<rootDir>/jest/setup.js"
],
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native)"
],
"coveragePathIgnorePatterns": [
"/node_modules/",
"/jest",
"assets",
"lib"
],
"modulePathIgnorePatterns": [
"package",
"assets",
"lib"
]
},

Configuring for babel.config.js

I'm relatively new to Expo and React Native. Have been facing problems in using absolute paths while importing the modules. Was reading on how to implement this plugin but I am unable to use it properly since it has only instructions for .babelrc. I did almost everything found on different threads regarding this but still, I am unable to use it properly. In my expo project, I also do not have any .babelrc file instead I have babel.config.js file.
I am trying to convert this code for .babelrc:
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": [
"transform-react-jsx-source",
["module-resolver", {
"root": ["./src"]
}]
]
}
}
}
To this for babel.config.js:
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};
Thanks
Check the configuration:
.babelrc
{
"extends": "./babel.config.js"
}
babel.config.js
module.exports = (api) => {
api.cache(true)
return {
"env": {
"development": {
"plugins": [
"transform-react-jsx-source",
["module-resolver", {
"root": ["./src"]
}]
]
}
},
presets: ['babel-preset-expo']
}
}

how to get intellisense for methods of modules which are imported from an alias in .vue

In .vue and .js, I can enjoy the intellisense of vscode when developing.
But I found it doesn't work any more when I use an alias.
So I have searched for a while on blogs, found a solution, which is to configure a 'jsconfig.json' as below.
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true,
"baseUrl": "./",
"paths": {
"#/*": [
"src/*"
]
}
}
}
it worked in the .js file but didn't work in .vue file.
Does anyone know how to resolve it ?
Does work in .js
Not work in .vue
With vue-cli the alias is defined in the webpack-config (since #vue/cli uses webpack under the hood). So instead of jsconfig.json (delete it! just do it!) , I would:
1: Install the webpack resolver for eslint:
npm i eslint-import-resolver-webpack
2: Reference the plugin from your .eslintrc.js
"settings": {
"import/resolver": "webpack"
},
Done!
This is my complete .eslintrc.js just to be thorough:
module.exports = {
"settings": {
"import/resolver": "webpack"
},
parserOptions: {
parser: "babel-eslint"
},
extends: [
"eslint:recommended",
"plugin:vue/recommended"
],
"env": {
"browser": true,
"node": true
},
rules: {}
}
If any issues remains I would check the eslint-settings in vscode settings.json:
"eslint.enable": true,
"eslint.provideLintTask": true,
"eslint.workingDirectories": ["src"],
"eslint.validate": ["javascript","javascriptreact","vue"],

How to use import with absolute paths with Expo and React Native?

I'm trying to use absolute import paths instead of relative paths with Expo and React Native.
I looked on the expo docs and couldn't find an answer... Searching for the subject in react community I found babel-plugin-module-resolver but it seems that Expo is already using it so I've changed my .babelrc to create some aliases:
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": [
"transform-react-jsx-source",
["module-resolver", {
"root": ["./app"],
"alias": {
"Components": "./app/components",
}
}]
]
}
}
}
But I got the following error:
Unable to resolve module '#expo/vector-icons/glyphmaps/Entypo.json'
from '/Users/eduardoleal/Code/lua/rook/node_modules/#expo/vector-icons/Entypo.js':
Module does not exist in the module map or in these directories: /Users/eduardoleal/Code/lua/rook/node_modules/#expo/vector-icons/node_modules/#expo/vector-icons/glyphmaps , /Users/eduardoleal/Code/lua/rook/node_modules/#expo/vector-icons/glyphmaps This might be related to https://github.com/facebook/react-native/issues/4968 To resolve try the following:
1. Clear watchman watches: 'watchman watch-del-all'.
2. Delete the 'node_modules' folder: 'rm -rf node_modules && npm install'.
3. Reset packager cache: 'rm -fr $TMPDIR/react-*' or 'npm start --reset-cache'.
ABI16_0_0RCTFatal -[ABI16_0_0RCTBatchedBridge stopLoadingWithError:] __34-[ABI16_0_0RCTBatchedBridge start]_block_invoke_2 _dispatch_call_block_and_release _dispatch_client_callout _dispatch_main_queue_callback_4CF __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__ __CFRunLoopRun CFRunLoopRunSpecific GSEventRunModal UIApplicationMain main start 0x0
Is there any easy way to import absolute paths?
Update: Expo v32.0.0 and up
Expo init is creating a babel.config.js for you. Just add the plugins key to your babel.config.js file and add your alias. The env key is not needed anymore.
module.exports = function(api) {
api.cache(true)
return {
presets: ['babel-preset-expo'],
plugins: [
[
'module-resolver',
{
alias: {
assets: './assets',
components: './src/components',
modules: './src/modules',
lib: './src/lib',
types: './src/types',
constants: './src/constants',
},
},
],
],
}
}
Update: Changes for Expo.io SDK v20.0.0
Since SDK v20.0.0 you can use the normal Babel Expo presets
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
},
"plugins": [
["module-resolver", {
"alias": {
"alias-name": "./app",
}
}]
]
}
Expo.io SDK v19.0.0 and before
Without the root-element, separating plugins and changing presets to babel-preset-react-native-stage-0/decorator-support, an alias work for me.
Using Expo.io on Version 16.0.0
Found this in the Expo Forums here: https://forums.expo.io/t/relative-paths-with-expo/654/3
Can you verify that this works on your case too?
{
"presets": ["babel-preset-react-native-stage-0/decorator-support"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
},
"plugins": [
["module-resolver", {
"alias": {
"alias-name": "./app",
}
}]
]
}
For latest expo users(sdk version >= 32).
Just add plugins property in your babel.config.js (find this file in project root directory).
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
[
'module-resolver',
{
alias: {
'alias-name': './src/assets/bla/bla',
},
},
],
],
};
};
In adition to Laszlo Schurg's answer in case someone encounters the same problem with Typescript.
If you are using Typescript you also need to add this in your tsconfig
"compilerOptions": {
...
"baseUrl": ".",
"paths": {
"#src/*": ["./src/*"],
"#assets/*": ["./assets/*"]
}
},
That's my config for this babel.config
plugins: [
...
[
"module-resolver",
{
alias: {
"#assets": "./assets",
"#src": "./src",
},
},
],
],
After a while trying to get this working. I could resolve the problem with de following .babelrc:
{
"presets": ["babel-preset-react-native-stage-0/decorator-support"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
},
"plugins": [
["module-resolver", {
"alias": {
"react-native-vector-icons": "#expo/vector-icons",
"#expo/vector-icons/lib/create-icon-set": "react-native-vector-icons/lib/create-icon-set",
"#expo/vector-icons/lib/icon-button": "react-native-vector-icons/lib/icon-button",
"#expo/vector-icons/lib/create-icon-set-from-fontello": "react-native-vector-icons/lib/create-icon-set-from-fontello",
"#expo/vector-icons/lib/create-icon-set-from-icomoon": "react-native-vector-icons/lib/create-icon-set-from-icomoon",
"#expo/vector-icons/lib/icon-button": "react-native-vector-icons/lib/icon-button",
"#expo/vector-icons/glyphmaps": "react-native-vector-icons/glyphmaps",
"$components": "./app/components",
"$config": "./app/config",
"$helpers": "./app/helpers",
"$navigators": "./app/navigators",
"$reducers": "./app/reducers",
"$screens": "./app/screens",
"$images": "./assets/images",
"$fonts": "./assets/fonts",
"$icons": "./assets/icons",
"$videos": "./assets/videos",
}
}]
]
}
I copied the content of babel-preset-expo to my .babelrc. It's not the best solution... but it works normally.
More details about it here
./src
|- package.json
|- Bar/
| `- index.js
`- Foo.js
package.json
{
"name": "~" // whatever u want
}
then
import { Foo } from "~/Foo";
import { Bar } from "~/Bar";
// ...
I com with this suggestion:
In your tsconfig.json:
<pre>
<code>
{
"compilerOptions": {
"baseUrl": "./app",
"paths": {
"Components": ["components/*"]
}
},
"include": ["app"]
}
</code>
</pre>
And vite.config.ts resolve might look like this:
<pre>
<code>
resolve: {
alias: {
"Components": "app/components",
}
}
</code>
</pre>
Just simple make you .babelrc simple like this:
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
}
}
And import like this:
import Entypo from '#expo/vector-icons/Entypo';