2

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"));


0

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' )
    }
};


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.