Getting Support for the experimental syntax 'jsx' isn't currently enabled in my index file even after adding babel and adding it to packages

Question

I've created a react application, in that I added router-dom, then I made the changes according to the document provided by router-router-dom, but then i ended up getting

    index.js: Support for the experimental syntax 'jsx' isn't currently enabled (10:5):
     8 | const root = ReactDOM.createRoot(document.getElementById('root'));
       9 | root.render(
    > 10 |     <React.StrictMode>
         |     ^
      11 |         <BrowserRouter>
      12 |             <App />
      13 |         </BrowserRouter>

Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing.

Now I installed these dependencies and added it to my packages.json file and created a babel.config.json inside the root, but I'm still getting the above error when I compile, any help would be appreciated

Answer 1

我使用 Visual Studio 2022 创建了这个项目，当我切换到 npm 时它运行良好，我不确定问题出在哪里，但我假设项目设置在 Visual Studio 上存在一些问题