Localhost:3000 – blank page

  • Resolved 3p3p3

    (@3p3p3)


    2 years, 1 month ago

    First: Thanks a lot for that plugin and all that documentation work. I got a first R3F-App online in an active WordPress and it was a real pleasure to see that :-).

    I have a question concerning the local development server:

    I started the project using local and Visual Studio Code and followed the installation instructions. Everything works fine, meaning the local WordPress loads the App. But at localhost:3000 only a blank page is showing up. Following error message is shown:

    Uncaught Error: createRoot(...): Target container is not a DOM element.
 ???React 3
????   createRoot
????   createRoot$1
????   createRoot
????js index.js:7
????factory react refresh:6
????Webpack 3
???  ?__webpack_require__
????  <anonymous>
????<  anonymous>
react-dom.development.js:29345
????React 3
????js index.js:7
????factory react refresh:6
????Webpack 3

    My intention is to get instant feedback on localhost:3000 (HMR?) while developing my app and do a build only from time to time to see how it is implemented in the local wordpress (e.g. https://rp-tutorial.local/adress-book/).

    Question is: Is the plugin generally working this way (so it would be worth the effort to get localhost:3000 running)? Or wouldn’t that be an option so I just ignore the error and have to build every time I want to see changes in the app?

    Thanks very much in avance!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author rockiger

    (@rockiger)

    Sorry, for answering that late. I somehow missed your question. Yes, it is meant to have hot-reloading with ReactPress. It is one of the main ideas behind it.

    If the index.html is empty, the cause is usually insufficient access rights. Your WordPress/PHP must be able to access the URL of the page where your app embedded. This is often a problem with Docker configurations.

    Another reason could be some error during writing if PHP doesn’t have the capabilities to write files.

    What LOCAL environment do you use?

    Thread Starter 3p3p3

    (@3p3p3)

    Thanks for your answer – happy you found time at all :-).

    I use Local/WSL 2 – and will try to fix those right issues or change to a Linux System where I hopefully don’t have that problem at all.

    Thread Starter 3p3p3

    (@3p3p3)

    Two hours later I found the answer:

    [my-app-folder]/public/index.html was empty – so there really was no React Dom rendered in the target element.

    I added 

    <div id="root"></div>

    Now Hot Module Replacement works!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Localhost:3000 – blank page’ is closed to new replies.