Apr 24, 2020 | Divi Resources

How to create custom Divi module part 3: Understanding yarn commands

In the previous tutorial, we have set up the structure of the divi module. For starting the development, we need to run some commands using package manager yarn. Those commands will help us in all the way to develop the custom Divi Module.

yarn start


This command executes your package.json file scripts. After running, yarn starts command on in your terminal. Add the newly created module(You’ll find Hello World Module) on your divi page builder. After adding the module, You may face the following issue-

[code lang=”js”]function (t){
return s.a.createElement(
p.a,g({rawContentProcesser:_.a.replaceCodeContentEntities},e.props)
)}[/code]

To fix this issue, Add the below-mentioned code in your DiviExtensionTutorial.php file. You may locate this file plugins/divi-extension-tutorial/includes folder. This code is for module development purposes. Don’t forget to remove this code while you create a zip file of your final Divi Module. Here, You may find more detail about this issue.

Keep the yarn start command running while developing the custom module. This will compile your module automatically when you make any changes in CSS, JS, or JSX file.

yarn build

This command will create the build file of your custom module.

yarn zip

This command will create the zip file.

yarn eject

After finishing everything, run yarn eject command.

In this video, you can see what we have done so far.

In the next tutorial, I’ll cover the module functions and setting fields. Leave a comment if you face any problem so far.

Posted By:
Mohd Arif
Dreamer, Schemer, Music & Technology enthusiast. He enjoys building things that speak HTTP. Arif is Development Head at Elicus and has over 8 years experience in the WordPress development industry.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Using Divi for RTL Website? Here Are 3 Things You Need To Know

Using Divi for RTL Website? Here Are 3 Things You Need To Know

Running a website for the business is one of the crucial aspects of running a business in today’s time. Whether you’re manufacturing fashion apparel or designing web projects, an online platform is always a plus. Based on this, more and more businesses are adopting...

An Amazing Guide on Divi Scroll Effects & How to Use Them Creatively

An Amazing Guide on Divi Scroll Effects & How to Use Them Creatively

Divi Scroll Effects are a great way to turn a simple Divi website into a modern one. And not only modern but highly interactive with enhanced engagement for different areas of the site. You could highlight CTAs, content sections and hook users to the purpose you've...

7 Easy Steps To Create Popups for Divi With Divi Modal Popup

7 Easy Steps To Create Popups for Divi With Divi Modal Popup

Popups can help you do many beneficial things on your site. For example, showing discount coupons, sales, announcements and much more. With them, you could easily boost interaction on your site and turn more leads into conversion. Therefore, if you're looking for a...

Popular on Divi Extended

Divi Plus Divi Child Theme Divi Header Layouts