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
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"]
}
In #vue/cli 4.0.5 app I want to add no-unused-vars errors(both in app and in phpstorm )
and I added this option in .eslintrc.js, which contains:
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
rules: {
'no-console': 'error',
'no-debugger': 'error',
"no-unused-vars": "error",
'no-undef': "error",
},
parserOptions: {
parser: 'babel-eslint'
}
}
But I di not see no-unused-vars errors event I restart yarn server.
Are there some other options ?
Thanks!
I don't know how your configurations are set, but you can always add the eslintConfig on package.json file, like this:
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"rules": {
"no-unused-vars": "error"
}
}
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']
}
}
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';