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

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.

[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]

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