Why there is there an error when using React strict mode?

Question

React newbie here

I got this error:

TypeError: Cannot read property 'StrictMode' of undefined

I think this is because re 'React.StrictMode' React is not defined. When commenting out the two lines mentioning React.StrictMode the code works fine. Doing some experimenting, I found that the issue is with the import.

import {React, useState} from 'react'; does not import React causing it to be undefined and error with this part of the code:

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Doing this:

import React from 'react';
import {useState} from 'react';

is fine.

I'm wondering why the first method doesn't work

Thanks for your help!

React is default export so you annot import it like import {React, useState} from 'react' import like this import React,{ useState} from 'react' — Sayog
– Sayog, Commented Mar 4, 2021 at 17:37

Avinash Ravi · Accepted Answer · 2021-03-04 17:50:13Z

2

React is a default export ( export statement looks like this - export default react). If it is default export then it should be imported like this import React from 'react'

useState is not default export ( export statement will be like - export useState;). If it is not default export then it should be imported like this import {useState} from 'react';

For more detailed explanation this blog will help https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

answered Mar 4, 2021 at 17:50

Avinash Ravi

7416 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why there is there an error when using React strict mode?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related