missing dependency `eslint-config-react-app`?

[peterthim]

trafficstars

Current Behavior

after updating in our monorepo we found that tsdx failed on:

tsdx lint src 

(node:82469) UnhandledPromiseRejectionWarning: Error: Failed to load config "react-app" to extend from.
Referenced from: BaseConfig
    at configMissingError (/XXXXX/node_modules/eslint/lib/cli-engine/config-array-factory.js:233:9)
    at ConfigArrayFactory._loadExtendedShareableConfig (//XXXXX/node_modules/eslint/lib/cli-engine/config-array-factory.js:712:23)
    at ConfigArrayFactory._loadExtends (/XXXXX/node_modules/eslint/lib/cli-engine/config-array-factory.js:617:25)
    at ConfigArrayFactory._normalizeObjectConfigDataBody (/XXXXX/node_modules/eslint/lib/cli-engine/config-array-factory.js:547:25)
    at _normalizeObjectConfigDataBody.next (<anonymous>)
    at ConfigArrayFactory._normalizeObjectConfigData (/XXXXX/node_modules/eslint/lib/cli-engine/config-array-factory.js:491:20)
    at _normalizeObjectConfigData.next (<anonymous>)
    at createConfigArray (/XXXXX/node_modules/eslint/lib/cli-engine/config-array-factory.js:307:25)
    at ConfigArrayFactory.create (/XXXXX/node_modules/eslint/lib/cli-engine/config-array-factory.js:362:16)
    at createBaseConfigArray (/XXXXX/node_modules/eslint/lib/cli-engine/cascading-config-array-factory.js:84:48)
(node:82469) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:82469) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
✨  Done in 0.94s.

After digging though both tsdx and eslint to figure out what went wrong i found that if i add eslint-config-react-app to the project it worked npm install --save-dev eslint-config-react-app

now the project is a NONE react project and a really small helper project. It seems to me that tsdx is missing its sub requirement for linting.

Software	Version(s)
TSDX	0.12.1
TypeScript	3.4.5
Browser	NA
npm/Yarn	Yarn 1.21.1
Node	10.17.0
Operating System	MacOS

[swyxio]

changed the title to reflect this. PR welcome

[fullstackwebdev]

Hi yes, this just started failing after a recent rm -rf node_modules and npm install. Something happened.

npm install --save-dev eslint-config-react-app did not fix my problem.

[swyxio]

@fullstackwebdev oh dear. mind investigating further please? or file a different issue and link to this one since i'm not sure you have the exact same issue

[agilgur5]

I'm configuring tsdx lint for one of my libraries for the first time right now and I didn't get the error that eslint-config-react-app didn't exist, but that eslint-plugin-react and eslint-plugin-import didn't exist.

ESLint appears to require these to be installed in your project even if a dependency (like TSDX) installs them already, which is pretty tedious for certain things.

[kylemh]

(node:44162) UnhandledPromiseRejectionWarning: Error: Failed to load plugin 'prettier' declared in 'BaseConfig': Cannot find module 'eslint-plugin-prettier'
Require stack:
- /Users/kyleholmberg/Code/@innocuous/components/__placeholder__.js
Referenced from: BaseConfig

is this the same problem?

I think we can avoid this issue with creating a TSDX preset, as mentioned in #634

[agilgur5]

Yea that's probably the same root problem. A "shareable config" would still have the same issue -- the longstanding https://github.com/eslint/eslint/issues/3458 is the root of all this I'm pretty sure. I think the "plugin and config" workaround mentioned there would work as a proper "preset" as it would do both, but not totally sure. resolve-plugins-relative-to might help here as well but I think that would only work if you don't use any plugins relative to your own project root. Not sure either.

[zhaoyao91]

If you are using a monorepo with yarn workspace, try applying nohoist on tsdx

  "workspaces": {
    "packages": [ ...],
    "nohoist": [
      "**/tsdx",
      "**/tsdx/**"
    ]
  },

see https://classic.yarnpkg.com/blog/2018/02/15/nohoist/

[ryands17]

Yea that's probably the same root problem. A "shareable config" would still have the same issue -- the longstanding eslint/eslint#3458 is the root of all this I'm pretty sure. I think the "plugin and config" workaround mentioned there would work as a proper "preset" as it would do both, but not totally sure. resolve-plugins-relative-to might help here as well but I think that would only work if you don't use any plugins relative to your own project root. Not sure either.

I think this issue is related as well: On running yarn lint, this error is generated:

I guess as eslint-config-prettier is not in the root node_modules, eslint fails to find it. Manually installing eslint-config-prettier removes the error.

[an-parubets]

I faced similar problem. I have fix the error after installing follow packages

@typescript-eslint/eslint-plugin
@typescript-eslint/parser
eslint
eslint-config-prettier
eslint-config-react-app
eslint-plugin-flowtype
eslint-plugin-import
eslint-plugin-jsx-a11y
eslint-plugin-prettier
eslint-plugin-react
eslint-plugin-react-hooks

[karlhorky]

Yeah this issue also bit me just now.

The problem occurs because as soon as a different eslint is installed (eg. the current version, 7.17.0), the other version inside tsdx is reorganized inside of <project dir>/node_modules/tsdx/node_modules. This version of ESLint cannot resolve the configs, plugins, etc. because of ESLint's unique resolution algorithm.

I guess if tsdx wants to keep the dependency on eslint, it could instead running the version at <project dir>/node_modules/eslint - which would either run the version from tsdx or the user's version.

What do you think @sw-yx ?

$ yarn lint
yarn run v1.22.10
warning ../package.json: No license field
$ tsdx lint
Defaulting to "tsdx lint src test"
You can override this in the package.json scripts, like "lint": "tsdx lint src otherDir"
/Users/k/projects/upleveled/node_modules/tsdx/node_modules/eslint/lib/cli-engine/config-array-factory.js:265
        new Error(`Failed to load config "${configName}" to extend from.`),
        ^

Error: Failed to load config "prettier/@typescript-eslint" to extend from.
Referenced from: BaseConfig
    at configMissingError (/Users/k/projects/upleveled/node_modules/tsdx/node_modules/eslint/lib/cli-engine/config-array-factory.js:265:9)
    at ConfigArrayFactory._loadExtendedShareableConfig (/Users/k/projects/upleveled/node_modules/tsdx/node_modules/eslint/lib/cli-engine/config-array-factory.js:826:23)
    at ConfigArrayFactory._loadExtends (/Users/k/projects/upleveled/node_modules/tsdx/node_modules/eslint/lib/cli-engine/config-array-factory.js:731:25)
    at ConfigArrayFactory._normalizeObjectConfigDataBody (/Users/k/projects/upleveled/node_modules/tsdx/node_modules/eslint/lib/cli-engine/config-array-factory.js:660:25)
    at _normalizeObjectConfigDataBody.next (<anonymous>)
    at ConfigArrayFactory._normalizeObjectConfigData (/Users/k/projects/upleveled/node_modules/tsdx/node_modules/eslint/lib/cli-engine/config-array-factory.js:596:20)
    at _normalizeObjectConfigData.next (<anonymous>)
    at createConfigArray (/Users/k/projects/upleveled/node_modules/tsdx/node_modules/eslint/lib/cli-engine/config-array-factory.js:340:25)
    at ConfigArrayFactory.create (/Users/k/projects/upleveled/node_modules/tsdx/node_modules/eslint/lib/cli-engine/config-array-factory.js:395:16)
    at createBaseConfigArray (/Users/k/projects/upleveled/node_modules/tsdx/node_modules/eslint/lib/cli-engine/cascading-config-array-factory.js:86:48) {
  messageTemplate: 'extend-config-missing',
  messageData: { configName: 'prettier/@typescript-eslint', importerName: '' }
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[karlhorky]

A workaround that I am using for now is to use Yarn resolutions in package.json as such to force tsdx to also resolve eslint to 7.17.0:

{
  "devDependencies": {
    "eslint": "7.17.0"
  },
  "resolutions": {
    "eslint": "7.17.0"
  }
}

Edit: This should also work with npm Overrides.

[agilgur5]

@karlhorky yea resolutions are the best way to workaround this if you're installing an incompatible version. It is indeed because of the node_modules directory/sub-directory placement like you wrote, and resolutions override that.

My plan with Presets (#634 ) was also to make it possible to opt-out of pieces of TSDX

[karlhorky]

Nice, yeah I guess Presets would also get the job done in a different way.

What are your thoughts on changing the eslint import path in index.ts in the meantime? Just so that people don't need to fiddle with resolutions...

[rochapablo]

Any update on this? I tried "eslint": "7.17.0" but did not work

[joaogarin]

Same. also not really being able to get pass this, only ran into this today though. looks like other people ran into it much sooner.

Adding the resolution to eslint": "7.17.0 also doesn't seem to really do it for me unfortunately so not sure about the "solution: workaround available" tag still applies here?

[temurih]

Same issue: Error: Failed to load plugin 'prettier' declared in 'BaseConfig': Cannot find module 'eslint-plugin-prettier'

Installing eslint-plugin-prettier did not help either.

[agriverae]

I added this particular version eslint-plugin-prettier and the problem seems to be fixed "eslint-plugin-prettier": "3.4.1"

[ayush-seth]

any updates on this? Facing the same issue

[thomashagstrom]

This setup works, I use it all the time for my repos @ayush-seth https://github.com/thomashagstrom/npm-github-react-native

[SAURABHCED786]

npm -f i eslint-config-react-app

when i run this command then it's resolved

[Victor-Ifeel]

Facing same problem here , im stuck in the "TypeError [ERR_INVALID_ARG_VALUE]: Failed to load plugin 'prettier' declared in 'BaseConfig': The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received '' Referenced from: BaseConfig" after changing

This is my current package.json

{ "type": "module", "module": "./dist/types.esm.js", "main": "./dist/types.esm.js", "types": "./dist/index.d.ts", "exports": { ".": { "import": "./dist/types.esm.js" } }, "files": [ "dist/" ], "engines": { "node": ">=16" }, "scripts": { "clean": "rimraf src/types/index.ts", "start": "tsdx watch", "build": "npm run create-index && tsdx build --format esm", "test": "tsdx test", "lint": "tsdx lint", "prepare": "npm run build", "size": "size-limit", "analyze": "size-limit --why", "create-index": "npm run clean && node ./scripts/create-index.cjs", "lintsrc": "tsdx lint ./.eslintrc.js" }, "peerDependencies": { "react": "^18.2.0" }, "husky": { "hooks": { "pre-commit": "tsdx lint" } }, "prettier": { "printWidth": 80, "semi": true, "singleQuote": true, "trailingComma": "es5" }, "size-limit": [ { "path": "dist/ifeel-types.esm.js", "limit": "10 KB" } ], "devDependencies": { "@size-limit/preset-small-lib": "^8.2.4", "@types/node": "^18.7.6", "@types/react": "^18.0.37", "@typescript-eslint/eslint-plugin": "^5.34.0", "@typescript-eslint/parser": "^5.34.0", "autoprefixer": "^10.4.14", "eslint": "^8.2.0", "eslint-config-prettier": "^7.2.0", "eslint-config-react-app": "^7.0.1", "eslint-plugin-import": "^2.25.3", "eslint-plugin-jsx-a11y": "^6.5.1", "eslint-plugin-prettier": "3.4.1", "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-simple-import-sort": "^7.0.0", "husky": "^8.0.3", "react": "^18.2.0", "rimraf": "^3.0.2", "size-limit": "^8.2.4", "tsdx": "^0.14.1", "tslib": "^2.5.0", "typescript": "^5.0.4" } }