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 🌎

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