How to attach different React Components to different Dom Roots using the new WP wordpress/scripts webpack/babel

by

Since WP now comes with webpack/babel build baked into core it is so easy to integrated React in WP. I am working on a theme and created my React Blog Page to list all of my posts. Works perfectly! Since I am using the “@wordpress/scripts”: “3.2.1” I write my React files in multiple components but my main Root app is in a src/index.js file. which attaches to one dom root. When I try to had a second dom root to another template for the single posts, I keep getting a Target not a Dom Object. So my question is: Using the WP Build Scripts package, how can I create multiple React Components and attach them to multiple unique Dom Roots on my different page templates in my theme.
so my main index.js file when I write a second React Dom render to attach a total different React Component to a total different dom root, it does not work. How can I accomplish this task successfully. I do NOT want to make them Gutenberg Blocks. So trying to attach this second React Component to totally different dom root element will not work. get error Target container is not a DOM element.

for example my src/index.js file: 

import PostList from './components/PostList';
import SinglePost from './components/SinglePost';


class App extends React.Component {
    render() {
      return (
        <div>
            <Header title="test title" />
            <PostList/>
        </div>
      );
    }
  }

ReactDOM.render(<App />, document.getElementById("app"));


class SinglePostApp extends React.Component {
    render() {
        return (
            <div>
               <SinglePost />
            </div>
        )
    }
}
ReactDOM.render(<SinglePostApp />, document.getElementById("spApp"));

1 Answer
1

ok, after hours of research and trying different things I found my answer.

You can extend the WordPress webpack config file. Here is documentation from WordPress

https://developer.wordpress.org/block-editor/packages/packages-scripts/#advanced-usage

So here is my new webpack config file located in my theme root directory.I have moved the SinglePost React code into its own file, singlePost.js. Now when I run npm run build I get two different files. I also had to add this new build js file in my functions.php enqueue function in order to load my new javascript file.

const defaultConfig = require("./node_modules/@wordpress/scripts/config/webpack.config");


module.exports = {
  ...defaultConfig,
    entry: {
    ...defaultConfig.entry,
        index: path.resolve( process.cwd(), 'src', 'index.js' ),
        singlePost: path.resolve( process.cwd(), 'src', 'singlePost.js' )
    }
};

Leave a Comment