Dealing with multiple React dom entry points in WordPress Theme Development

After getting so excited with the new WordPress script package which includes the ability of not having to manually setup Webpack and Babel for rapid Gutenberg Block creation, I ran into an issue when I started building a WordPress theme. I have multiple files which I wanted to include different individual React Components in different areas. For example, I wanted a React component in my main blog file page which would consume the WordPress REST API and load all of my posts on the page. But then I wanted another React component to consume the REST API to display a single post on a single post template. If I tried to use the default index.js file, I could not load multiple React Components all in the index.js. I need multiple entry points so I can attach my multiple Blog Posts component to a template with a dom element of app and then a different Single Post React Component to a different template file with a dom element of singlePostApp.

What is the number one rule in development? “DON’T HACK CORE”. Since Webpack comes bundled in WordPress core, I could technically edit (hack) the webpack.config.js file in core but it would get overwritten on the first WordPress update. So again Kudos to the WordPress team for thinking ahead. We can extend the webpack.config file.  They thought ahead and realized that some people would need to customize, edit, or change the webpack.config file and that is what we are going to do in this post.

Here is the documentation from WordPress on extending Webpack:

https://developer.wordpress.org/block-editor/packages/packages-scripts/#provide-your-own-webpack-config

So here is my src folder structure which resides in my themes root file.

Theme src folder structure

 

I have my two main entry point js files.

I then created a new webpack.config.js file in the themes root directory. Here is where I extended the WordPress core Webpack file. I tell my new extended Webpack file to use my two different entry point js files.

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

const path = require( 'path' );

module.exports = {

  ...defaultConfig,

  entry: {

    ...defaultConfig.entry,

    index: path.resolve( process.cwd(), 'src', 'index.js' ),

    SinglePostApp: path.resolve( process.cwd(), 'src', 'SinglePostApp.js' )

  }

};

After running the build command and there are no errors in the terminal, there will be multiple build files.

Theme build folder structure

Here are my main two entry js files. Notice one is attached to a file with a dom element of app. It imports one of my React Components called PostList. My second one is attached to a dom element of singlePostApp which imports a different React Component called SinglePostApp.

index.js

React Entry File

SinglePostApp.js

React Entry File

Now after extending the Webpack config file, I can add different React Components all throughout my theme. I just need to update my custom webpack.config,js file in my theme’s root folder with the new entry point files. Again, time to start creating some cool React Components for my WordPress theme!

 

JavaScript, React JS, WordPress,