React Hook "useBabelRc" cannot be called at the top level

[ndrean]

Following "Minimize bundle size" guide with my CRA (option 2 with babel-plugin-import), I get a red warning in VSCode on override(useBabelRc())within the file config-overrides.js, but no compilation error.

"React Hook "useBabelRc" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function".

However, I can access any of the components, the ThemeProvider to pass the dark mode works.

When building the code, I have a bundle size of 104kB. Not sure what it should be.

• [ x] The issue is present in the latest release.
• [x ] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

VSCode red warning and no compilation error.

Expected Behavior 🤔

No warning with VSCode.

Steps to Reproduce 🕹

• yarn add -D babel-plugin-import
• create & copy the file .babelrc.js from the doc in root folder
• yarn add -D react-app-rewired customize-cra
• create & copy config-overrides.js in root folder
  => red warning override(useBabelRC())
• package.json: script.start: react-app--rewired start => no compilation error

My code & package.json
https://github.com/ndrean/navbar where you can check the settings.

Steps:

Context 🔦

Drying code with import { Button, TextField } from '@material-ui/core';.

Your Environment 🌎

`npx @material-ui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @material-ui/envinfo` goes here.

[mnajdova]

@ndrean can you please create a small repro with just the changes related to the problem you are facing? It's a bit hard to follow how to reproduce at this moment. A simple create react app, with just your config and a page that imports some MUI component should be enough.

[ndrean]

Thanks. I joined 2 examples.

1. the github repo so you can open it in codesandbox by adding "box" after "github":

• from https://github.com/ndrean/navbar do:
• https://githubbox.com/ndrean/navbar

and you will see the problem in the "config-overrides.js".

I tested another editor, Atom, and it displays the same error. I hope you can visualize the pb.

2. simple fork from your template with the same problem. I don't see what is wrong.
   https://codesandbox.io/s/material-ui-issue-forked-5p2fu?file=/config-overrrides.js

[mnajdova]

I'd say you should just suppress that eslint error in the config-overrides-.js file. Based on the documentation this is the correct usage, to it should be safe.

https://codesandbox.io/s/material-ui-issue-forked-q5g1n?file=/config-overrides.js:0-48

[ndrean]

Yes, as mentioned, with or without the flag "eslint-disable react-hooks", it seems to works as I can use the one-liner multiple import argument. Most probably not related to MUI I believe.

[mnajdova]

Yeah, I would say is not related to MUI anyhow. Feel free to close the issue if there isn't anything else :)