2

Getting an error with React portal in the production build but none in development. I'm getting error #200 "target container is not a DOM element". I have put my code below. Please ignore the CSS part.

import  ReactDOM  from 'react-dom'
import React from 'react'

const Modal_Styles={
  backgroundColor:'#FFF',
  position:'fixed',
  top:'50%',
  left:'50%',
  right:'10%',
  bottom:'10%',
  padding:50,
  textAlign:'justify',
  transform:'translate(-50%,-50%)',
  borderRadius:'12px',
  zIndex:1000
}
const Overlay_Styles={
  position:'fixed',
  left:0,
  top:0,
  right:0,
  bottom:0,
  backgroundColor:'rgba(0,0,0,0.3)',
  zIndex:1000,
}

export default function Modal({open,children,onClose}) {
   if(!open){return null}
  
  return ReactDOM.createPortal(
    <>
    <div style={Overlay_Styles}>
    <div style={Modal_Styles}>
    {children} 
    <button className='mbutton' onClick={onClose}>x</button>
    </div>
    </div>
    </>,
    document.getElementById('portal')
  )
}

The index.html file is:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="C"
    />
    
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <div id="portal"></div>
  </body>
</html>

Any suggestions?

The names for both divs root and portal are correctly written in the index.js and modal.js.

Mansi
  • 21
  • 3
  • Please check if the div is present in dev tools in production – Konrad Nov 15 '22 at 09:24
  • In your production build's `index.html` file, can you check if `#portal` exists? – vighnesh153 Nov 15 '22 at 09:24
  • Try to see this: https://stackoverflow.com/questions/26416334/react-error-target-container-is-not-a-dom-element – Wayne Celestin Nov 15 '22 at 09:29
  • The div "portal" is not present in the index.html file(in dev tools) but it is present in the Git repo from where I'm deploying. And I'm using the recently committed versions of all files. – Mansi Nov 15 '22 at 09:32

0 Answers0