fix forEach undefined error with eslintFormatter

[buihdk]

I ejected my create-react-app and used eslint-loader v3.0.0. When I started the app, I encountered the below issue: TypeError: Cannot read property 'forEach' of undefined.

This PR is to fix this issue.

[facebook-github-bot]

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

[ianschmitz]

This doesn't seem like the right fix. Do we know why results is undefined?

[zhyuri]

I met the same error on my local machine. Considering no issue is linked to this PR, I'd like to privde my datapoint in the comment below.

[Env]

• macOS 10.14.5
• Yarn v1.17.3 and 2.0.0-rc.6
• react-scripts 3.1.2

[Process]

• I created an app with the following cli yarn create react-app temp-web --use-pnp --typescript.
• Everything worked perfectly, e.g. yarn start, yarn build.
• Then I decided to swtich to Yarn v2(berry) in the current workspace by running yarn policies set-version v2.
• After running yarn install again, I'm seeing this error

  ./src/index.tsx
  TypeError: Cannot read property 'forEach' of undefined
  

• Both yarn build and yarn start failed with the same error. Even if I comment out everything in this file.
• I didn't eject the react-scripts, so I'm not seeing the other stack in the screen cast above.

[Note]

• I tried create new react app with Yarn v2 directly by running yarn dlx create-react-app temp-web. Because the dlx doesn't accept additional flags, I couldn't create an app with pnp, typescript enabled. Everything works as expected in this example.
• I traced the code all the way up to the cacheLoader.js in webpack and found my cache file in node_modules/.cache/eslint-loader. The content of the .json.gz is a JSON which only contains a key src and its value. I compared the cache file of the same location in a brand new project created by Yarn V1 with PnP&TS enabled, that one has the key result. The missing result in my cache file must be the culprit of this issue.

Please let me know if there is any information you need.
Thank you for all the hard working in this extremely helpful tool!

[buihdk]

This doesn't seem like the right fix. Do we know why results is undefined?

it's a bug from eslint-loader which I also made a PR to fix it here webpack-contrib/eslint-loader#294

[zhyuri]

Although I'm also blocked by this issue, I don't think this is the right fix. In fact, the PR will cover the real reason why result is undefined.

If you add an option emitError: true, and disable cache for eslint-loader in webpack.config.js, you can find the following errors while runing yarn run build.

Creating an optimized production build...
Failed to compile.

./src/index.tsx
Failed to load plugin '@typescript-eslint' declared in 'package.json » eslint-config-react-app#overrides[0]': A package is trying to access a peer dependency that should be provided by its direct ancestor but isn't

Required package: typescript (via "typescript")
Required by: tsutils@virtual:3c440359d9d3115c08c3a398b84de19b3d201b989e57d15d9aa0d669873c70955e9abfa7b919d233542ae201d880e1709cf194f6587691e56dd33404d415b0cc#npm:3.17.1 (via ABSOLUTE_PATH_FOR_THE_PROJECT/.yarn/virtual/tsutils-virtual-9a54cea48d/0/cache/tsutils-npm-3.17.1-ed6df1e57e.zip/node_modules/tsutils/typeguard/2.8/node.js)

I saw the same error while running yarn eslint src/index.tsx.

The temporary workaround is making eslint-loader ignore tsx file by updating the config like this,

# old
test: /\.(js|mjs|jsx|ts|tsx)$/,
# new
test: /\.(js|mjs|jsx|ts)$/,

I think the root cause could be related to PnP & TypeScript & es-lint.
Will add more information once I find any.

[zhyuri]

The root cause is in the warning message while runing yarn install.

@typescript-eslint/eslint-plugin@npm:2.3.1 [03569] doesn't provide typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta requested by tsutils@npm:3.17.1

Both react-scripts and typescript-eslint/eslint-plugin don't have typescript as their peer dependency. After applying the workaround in this PR. The issue can be fixed.

[buihdk]

It seems like this isn't the right fix after further investigation.

By adding emitError: true to webpack config, I was able to figure out the root cause of my issue and it's totally different with @zhyuri's. Therefore, I will close this PR.

Thanks all!

[fourteenmeister]

I was able to figure out the root cause of my issue

@buihdk, What was the problem in the end?

[buihdk]

@buihdk, What was the problem in the end?

Just add emitError: true or emitWarning: true to eslint-loader in webpack config and fix all the eslint issues.

[petetnt]

This should fix the issue right? #7754