eslintconfig-react-app conflict

[marsh73]

I'm trying to migrate our production build file from rules_nodejs to rules_js. As part of the effort I have switched to pnpm locally to try and match what rules_js is using...

I had some issues with eslint not recognizing rule definitions

So i cloned your react-cra example... removed the eslintrc.json file and added the following to the package.json which is i think what cra offers out of the box.

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },

I added the packages i needed to my package.json

and updated the RUNTIME_DEPS in my BUILD.bazel to reflect those..

_RUNTIME_DEPS = [
    "static_files",
    ":node_modules/react",
    ":node_modules/@babel/core",
    ":node_modules/@babel/plugin-syntax-flow",
    ":node_modules/@babel/plugin-transform-react-jsx",
    ":node_modules/@testing-library/dom",
    ":node_modules/@typescript-eslint/eslint-plugin",
    ":node_modules/@typescript-eslint/parser",
    ":node_modules/eslint",
    ":node_modules/eslint-config-react-app",
    ":node_modules/react-dom",
]

and I keep getting this same conflict ..."[eslint] Plugin "react" was conflicted between "package.json » eslint-config-react-app"

[eslint] Plugin "react" was conflicted between "package.json » eslint-config-react-app » /private/var/tmp/_bazel_justinmarshall/e3ec2f35ce98c09a553050c3371432ff/sandbox/darwin-sandbox/2599/execroot/__main__/bazel-out/darwin_arm64-fastbuild/bin/node_modules/.aspect_rules_js/[email protected]_yb56dfblm53quj7sguskh7xpzy/node_modules/eslint-config-react-app/base.js" and "BaseConfig » /private/var/tmp/_bazel_justinmarshall/e3ec2f35ce98c09a553050c3371432ff/sandbox/darwin-sandbox/2599/execroot/__main__/bazel-out/darwin_arm64-opt-exec-2B5CBBC6/bin/build__js_binary.sh.runfiles/__main__/node_modules/.aspect_rules_js/[email protected]_lhzkulmgea7fraexkxve7kjooe/node_modules/eslint-config-react-app/base.js".

I wondering if you had to create the eslintrc.json file in order for this to work... or if you have any idea why this conflict might be happening?

[marsh73]

FYI... asked a related question in the bazel slack and it seems that there is some known weirdness with how react-scripts calls eslint under the hood.

[alexeagle]

I expect this will be resolved by https://github.com/aspect-build/rules_js/pull/564

@marsh73 do you mind verifying after the next release?

[gregmagolan]

This should all be working no with the latest rules_js release. react-cra example has it all wired up:

https://github.com/aspect-build/bazel-examples/blob/1f21299f0eaf526fc9ed2378f7beb9e2b0b501a2/react-cra/package.json#L28

  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },

and https://github.com/aspect-build/bazel-examples/blob/1f21299f0eaf526fc9ed2378f7beb9e2b0b501a2/react-cra/src/BUILD.bazel#L75

eslint_bin.eslint_test(
    name = "eslint_test",
    args = ["{}/{}".format(
        package_name(),
        p,
    ) for p in SRC_PATTERNS],
    data = [
        "//:package_json",
        "//:node_modules/eslint-config-react-app",
    ] + glob(SRC_PATTERNS),
)