Post CRA v5 Update - App Broken

[neillindberg]

After udating an existing project to create-react-app version 5 my project fails to compile with:
Failed to load plugin 'testing-library' declared in '.eslintrc': Class extends value undefined is not a constructor or null

My .eslintrc looks like this (sans rules and import/resolver setttings):

  "extends": [
    "react-app",
    "airbnb",
    "plugin:jsx-a11y/recommended",
    "plugin:testing-library/react",
    "plugin:jest-dom/recommended"
  ],
  "plugins": ["jsx-a11y", "testing-library", "jest-dom"],

And, my dev dependencies like this:

"devDependencies": {
    "@testing-library/jest-dom": "5.16.0",
    "@testing-library/react": "^12.1.2",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "2.25.3",
    "eslint-plugin-jest-dom": "^3.9.2",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "7.28.0",
    "eslint-plugin-testing-library": "4.12.4",
    "http-proxy-middleware": "^2.0.1",
    "jest-canvas-mock": "^2.3.1"
},

So to squash the error I found I had to install eslint-plugin-testing-library.

But, what is unclear to me is with this library do I uninstall the two @testing-library entries in my dev dependencies?

Following the documentation here I had adjusted my .eslintrc, moving the extends entry "plugin:testing-library/react" to an "overrides", just exactly as outlined in the docs here on the github for eslint-plugin-testing-library:

  "extends": [
    "react-app",
    "airbnb",
    "plugin:jsx-a11y/recommended",
    "plugin:jest-dom/recommended"
  ],
  "plugins": ["jsx-a11y", "testing-library", "jest-dom"],
  "overrides": [
    {
      // 3) Now we enable eslint-plugin-testing-library rules or preset only for matching files!
      "files": ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"],
      "extends": ["plugin:testing-library/react"]
    }
  ],

But, now I'm back to the error I was getting in the beginning, except the location is in the overrides block instead of at the root of my .eslintrc:
ERROR in Failed to load plugin 'testing-library' declared in '.eslintrc#overrides[0]': Class extends value undefined is not a constructor or null
Referenced from: ...path ommitted.. /.eslintrc

What am I missing? Do I want to uninstall the older @testing-library entries? BTW, if I do that I get the same errror, but in using this package do I want to uninstall the others, regardless of the error I'm getting?

I can't find anything on StackOverflow around this so here I am.

Thanks for any good direction,

Neil

[Belco90]

Hi @neillindberg. This would be easier to investigate with some repo debug, but I'll do my best.

First of all, if you are using CRA, you shouldn't need to install all the ESLint plugins or Testing Library manually since they are included in CRA. Actually, installing ESLint plugins manually could lead you to have 2 different lint results so be careful with that.

Anyway, CRA v5 relies on eslint-plugin-testing-library v5, so you shouldn't need to update your ESLint config but install the latest version of the plugin in your codebase:
npm i -D eslint-plugin-testing-library@latest

Let me know if this helps to solve your problem.

[neillindberg]

@Belco90 Thank you for the response. I followed your instruction, and also installed buffer per start script feedback. I still couldn't compile fully. I had to add the DISABLE_ESLINT_PLUGIN=true to .env, per your SO post. That got me running w/o errors, but a giant stack of warnings all stating, "Failed to parse source map..."
Thanks again. Any further insight would be wonderful!

[Belco90]

I'd be glad to investigate deeper, but I need some repo to be able to take a look.

[neillindberg]

Thank you for the offer. This particular app is definitely not one I can make public.
It seems others are seeing the same warnings.
facebook/create-react-app#11767
Thanks again.

[Belco90]

It seems like it's related to CRA itself and has nothing to do with eslint-plugin-testing-library then.