HMR Doesn't Work On Local By Flywheel Sites

[mrkenng]

Is this a bug report?

Followed the steps on Developer Documentation. starting yarn start and editing the name etc. No error showing when compiling. However, went to VB choose Simple Header and it shows function (t){return s.a.createElement(p.a,g({rawContentProcesser:_.a.replaceCodeContentEntities},e.props))}

Browser console also showing:

sample-page?et_fb=1:1471 GET http://local.divi-dev.site:3000/static/js/frontend-bundle.js?ver=1.0.0 net::ERR_EMPTY_RESPONSE
sample-page?et_fb=1:1474 GET http://local.divi-dev.site:3000/static/js/builder-bundle.js?ver=1.0.0 net::ERR_EMPTY_RESPONSE
jquery-migrate.min.js?ver=1.4.1:2 JQMIGRATE: Migrate is installed, version 1.4.1
react-dom.development.js?ver=16.2:16048 Download the React DevTools for a better development experience: https://fb.me/react-devtools
react.development.js?ver=16.2:336 Warning: getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.

any ideas?

[odoremieux]

Same issue

[lots0logs]

Hi, could you zip your extension and share it here so I can take a look? Thanks!

[odoremieux]

divi-modules.zip
Here we go. I have been trying to modify the HelloWorld example.

Is there a plan to release a Dev version of Divi 3.1, with all the JSX files?

[lots0logs]

Looks like our published tutorial is missing a step that is actually on our dev copy of the docs. Sorry about that. I updated the tutorial. Just look for the step that says:

Next, let’s update the import and export statements in includes/modules/index.js:

Let me know if that solves it for you.

[mrkenng]

Still the same issue. The standard Divi builder does work. Only the frontend.

[lots0logs]

Hmm..the errors in the console indicate your module's javascript is not being loaded. Do you have the yarn start command running? It needs to be running the entire time you are testing/developing modules in the builder.

[odoremieux]

I do have the same issue. yarn start is running.
BTW updating includes/modules/index.js, didn't help

[mrkenng]

Yup, it's running.

Compiled successfully!

You can now view dwd-custom-modules in the browser.

Note that the development build is not optimized.
To create a production build, use yarn build.

[lots0logs]

Could you post a screenshot of the network tab of the developer console?

[odoremieux]

[mrkenng]

Ok... I think it's because :3000 port on DiviExtension.php

I used this now and it's working.

/**
	 * Enqueues non-minified, hot reloaded javascript bundles.
	 *
	 * @since 3.1
	 */
	protected function _enqueue_debug_bundles() {
		// Frontend Bundle
		$site_url       = wp_parse_url( get_site_url() );
		$hot_bundle_url = "{$this->plugin_dir_url}/scripts/frontend-bundle.min.js";

		wp_enqueue_script( "{$this->name}-frontend-bundle", $hot_bundle_url, $this->_bundle_dependencies['frontend'], $this->version, true );

		if ( et_core_is_fb_enabled() ) {
			// Builder Bundle
			$hot_bundle_url = "{$this->plugin_dir_url}/scripts/builder-bundle.min.js";

			wp_enqueue_script( "{$this->name}-builder-bundle", $hot_bundle_url, $this->_bundle_dependencies['builder'], $this->version, true );
		}
	}

Guess someone forgotten to remove it the port number on _enqueue_debug_bundles()
Time to update Divi?

[lots0logs]

The port number is necessary for the hot reloading to work. Basically when you make changes to the code it automatically updates the page. Are you using the docker environment? If so, did you run yarn start from inside the container?

[lots0logs]

@odoremieux It looks like there is an issue with the webpack-dev-server not serving your javascript files. Maybe its not able to get port 3000 on your system?

[odoremieux]

I'm using local by Flywheel. Running yarn start from the command line on a console

[lots0logs]

Currently the extension code expects that the javascript bundle will be served from the same host as the wordpress site. In the case of Local By Flywheel the wordpress site is served from a docker container while the javascript bundle will be served from your localhost. We'll look into making necessary changes so that it will work in the future. In the meantime you can get it working locally by adding this to your extension's php class:

	/**
	 * Enqueues non-minified, hot reloaded javascript bundles.
	 *
	 * @since 3.1
	 */
	protected function _enqueue_debug_bundles() {
		// Frontend Bundle
		$site_url       = wp_parse_url( get_site_url() );
		$hot_bundle_url = "http://localhost:3000/static/js/frontend-bundle.js";

		wp_enqueue_script( "{$this->name}-frontend-bundle", $hot_bundle_url, $this->_bundle_dependencies['frontend'], $this->version, true );

		if ( et_core_is_fb_enabled() ) {
			// Builder Bundle
			$hot_bundle_url = "http://localhost:3000/static/js/builder-bundle.js";

			wp_enqueue_script( "{$this->name}-builder-bundle", $hot_bundle_url, $this->_bundle_dependencies['builder'], $this->version, true );
		}
	}

[mrkenng]

I'm using local by Flywheel too. and i can confirm that

	/**
	 * Enqueues non-minified, hot reloaded javascript bundles.
	 *
	 * @since 3.1
	 */
	protected function _enqueue_debug_bundles() {
		// Frontend Bundle
		$site_url       = wp_parse_url( get_site_url() );
		$hot_bundle_url = "http://localhost:3000/static/js/frontend-bundle.js";

		wp_enqueue_script( "{$this->name}-frontend-bundle", $hot_bundle_url, $this->_bundle_dependencies['frontend'], $this->version, true );

		if ( et_core_is_fb_enabled() ) {
			// Builder Bundle
			$hot_bundle_url = "http://localhost:3000/static/js/builder-bundle.js";

			wp_enqueue_script( "{$this->name}-builder-bundle", $hot_bundle_url, $this->_bundle_dependencies['builder'], $this->version, true );
		}
	}

is working

[odoremieux]

It's working for me too. Thanks.

[mrkenng]

When I see the console, i got this

GET http://testsite.local:3000/static/js/frontend-bundle.js?ver=1.0.0 net::ERR_CONNECTION_REFUSED

Is there something to worry about?

[lots0logs]

I think you copied the method immediately after I posted it but it had a mistake in it so I edited it like 1 minute later 😅

[mrkenng]

Opps! My bad for not reading. All I think was getting it to work first.

[lots0logs]

No worries 😆

[mrkenng]

Got this on the console as well.

:3000/sockjs-node/info?t=1524258970922 net::ERR_CONNECTION_REFUSED

Not sure what it does but i believe it's from webpackHotDevClient

[lots0logs]

Weird 🤔 Does it show up every time you load the builder while yarn start is running?

[lots0logs]

The debug constant is automatically set in wp-config.php when you run yarn start. When you exit out of yarn start, the debug constant is removed.

[ccritz95]

I added the following code to my extensions PHP class, and I'm still getting the error from the text editor not displaying.

[njseeber1]

I am getting the same error as above, just the function call in the visual builder rather than the text that should be there. Is there any solution to this yet?

[wpnimitz]

Still using flywheel (demo.local)

I added the code from the comment, however I am still getting an error.

place the snippet at plugins/new-module/NewModule.php (DiviExtension Class)

Other tries:
1 - change the localhost:3000 to demo.local
2 - change the localhost:3000 to demo.local:3000
3 - change the localhost:3000 to localhost:3000

also tried adding it to the module itself (But I read it should only be added to DiviExtension Class.

additional errors
GET http://demo.local/wp-content/plugins/new-module/scripts/frontend-bundle.min.js?ver=1.0.0 net::ERR_ABORTED 404 (Not Found) ?et_fb=1&PageSpeed=off:1599 GET http://demo.local/wp-content/plugins/new-module/scripts/builder-bundle.min.js?ver=1.0.0 net::ERR_ABORTED 404 (Not Found)

VB ERROR

function (t){return s.a.createElement(p.a,g({rawContentProcesser:_.a.replaceCodeContentEntities},e.props))}`

[alexhooley]

The answers in this thread are quite cryptic for someone who maybe won't know the difference between module class/extension class so here's what I did:

1. Copy that bit of code from this comment.
2. Open up your custom plugin folder, open the includes folder. There should be a php file like MyExtension.php.
3. Paste the code snippet inside class MYEX_MyExtension extends DiviExtension { ... }
4. Run yarn start, wait for it to compile successfully, and refresh the visual builder page. The function (t){return s.a.createElement(p.a,g({rawContentProcesser:_.a.replaceCodeContentEntities},e.props))} problem in the visual builder should be cleared up.

However the hot reloading still doesn't work so you have to refresh the page every time you want to see the change:
Failed to load resource: net::ERR_CONNECTION_REFUSED :3000/sockjs-node/info?t=1583625195002:1

The development server has disconnected. Refresh the page if necessary. webpackHotDevClient.js:79

[kannan6240]

I'm getting this below code displayed in the visual builder, even after pasting this code @lots0logs #5 (comment)

function(t){return r.a.createElement(f.a,E({rawContentProcesser:h.default.replaceCodeContentEntities},e.props))}

[Hermitzan]

The debug constant is automatically set in wp-config.php when you run yarn start. When you exit out of yarn start, the debug constant is removed.

I was noticing that the debug constant was not added to my wp-config.php, then reviewing the \divi-dev-utils\WPConfig.js file, I noticed that it looks for the line /* That's all, stop editing! Happy blogging. */ for add the debug constant on wp-config.php.

But that line is a little different on my wp-config.php, it says /* That's all, stop editing! Happy publishing. */. I just edited these lines to make them identical and it works!
I think this line was changed on wordpress 5.1

[vidalem]

I'm getting this below code displayed in the visual builder, even after pasting this code @lots0logs #5 (comment)

function(t){return r.a.createElement(f.a,E({rawContentProcesser:h.default.replaceCodeContentEntities},e.props))}

The same to me , I have pasted the same snippet described in here: #5 (comment)

But error is still appearing

OK
I have followed instuctions from this post:
#5 (comment)

And It works now!
thanks !

[kannan6240]

@vidalem can you please help me in understanding what Hermitzan is saying. I'm not understanding it.

Thank you.

[kannan6240]

Where is divi-dev-utils file? Please assist me @vidalem @Hermitzan

Thank you

[alexhooley]

Where is divi-dev-utils file? Please assist me @vidalem @Hermitzan

Thank you

I think what they are saying is make sure the wp-config.php file contains /* That's all, stop editing! Happy blogging. */ instead of /* That's all, stop editing! Happy publishing. */

[kannan6240]

How is that going to affect, those are commented lines?
Anyways, I edited them manually. but did not help.
@Hermitzan has some code and has opened up a file divi-dev-utils, I don't know where to find them.

Thank you

[Hermitzan]

@kannan6240 the javascript file that manages wp-config.php seems to be located in node_modules\divi-dev-utils\WPConfig.js. If the debug constant is not present on your wp-config.php this script looks for the line /* That's all, stop editing! Happy blogging. */ (on wp-config.php) and adds the debug constant just above.

[kannan6240]

@Hermitzan Thank you, Pal. You are amazing.
It worked.

[mohbadreldeen]

I had the same issue,
I am using local by flywheel on windows
I solved this by opening my Command Prompt as Administrator and run yarn start

[MikeiLL]

Thanks for the tutorial, man.

• Added the two recommended development methods to DIET_DiviExtensionTutorial class: _enqueue_debug_bundles and _enqueue_bundles.
• Running yarn start in the host machine.

When I run yarn start, it asks:

Something is already running on port 3000. Probably:
  /Applications/Docker.app/Contents/MacOS/com.docker.backend -watchdog (pid 1100)
  in /Users/mikek/Library/Containers/com.docker.docker/Data

Would you like to run the app on another port instead? (Y/n) 

To which I respond, yes.

I see that the regex in node_modules/divi-dev-utils/WPConfig.js has been updated to be a little less specific (... Happy w+).

In Chrome browser, the issue appears to persist (even after Chrome > Clear Browsing Data: Cached Images and Files.

Looks fine in Firefox and Safari.

Resolved after Chrome > Clear Browsing Data: Cookies and other site data.

[MikeiLL]

Came back to this after a few months and same issue where yarn is running on an alternate port because docker is using 3000.

My workaround at the moment has been to update the port in the enqueue_bundles methods and then update the default port in node_modules/divi-scripts/scripts/start.js (on line 77) to the matching port.

I picked 3006.

Feels pretty hacky. Is there a better solution?

[MikeiLL]

Spoke too soon. That's giving a Cross-Origin request issue trying to get local.divi-dev.site:3000/sockjs-node/info?t=1610667887992, which doesn't exist because it's on port 3000.

Some workarounds here: https://medium.com/swlh/avoiding-cors-errors-on-localhost-in-2020-5a656ed8cefa

[anj-bookwormhead]

@vidalem can you please help me in understanding what Hermitzan is saying. I'm not understanding it.

Thank you.

I'm having wp-config error when I use bash terminal. Try to use cmd or https://prnt.sc/10nkap3

[anj-bookwormhead]

I ran the command "npm run build" and all the problems got resolved.

Same to me. It solves the problem but I'm wondering if there's other solution. I'm not so comfortable running this command in a development space. Thoughts?

[rmtux]

I am totally new to development and WordPress and trying to learn my way. Followed this thread but still get that error when I enable the visual builder. [yarn build] works fine, but seems it won't show real time changes on files and I will have to run after each change. Any advice?

[kannan6240]

@kannan6240 the javascript file that manages wp-config.php seems to be located in node_modules\divi-dev-utils\WPConfig.js. If the debug constant is not present on your wp-config.php this script looks for the line /* That's all, stop editing! Happy blogging. */ (on wp-config.php) and adds the debug constant just above.

Change "Happy blogging" to "Happy publishing". (without quotes)

Try doing this. @rmtux

[rmtux]

Thanks @kannan6240 , it worked!

1. applied the code from HMR Doesn't Work On Local By Flywheel Sites #5 (comment)
2. changed "Happy blogging" to "Happy publishing" in wp-config.php HMR Doesn't Work On Local By Flywheel Sites #5 (comment)
3. did a "yarn build"
4. cleared website cache from browser
5. ran "sudo npm cache clean -f" in Linux [error was still showing before clearing npm cache], and now it's fine.

[msykes]

EDITED (twice):

My issue isn't with 'yarn build' but with 'yarn start'. #5 (comment) by @rmtux works for me because it suggests 'yarn build'

In my case, my issue is I'm using namespacing on my extension and module classes of PHP. I removed namespacing and used long-winded class names, including the prefix of the class as defined in package.json (probably the key part of all this) and it worked!

[ken-afh]

EDITED to add this: Using Flywheel Local on Windows
and notes on the two changed lines in my code block // ##### Changed Line #####

OK - I fixed it on my system. Change the two lines that define $hot_bundle_url and get rid of the localhost. Make them look like this:

$hot_bundle_url = ":3000/static/js/frontend-bundle.js";

The beginning of my class definition file now looks like this:

<?php

class NEMO_NewModule extends DiviExtension {
	/**
	 * https://github.com/elegantthemes/create-divi-extension/issues/5
	 * 
	 * Enqueues non-minified, hot reloaded javascript bundles.
	 *
	 * @since 3.1
	 */

	protected function _enqueue_debug_bundles() {
		// Frontend Bundle
		$site_url       = wp_parse_url( get_site_url() );
		$hot_bundle_url = ":3000/static/js/frontend-bundle.js";    // ##### Changed Line #####

		wp_enqueue_script( "{$this->name}-frontend-bundle", $hot_bundle_url, $this->_bundle_dependencies['frontend'], $this->version, true );

		if ( et_core_is_fb_enabled() ) {
			// Builder Bundle
			$hot_bundle_url = ":3000/static/js/builder-bundle.js";   // ##### Changed Line #####

			wp_enqueue_script( "{$this->name}-builder-bundle", $hot_bundle_url, $this->_bundle_dependencies['builder'], $this->version, true );
		}
	}
	
	/**
	 * The gettext domain for the extension's translations.
	 *
	 * @since 1.0.0
	 *
	 * @var string
	 */
	public $gettext_domain = 'nemo-new-module';

It would be REALLY GREAT if ET updated this functionality so it works with current releases of the underlying technology without having to muck around a bunch :(

[rhaseven7h]

One thing ... remember you can't mix http and https, if you're on debug mode with yarn start, open your wordpress site using http (not https). Otherwise you'll get the error all of you are mentioning, no matter what you do on code (i.e. an https site trying to load http assets).

[devontriley]

I'm also using Local by Flywheel and this comment solved my problem of only having the module function printed in the Divi edit screen. Thanks @Hermitzan!