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
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"]
}
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"
]
},
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']
}
}
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"],
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';