Question posted in 
I’ve added react-native-reanimated to my react-native project. The animations run fine but my eslint is giving errors when run using cli or on github workflow.
error Resolve error: Cannot find module
‘/myAppPath/node_modules/react-native-reanimated/lib/module/index’.
Please verify that the package.json has a valid "main" entry
at tryPackage (node:internal/modules/cjs/loader:438:19)
at Module._findPath (node:internal/modules/cjs/loader:680:18)
at findModulePath (/myAppPath/node_modules/eslint-import-resolver-alias/index.js:99:27)
at exports.resolve (/myAppPath/node_modules/eslint-import-resolver-alias/index.js:75:10)
at withResolver (/myAppPath/node_modules/eslint-module-utils/resolve.js:121:23)
at fullResolve (/myAppPath/node_modules/eslint-module-utils/resolve.js:142:22)
at relative (/myAppPath/node_modules/eslint-module-utils/resolve.js:158:10)
at resolve (/myAppPath/node_modules/eslint-module-utils/resolve.js:232:12)
at resolveImportType (/myAppPath/node_modules/eslint-plugin-import/lib/core/importType.js:127:2924)
at computeRank (/myAppPath/node_modules/eslint-plugin-import/lib/rules/order.js:378:43)
Even adding a single import causes similar errors The errors are gone if i comment all the imports from react-native-reanimated.
This is my eslintrc.json file
{
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"useJSXTextNode": true,
"project": "./tsconfig.json",
"ecmaVersion": 2023
},
"extends": [
"@react-native-community",
"plugin:react/recommended",
"plugin:react-native/all",
"plugin:import/recommended",
"eslint:recommended",
"airbnb",
"airbnb/hooks",
"prettier"
],
"plugins": [
"react",
"react-native",
"import",
"prettier",
"@typescript-eslint"
],
"root": true,
"rules": {
"import/extensions": [
"error",
"ignorePackages",
{
"js": "never",
"jsx": "never",
"ts": "never",
"tsx": "never"
}
],
"@typescript-eslint/no-unused-vars": [
"error",
{
"argsIgnorePattern": "^_"
}
],
"react/no-array-index-key": "off",
"consistent-return": "off",
"import/no-extraneous-dependencies": "off",
"import/order": [
"error",
{
"alphabetize": {
"caseInsensitive": true,
"order": "asc"
},
"groups": [
"builtin",
"external",
"internal",
"sibling",
"parent",
"index"
],
"pathGroups": [
{
"group": "builtin",
"pattern": "react-native",
"position": "before"
},
{
"group": "builtin",
"pattern": "react",
"position": "before"
}
],
"pathGroupsExcludedImportTypes": [
"react",
"react-native"
]
}
],
"import/prefer-default-export": "off",
"no-console": "off",
"no-nested-ternary": "off",
"no-plusplus": "off",
"no-shadow": "off",
"no-use-before-define": [
"error",
{
"classes": true,
"functions": true,
"variables": false
}
],
"react-hooks/exhaustive-deps": "off",
"react-native/no-color-literals": "off",
"react-native/no-inline-styles": "warn",
"react-native/no-raw-text": "off",
"react-native/split-platform-components": "off",
"react/function-component-definition": [
"error",
{
"namedComponents": [
"arrow-function",
"function-declaration"
]
}
],
"react/jsx-filename-extension": [
"warn",
{
"extensions": [
".jsx",
".tsx"
]
}
],
"react/jsx-no-constructed-context-values": "off",
"react/jsx-props-no-spreading": "off",
"react/prop-types": "off",
"react/react-in-jsx-scope": "off",
"react/require-default-props": "off",
"react/no-unused-prop-types": "off"
},
"overrides": [
{
"files": [
"./src/store/**"
],
"rules": {
"no-param-reassign": "off",
"camelcase": "off"
}
}
],
"settings": {
"import/resolver": {
"alias": {
"extensions": [
".ts",
".tsx"
],
"map": [
[
"@src",
"./src"
],
[
"@components",
"./src/components"
],
[
"@screens",
"./src/screens"
],
[
"@assets",
"./assets"
]
]
}
}
}
}
This is my tsconfig.json file:
{
"include": [
"custom.d.ts",
"src/**/*",
"index.ts",
"nativewind-env.d.ts",
"assets/**/*.ts",
"react-native.config.js"
],
"exclude": [
"__tests__/" // exclude test files
],
"compilerOptions": {
/* Visit https://aka.ms/tsconfig to read more about this file */
"baseUrl": "./",
"paths": {
"@components/*": [
"./src/components/*"
],
"@screens/*": [
"./src/screens/*"
],
"@src/*": [
"./src/*"
],
"@assets/*": [
"./assets/*"
],
},
/* Basic Options */
"target": "ES6",
"jsx": "react-jsx",
"module": "commonjs",
"allowJs": true,
"resolveJsonModule": true,
"noEmit": true,
"skipLibCheck": true,
/* Strict Type-Checking Options */
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictPropertyInitialization": true,
"noImplicitThis": true,
"alwaysStrict": true,
/* Additional Checks */
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": false,
"noFallthroughCasesInSwitch": true,
/* Module Resolution Options */
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true
},
}
Tried re-installing the package, removing and installing node_modules, removing yarn.lock and run yarn again. None of these has helped to fix this error
2
Answers
I was able to resolve this issue by replacing the "settings":{"import/resolver"} section with tsconfig as follows
Seems like for typescript we have to simply pass the tsconfig for using aliases instead of redefining them in eslint file
Try these commands and check it will work or not. Check the version of react-native-reanimated sometime version are not compatible with our code.
I’m using "react-native-reanimated": "^3.12.0" working fine.
Install the library
npm install react-native-reanimated
or
yarn add react-native-reanimated
Clear npm/yarn cache and reinstall dependencies
npm cache clean –force
Reset Metro Bundler cache
npx react-native start –reset-cache
Link package for older React Native versions
react-native link react-native-reanimated