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
I was able to resolve this issue by replacing the "settings":{"import/resolver"} section with tsconfig as follows
"settings": {
"import/resolver": {
"typescript": {
"project": [
"./tsconfig.json"
]
}
}
}
Seems like for typescript we have to simply pass the tsconfig for using aliases instead of redefining them in eslint file