{"id":3140,"date":"2019-06-02T02:00:07","date_gmt":"2019-06-02T02:00:07","guid":{"rendered":"https:\/\/hyperdrivedesigns.com\/?p=3140"},"modified":"2019-06-02T02:01:22","modified_gmt":"2019-06-02T02:01:22","slug":"dealing-with-multiple-react-dom-entry-points-in-wordpress-theme-development","status":"publish","type":"post","link":"https:\/\/hyperdrivedesigns.com\/dealing-with-multiple-react-dom-entry-points-in-wordpress-theme-development\/","title":{"rendered":"Dealing with multiple React dom entry points in WordPress Theme Development"},"content":{"rendered":"<p>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.<\/p>\n<p>What is the number one rule in development? &#8220;DON&#8217;T HACK CORE&#8221;. 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.\u00a0 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.<\/p>\n<p>Here is the documentation from WordPress on extending Webpack:<\/p>\n<p><a href=\"https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-scripts\/#provide-your-own-webpack-config\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-scripts\/#provide-your-own-webpack-config<\/a><\/p>\n<p>So here is my <strong>src<\/strong> folder structure which resides in my themes root file.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-3143\" src=\"https:\/\/hyperdrivedesigns.com\/wp-content\/uploads\/2019\/06\/webpack-1.jpg\" alt=\"Theme src folder structure\" width=\"227\" height=\"149\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>I have my two main entry point js files.<\/p>\n<p>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.<\/p>\n<pre class=\"line-numbers\"><code class=\"language-json\">const defaultConfig = require(\".\/node_modules\/@wordpress\/scripts\/config\/webpack.config\");\r\n\r\nconst path = require( 'path' );\r\n\r\nmodule.exports = {\r\n\r\n  ...defaultConfig,\r\n\r\n  entry: {\r\n\r\n    ...defaultConfig.entry,\r\n\r\n    index: path.resolve( process.cwd(), 'src', 'index.js' ),\r\n\r\n    SinglePostApp: path.resolve( process.cwd(), 'src', 'SinglePostApp.js' )\r\n\r\n  }\r\n\r\n};<\/code><\/pre>\n<p>After running the build command and there are no errors in the terminal, there will be multiple build files.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-3144\" src=\"https:\/\/hyperdrivedesigns.com\/wp-content\/uploads\/2019\/06\/webpack-build.jpg\" alt=\"Theme build folder structure\" width=\"237\" height=\"95\" \/><\/p>\n<p>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.<\/p>\n<p>index.js<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-3145 size-full\" src=\"https:\/\/hyperdrivedesigns.com\/wp-content\/uploads\/2019\/06\/index-post.jpg\" alt=\"React Entry File\" width=\"552\" height=\"242\" srcset=\"https:\/\/hyperdrivedesigns.com\/wp-content\/uploads\/2019\/06\/index-post.jpg 552w, https:\/\/hyperdrivedesigns.com\/wp-content\/uploads\/2019\/06\/index-post-300x132.jpg 300w\" sizes=\"(max-width: 552px) 100vw, 552px\" \/><\/p>\n<p>SinglePostApp.js<\/p>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-3146 size-full\" src=\"https:\/\/hyperdrivedesigns.com\/wp-content\/uploads\/2019\/06\/index-post2.jpg\" alt=\"React Entry File\" width=\"567\" height=\"201\" srcset=\"https:\/\/hyperdrivedesigns.com\/wp-content\/uploads\/2019\/06\/index-post2.jpg 567w, https:\/\/hyperdrivedesigns.com\/wp-content\/uploads\/2019\/06\/index-post2-300x106.jpg 300w\" sizes=\"(max-width: 567px) 100vw, 567px\" \/><\/p>\n<p>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&#8217;s root folder with the new entry point files. Again, time to start creating some cool React Components for my WordPress theme!<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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.<\/p>\n","protected":false},"author":1,"featured_media":2862,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false},"categories":[27,28,15],"tags":[],"acf":false,"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Dealing with multiple React dom entry points in WordPress Theme Development - Hyperdrive Designs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hyperdrivedesigns.com\/dealing-with-multiple-react-dom-entry-points-in-wordpress-theme-development\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dealing with multiple React dom entry points in WordPress Theme Development - Hyperdrive Designs\" \/>\n<meta property=\"og:description\" content=\"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.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hyperdrivedesigns.com\/dealing-with-multiple-react-dom-entry-points-in-wordpress-theme-development\/\" \/>\n<meta property=\"og:site_name\" content=\"Hyperdrive Designs\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-02T02:00:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-06-02T02:01:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hyperdrivedesigns.com\/wp-content\/uploads\/2018\/05\/wordpress-post.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2250\" \/>\n\t<meta property=\"og:image:height\" content=\"1875\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Darren\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Darren\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hyperdrivedesigns.com\/dealing-with-multiple-react-dom-entry-points-in-wordpress-theme-development\/\",\"url\":\"https:\/\/hyperdrivedesigns.com\/dealing-with-multiple-react-dom-entry-points-in-wordpress-theme-development\/\",\"name\":\"Dealing with multiple React dom entry points in WordPress Theme Development - Hyperdrive Designs\",\"isPartOf\":{\"@id\":\"https:\/\/hyperdrivedesigns.com\/#website\"},\"datePublished\":\"2019-06-02T02:00:07+00:00\",\"dateModified\":\"2019-06-02T02:01:22+00:00\",\"author\":{\"@id\":\"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/ebe58380b732488b142b848d7f2d5de6\"},\"breadcrumb\":{\"@id\":\"https:\/\/hyperdrivedesigns.com\/dealing-with-multiple-react-dom-entry-points-in-wordpress-theme-development\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hyperdrivedesigns.com\/dealing-with-multiple-react-dom-entry-points-in-wordpress-theme-development\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hyperdrivedesigns.com\/dealing-with-multiple-react-dom-entry-points-in-wordpress-theme-development\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hyperdrivedesigns.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dealing with multiple React dom entry points in WordPress Theme Development\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hyperdrivedesigns.com\/#website\",\"url\":\"https:\/\/hyperdrivedesigns.com\/\",\"name\":\"Hyperdrive Designs\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hyperdrivedesigns.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/ebe58380b732488b142b848d7f2d5de6\",\"name\":\"Darren\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/61c792a261f8e4429cdeb8262d69c3bf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/61c792a261f8e4429cdeb8262d69c3bf?s=96&d=mm&r=g\",\"caption\":\"Darren\"},\"url\":\"https:\/\/hyperdrivedesigns.com\/author\/darren\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Dealing with multiple React dom entry points in WordPress Theme Development - Hyperdrive Designs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hyperdrivedesigns.com\/dealing-with-multiple-react-dom-entry-points-in-wordpress-theme-development\/","og_locale":"en_US","og_type":"article","og_title":"Dealing with multiple React dom entry points in WordPress Theme Development - Hyperdrive Designs","og_description":"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.","og_url":"https:\/\/hyperdrivedesigns.com\/dealing-with-multiple-react-dom-entry-points-in-wordpress-theme-development\/","og_site_name":"Hyperdrive Designs","article_published_time":"2019-06-02T02:00:07+00:00","article_modified_time":"2019-06-02T02:01:22+00:00","og_image":[{"width":2250,"height":1875,"url":"https:\/\/hyperdrivedesigns.com\/wp-content\/uploads\/2018\/05\/wordpress-post.png","type":"image\/png"}],"author":"Darren","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Darren","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/hyperdrivedesigns.com\/dealing-with-multiple-react-dom-entry-points-in-wordpress-theme-development\/","url":"https:\/\/hyperdrivedesigns.com\/dealing-with-multiple-react-dom-entry-points-in-wordpress-theme-development\/","name":"Dealing with multiple React dom entry points in WordPress Theme Development - Hyperdrive Designs","isPartOf":{"@id":"https:\/\/hyperdrivedesigns.com\/#website"},"datePublished":"2019-06-02T02:00:07+00:00","dateModified":"2019-06-02T02:01:22+00:00","author":{"@id":"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/ebe58380b732488b142b848d7f2d5de6"},"breadcrumb":{"@id":"https:\/\/hyperdrivedesigns.com\/dealing-with-multiple-react-dom-entry-points-in-wordpress-theme-development\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hyperdrivedesigns.com\/dealing-with-multiple-react-dom-entry-points-in-wordpress-theme-development\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/hyperdrivedesigns.com\/dealing-with-multiple-react-dom-entry-points-in-wordpress-theme-development\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hyperdrivedesigns.com\/"},{"@type":"ListItem","position":2,"name":"Dealing with multiple React dom entry points in WordPress Theme Development"}]},{"@type":"WebSite","@id":"https:\/\/hyperdrivedesigns.com\/#website","url":"https:\/\/hyperdrivedesigns.com\/","name":"Hyperdrive Designs","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hyperdrivedesigns.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/ebe58380b732488b142b848d7f2d5de6","name":"Darren","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hyperdrivedesigns.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/61c792a261f8e4429cdeb8262d69c3bf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/61c792a261f8e4429cdeb8262d69c3bf?s=96&d=mm&r=g","caption":"Darren"},"url":"https:\/\/hyperdrivedesigns.com\/author\/darren\/"}]}},"_links":{"self":[{"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/posts\/3140"}],"collection":[{"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/comments?post=3140"}],"version-history":[{"count":0,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/posts\/3140\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/media\/2862"}],"wp:attachment":[{"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/media?parent=3140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/categories?post=3140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hyperdrivedesigns.com\/wp-json\/wp\/v2\/tags?post=3140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}