How to compile the JS file to use a React component in a WordPress theme if I do not need SSR?

I have a WordPress theme and for a part of it I want to use a React component (I don’t need SSR). I have used create-react-app in the past but now I have this code:

<div id="react-nav-bar"></div>

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js" crossorigin></script>

<script src="<?php echo get_template_directory_uri() ?>/react-nav-bar/build/static/js/runtime-main.39639aca.js"></script>

and it does not work. The request to runtime-main.39639aca.js succeeds but it does not load my nav bar.

The issue is that create-react-app produces more than a JS file, and I need just a JS file that I can put in the theme.

I have tried some things with webpack without success. I searched on GitHub and there are some things, I do not know which one to try. I tried react-embedded and it threw me an error. I also tried this but it does not work for me.

I also dislike the ES Lint warnings (I use VS Code).

Source: Ask Javascript Questions

LEAVE A COMMENT