Uncaught TypeError: react_dom_client__WEBPACK_IMPORTED_MODULE_1__ is not a function

Uncaught TypeError: react_dom_client__WEBPACK_IMPORTED_MODULE_1__ is not a function

I got this error while working on React app. I was working on Microfrontend React app and got this issue. In this post we will see how we can resolve this issue.

Solution:

Add createRoot in curly braces like this import { createRoot } from 'react-dom/client';

                    
                                import React from 'react';
                                import App from './App';
                                import { createRoot } from 'react-dom/client';
                                import './index.css';
                                import reportWebVitals from './reportWebVitals';
                    
                                const root = createRoot(document.getElementById('root'));
                    
                                root.render(<App />);
                                .
                                .
                                .
                                reportWebVitals();
                    

Why curly braces?

Because the library react-dom/client has so many exports things, it could be modules/variables/functions and all are exported in same file. So you need to define what you want among all the exported things and thats why you need to import them in curly braces. In the above codes, we only imported one, so there was only createRoot in curly braces you can have many things in curly braces.