TypeError: Cannot read properties of null (reading 'useContext') #5937

Devmond · 2024-02-24T21:43:24Z

Devmond
Feb 24, 2024

Hi All, any idea why I can't get past the error noted in the title?

Please no probing about "why" I am or I am not doing x...only need help with the error :)

Full code:

<!DOCTYPE html>
<html>
<head>

  <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>  
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>

  <!-- Load Babel -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js" crossorigin></script>

  <script type="module"> 

    import * as adobereactSpectrum from 'https://esm.run/@adobe/react-spectrum';
    window.adobereactSpectrum = adobereactSpectrum;  
  </script>
  </head>
     <body>
        <div id="app" data-role="mount-element"></div>

  <script type="text/babel">

var SolventReactJSAppStructure ='function';

var SolventReactMainAppMountElementId ='app';

var SolventReactMainApp = null;

function SolventReactMainAppComponent(props){


		let 		[firstName,setFirstName]=React.useState("Edmond"),
		[lastName,setLastName]=React.useState("K"),
		[test,setTest]=React.useState({}),
		[selected,setSelected]=React.useState(false);


let state = {
get firstName(){
 return firstName; 
},
get lastName(){
 return lastName; 
},
get test(){
 return test; 
},
get selected(){
 return selected; 
}};

	let solventJSXOut = (
<Provider theme={defaultTheme}   colorScheme={selected ? "light" : "dark"} height="100%"><ButtonGroup></ButtonGroup></Provider>
	);
	return solventJSXOut;
}

  window.addEventListener('load', function(){
       for(let c in window.adobereactSpectrum)
           window[c] = window.adobereactSpectrum[c];

        SolventReactMainApp = ReactDOM.createRoot(document.getElementById(SolventReactMainAppMountElementId));
        SolventReactMainApp.render(<SolventReactMainAppComponent/>);    
  });

  </script>
  </body>
</html>

Answered by Devmond

Feb 25, 2024

I can confirm that the issue is due to duplicate inclusions of react and react-dom in the bundle and the web page.

I went through the exercise of bundling with webpack and following the suggestions here , ie by adding this to the webpack config the issue went away:

externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
}

View full answer

snowystinger · 2024-02-25T01:08:47Z

snowystinger
Feb 25, 2024
Maintainer

Can you include the stacktrace as plain text either here or on a github gist or some place where I do not need to download it to my computer?

We have not tested anything with esm.run, however, usually the error that you're getting is because multiple copies of a package have been included in your build and so there are more than one copies of a Context object which will not work for React.

5 replies

Devmond Feb 25, 2024
Author

@snowystinger

here is the trace
react-dom.production.min.js:121 TypeError: Cannot read properties of null (reading 'useContext')
at t.useContext (react.production.min.js:24:118)
at N (Provider.tsx:199:10)
at E (Provider.tsx:37:21)
at of (react-dom.production.min.js:109:301)
at ni (react-dom.production.min.js:123:490)
at Rk (react-dom.production.min.js:254:168)
at Si (react-dom.production.min.js:195:185)
at Pk (react-dom.production.min.js:195:116)
at Nd (react-dom.production.min.js:194:492)
at Qf (react-dom.production.min.js:187:439)
at Oi (react-dom.production.min.js:185:400)
at S (react.production.min.js:17:25)
at MessagePort.U (react.production.min.js:21:60)

Devmond Feb 25, 2024
Author

I get same response with the react-dom.development.js, if a stack trace from that is more helpful i can provide it.

snowystinger Feb 25, 2024
Maintainer

If it's pretty much the same, then it's not very helpful unfortunately.
I do not know much about esm.run, I'll ask in the core team if anyone knows more. But my instinct would be to verify if you have somehow pulled in multiple copies of any packages. You might be able to check in the network tab
I looked at https://cdn.jsdelivr.net/npm/@adobe/react-spectrum/+esm and I just don't know how it handles things like range dependencies.

linking your previous discussion here as well just so I remember it's the same person #5899

Devmond Feb 25, 2024
Author

I can confirm that the issue is due to duplicate inclusions of react and react-dom in the bundle and the web page.

I went through the exercise of bundling with webpack and following the suggestions here , ie by adding this to the webpack config the issue went away:

externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
}

Answer selected by snowystinger

snowystinger Feb 25, 2024
Maintainer

wonderful, glad to hear you could figure it out!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TypeError: Cannot read properties of null (reading 'useContext') #5937

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 5 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

TypeError: Cannot read properties of null (reading 'useContext') #5937

Devmond Feb 24, 2024

Replies: 1 comment · 5 replies

snowystinger Feb 25, 2024 Maintainer

Devmond Feb 25, 2024 Author

Devmond Feb 25, 2024 Author

snowystinger Feb 25, 2024 Maintainer

Devmond Feb 25, 2024 Author

snowystinger Feb 25, 2024 Maintainer

Devmond
Feb 24, 2024

Replies: 1 comment 5 replies

snowystinger
Feb 25, 2024
Maintainer

Devmond Feb 25, 2024
Author

Devmond Feb 25, 2024
Author

snowystinger Feb 25, 2024
Maintainer

Devmond Feb 25, 2024
Author

snowystinger Feb 25, 2024
Maintainer