Uncaught TypeError: Cannot read properties of null (reading 'useEffect') #2017

Devmond · 2024-02-27T18:48:59Z

Devmond
Feb 27, 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 :)

Code:

<!DOCTYPE html>
 <html>

<head>


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


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

<script src="cloudscape.bundle.js"></script>

</head><body><div id="app" data-role="mount-element"></div>
<script type="text/babel">

function SolventReactMainAppComponent(props){

	let solventJSXOut = (
<div data-role="root-element"><Cards></Cards></div>
	);
	return solventJSXOut;
}

  
  window.addEventListener('load', function(){
      
      for(let c in AWSCloudscape.cloudscape)//AWSCloudscape is exposed by cloudscape.bundle.js
      	window[c] = AWSCloudscape.cloudscape[c];
    
      SolventReactMainApp = ReactDOM.createRoot(document.getElementById(SolventReactMainAppMountElementId));
      SolventReactMainApp.render(<SolventReactMainAppComponent/>);
  });

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

cloudscape.bundle.js is produced via webpack and excludes react and react-dom, it exports this object:

const cloudscapeStyles = require('@cloudscape-design/global-styles');
const cloudscape = require('@cloudscape-design/components');

export default {
  cloudscapeStyles: cloudscapeStyles,
  cloudscape:cloudscape
};

Answered by connorlanigan

Feb 28, 2024

The error you mention likely happens because React is not available (useEffect is a function imported from React). You mentioned that you excluded React and ReactDOM from your bundle, I'd recommend that you keep them included in your bundle since Cloudscape depends on React.

View full answer

connorlanigan · 2024-02-28T08:13:58Z

connorlanigan
Feb 28, 2024
Maintainer

The error you mention likely happens because React is not available (useEffect is a function imported from React). You mentioned that you excluded React and ReactDOM from your bundle, I'd recommend that you keep them included in your bundle since Cloudscape depends on React.

1 reply

Devmond Feb 28, 2024
Author

Hi Connor,

The error is not about useEffect itself but rather the object that is attempting to access useEffect, that object is null. Here's the stack trace.

Uncaught TypeError: Cannot read properties of null (reading 'useEffect')
    at n.useEffect (cloudscape.bundle.js:2:2385013)
    at cloudscape.bundle.js:2:67726
    at ti (cloudscape.bundle.js:2:67997)
    at ci (cloudscape.bundle.js:2:68750)
    at cloudscape.bundle.js:2:492735
    at renderWithHooks (react-dom.development.js:16315:20)
    at updateForwardRef (react-dom.development.js:19236:22)
    at beginWork (react-dom.development.js:21646:18)
    at beginWork$1 (react-dom.development.js:27436:16)
    at performUnitOfWork (react-dom.development.js:26570:14)
    at workLoopSync (react-dom.development.js:26476:7)
    at renderRootSync (react-dom.development.js:26444:9)
    at recoverFromConcurrentError (react-dom.development.js:25860:22)
    at performConcurrentWorkOnRoot (react-dom.development.js:25760:24)
    at workLoop (react.development.js:2653:36)
    at flushWork (react.development.js:2626:16)
    at MessagePort.performWorkUntilDeadline (react.development.js:2920:23)

n.useEffect = function(e, n) {
                return D.current.useEffect(e, n)//The source of the null error
            }

And the reason I removed react in this bundle is to avoid a similar error that results from having duplicate react inclusion in bundles:
TypeError: Cannot read properties of null (reading 'useContext'), I dealt with this while working with the Adobe spectrum library...i know different libraries, but it is similar type of react problem.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uncaught TypeError: Cannot read properties of null (reading 'useEffect') #2017

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

Uncaught TypeError: Cannot read properties of null (reading 'useEffect') #2017

Devmond Feb 27, 2024

Replies: 1 comment · 1 reply

connorlanigan Feb 28, 2024 Maintainer

Devmond Feb 28, 2024 Author

Devmond
Feb 27, 2024

Replies: 1 comment 1 reply

connorlanigan
Feb 28, 2024
Maintainer

Devmond Feb 28, 2024
Author