not able to see preview in visual builder and styles.css not showing

[mrbm]

Hey Guys, just starting out with this, could be operator error...but I think I've checked everything.

Pulled code yesterday, using divi from today and using fresh ubuntu 18 install from digital ocean as dev environment created yesterday with the latest everything.

yarn start won't work but using npm start will run dev server.

Problem Description

1. Visual Builder preview of content when using module shows:
   function(t){return r.a.createElement(Dn,oo({rawContentProcesser:se.b.replaceCodeContentEntities},e.props))}

2. In rendered out mode, the styles.css file is not seeming to be included in the render, however everything else seems to render out without issue.

Steps To Reproduce

1. Following instructions found here:

https://www.elegantthemes.com/documentation/developers/divi-module/how-to-create-a-divi-builder-module/

Screenshot and/or gif

[mrbm]

running build gets front end css working, however backend visual builder produces a new error:

Basing my code off the tutorial code simple header and adding a second field.

[mrbm]

https://www.elegantthemes.com/documentation/developers/how-to-create-a-divi-builder-module/ makes reference to:

{this.props.content()}

changing that to:
{this.props.content}
Makes things work, is there a purpose I am missing to having the () or is that a typo?

[mrbm]

So I am now learning through more experimentation that:
content()

is not a typo. Its a reserved statement that allows for a field named content to be defined and then that allows for on screen editing.

My question is this, what if I want a module to have 3 separate fields for on screen editing, is that possible? My attempt to create contentb() with content defined in the array the same as content is what seems to lead to this error in the visual builder.

Thanks!

[xxtesaxx]

No, currently you only can have one tinymce field per module

[seb-montana]

Hi,
I have the same trouble... I get function(t){return r.a.createElement(u.a,_({rawContentProcesser:d.default.replaceCodeContentEntities},e.props))} error when VisualBuilder try to render my mymodule.jsx..
Somebody can help me ?
Thanks,

[Warloxk]

Hi there, any solution for this?

[xxtesaxx]

When you get the function()... output in the VB, you wp-config.php file is missing the debug switch for your module. Often you only need to run yarn start again so it gets added. Make sure your module is in the wp-contents/plugins directory of your wordpress installation.

The issue with the missing styles from styles.css can be solved by running yarn build so the minified version is created and loaded. Not the ideal case but it works. Alternatively you could put all your styles in the styles.css inside the styles directory though I rather use the first approach since I rarely change the module styles and still like to have them separately for each module.

My dev approach is:

1. Create all the settings in the php module
2. Implement the jsx module including static styles, render and static css(props)
3. Run yarn build to get the static styles on the frontend
4. re-create render() including dynamic styles in php
5. Run yarn build/zip again and pack the module zip

[coulterpeterson]

This still appears to be an issue - I'm currently trying to use the module that comes 'out of the box' when I run npx create-divi-extension my-extension in side the plugins directory. Same as above, it will render front-end but on the backend I get the r.a.createElement(u.a,_({rawContentProcesser:d.default.replaceCodeContentEntities},e.props))} text displayed instead of the module preview.

One additional step I tried to no avail (because I'm running my WordPress dev site from Flywheel) is adding the 'hot debug snippet' from this issue thread to the class in my HelloWorld.php file.

Any assistance or input of any kind is appreciated here.

[Yohaeni]

I have a custom module which is made for divi 3.051 version I think...
After update Divi theme, some pages using that module looks crashed (CSS is not working properly)

So I changed "$this->fb_support=false" into "$this->vb_support='on"

After doing that, I can see the message "function(t){return r.a.createElement(f.a, k({rawContentProcesser:se.b.replaceCodeContentEntities},e.props))}"

CSS crashing is still, and I coudn't fix anything... what should I do ToT

[chrisb34]

I got this error too but ...

Instructions from @xxtesaxx above worked for me.

You need to do a Yarn build to get the packages built for the frontend builder. I presume this sets up the basic links to your module and module css, so you only need to rerun the build if you change a static file (like the /style.css).

Otherwise, get your code to compile properly with yarn start

And then do a yarn build.

Develop the rest of your react coding

and then yarn zip when you're ready to deploy (which includes a yarn build)

[alvarotrigo]

Or npm run build :)

[lots0logs]

Tracking this on #69

[Sean-TFG]

I was running into this for a while before I realized I did not match the slug in my jsx file to the slug in my php file.
After that, it worked. Just another possible thing for people to check.