New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HMR Doesn't Work On Local By Flywheel Sites #5

Open
mrkenng opened this Issue Apr 20, 2018 · 36 comments

Comments

Projects
None yet
6 participants
@mrkenng
Copy link

mrkenng commented Apr 20, 2018

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

This comment has been minimized.

Copy link

odoremieux commented Apr 20, 2018

Same issue

@elegantthemes elegantthemes deleted a comment from etstaging Apr 20, 2018

@lots0logs

This comment has been minimized.

Copy link
Member

lots0logs commented Apr 20, 2018

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

@lots0logs lots0logs added the QUESTION label Apr 20, 2018

@odoremieux

This comment has been minimized.

Copy link

odoremieux commented Apr 20, 2018

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

This comment has been minimized.

Copy link
Member

lots0logs commented Apr 20, 2018

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

This comment has been minimized.

Copy link
Author

mrkenng commented Apr 20, 2018

Still the same issue. The standard Divi builder does work. Only the frontend.
screen shot 2018-04-21 at 3 28 33 am

@lots0logs

This comment has been minimized.

Copy link
Member

lots0logs commented Apr 20, 2018

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

This comment has been minimized.

Copy link

odoremieux commented Apr 20, 2018

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

@mrkenng

This comment has been minimized.

Copy link
Author

mrkenng commented Apr 20, 2018

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

This comment has been minimized.

Copy link
Member

lots0logs commented Apr 20, 2018

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

@odoremieux

This comment has been minimized.

Copy link

odoremieux commented Apr 20, 2018

network

@mrkenng

This comment has been minimized.

Copy link
Author

mrkenng commented Apr 20, 2018

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?
screen shot 2018-04-21 at 4 03 07 am

@lots0logs

This comment has been minimized.

Copy link
Member

lots0logs commented Apr 20, 2018

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

This comment has been minimized.

Copy link
Member

lots0logs commented Apr 20, 2018

@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

This comment has been minimized.

Copy link

odoremieux commented Apr 20, 2018

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

@lots0logs

This comment has been minimized.

Copy link
Member

lots0logs commented Apr 20, 2018

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 );
		}
	}

@lots0logs lots0logs changed the title Showing error on VB HMR Doesn't Work On Local By Flywheel Sites Apr 20, 2018

@lots0logs lots0logs added COMPATIBILITY and removed QUESTION labels Apr 20, 2018

@lots0logs lots0logs self-assigned this Apr 20, 2018

@mrkenng

This comment has been minimized.

Copy link
Author

mrkenng commented Apr 20, 2018

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

This comment has been minimized.

Copy link

odoremieux commented Apr 20, 2018

It's working for me too. Thanks.

@mrkenng

This comment has been minimized.

Copy link
Author

mrkenng commented Apr 20, 2018

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

This comment has been minimized.

Copy link
Member

lots0logs commented Apr 20, 2018

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

This comment has been minimized.

Copy link
Author

mrkenng commented Apr 20, 2018

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

@lots0logs

This comment has been minimized.

Copy link
Member

lots0logs commented Apr 20, 2018

No worries 😆

@mrkenng

This comment has been minimized.

Copy link
Author

mrkenng commented Apr 20, 2018

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

This comment has been minimized.

Copy link
Member

lots0logs commented Apr 20, 2018

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

@mrkenng

This comment has been minimized.

Copy link
Author

mrkenng commented Apr 22, 2018

Yes. Just tested it shows up every time on yarn start. I will just use hostname: 'localhost', for now

@j1exus

This comment has been minimized.

Copy link

j1exus commented Apr 25, 2018

Hi!
The same issue both for npm start and npm run build

@lots0logs

This comment has been minimized.

Copy link
Member

lots0logs commented Apr 28, 2018

Something I noticed the other day on SJ's live stream was that he closed the terminal window immediately after the code finished compiling with yarn start. You actually need to keep the command running in the background while you are editing your code. If you keep it running then you shouldnt see the error mentioned in #5 (comment)

@CODECRATER

This comment has been minimized.

Copy link

CODECRATER commented Jul 19, 2018

Hello, I am using Local by Flywheel and am also having this issue:

Visual Builder won't show content, instead it shows:
function (t){return s.a.createElement(p.a,g({rawContentProcesser:_.a.replaceCodeContentEntities},e.props))}

Console says:
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

Any advice please?

@lots0logs

This comment has been minimized.

Copy link
Member

lots0logs commented Jul 19, 2018

@CODECRATER Have you tried the modification mentioned in #5 (comment)

@CODECRATER

This comment has been minimized.

Copy link

CODECRATER commented Jul 19, 2018

@lots0logs I believe I have implemented the modification but I see no difference. Here is the full copy of my code with your modification. Is it correct?

`<?php

class SIMP_SimpleHeader extends ET_Builder_Module {

public $slug       = 'simp_simple_header';
public $vb_support = 'on';

public function init() {
	$this->name = esc_html__( 'Simple Header', 'simp-simple-extension' );
}

public function get_fields() {
	return array(
		'heading'     => array(
			'label'           => esc_html__( 'Heading', 'simp-simple-extension' ),
			'type'            => 'text',
			'option_category' => 'basic_option',
			'description'     => esc_html__( 'Input your desired heading here.', 'simp-simple-extension' ),
			'toggle_slug'     => 'main_content',
		),
		'content'     => array(
			'label'           => esc_html__( 'Content', 'simp-simple-extension' ),
			'type'            => 'tiny_mce',
			'option_category' => 'basic_option',
			'description'     => esc_html__( 'Content entered here will appear below the heading text.', 'simp-simple-extension' ),
			'toggle_slug'     => 'main_content',
		),
	);
}

public function render( $unprocessed_props, $content = null, $render_slug ) {
	return sprintf(
		'<h1 class="simp-simple-header-heading">%1$s</h1>
		<p>%2$s</p>',
		esc_html( $this->props['heading'] ),
		$this->props['content']
	);
}




/**
 * 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 );
	}
}

}

new SIMP_SimpleHeader;`

SimpleHeader.php

@lots0logs

This comment has been minimized.

Copy link
Member

lots0logs commented Jul 19, 2018

Actually the method needs to be put inside your Extension class. Not the module class. Let me know if that solves it.

@CODECRATER

This comment has been minimized.

Copy link

CODECRATER commented Jul 19, 2018

@lots0logs That worked!

One more question: When I go to package and distribute my new custom module, should I include this code or is it only required in the development environment?

Thank you.

@lots0logs

This comment has been minimized.

Copy link
Member

lots0logs commented Jul 19, 2018

It won't have any effect for a production build so its fine to keep it there :)

@pbov

This comment has been minimized.

Copy link

pbov commented Oct 15, 2018

I get this error when adding the function on page reload:

Parse error: syntax error, unexpected 'protected' (T_PROTECTED), expecting end of file in /app/public/wp-content/plugins/my-extension/my-extension.php on line 49

My my-extension.php looks like this:

https://pastebin.com/s06BJ8F9

@mrkenng

This comment has been minimized.

Copy link
Author

mrkenng commented Oct 15, 2018

You should put them in your module PHP file instead. /Includes/modules/

@pbov

This comment has been minimized.

Copy link

pbov commented Oct 15, 2018

Thanks you! In my env it was located under /includes/MyExtension.php

@mrkenng

This comment has been minimized.

Copy link
Author

mrkenng commented Dec 7, 2018

Seems like the latest Divi version is not working with the above code. Getting this. SyntaxError: The URL 'javascript:/sockjs-node' is invalid main.js:69 SockJS main.js:69 ./node_modules/divi-dev-utils/webpackHotDevClient.js webpackHotDevClient.js:62 __webpack_require__ bootstrap 58899f1289d7c92b47a4:678 fn bootstrap 58899f1289d7c92b47a4:88 0 http://localhost:3000/static/js/builder-bundle.js:63130:1 __webpack_require__ bootstrap 58899f1289d7c92b47a4:678 <anonymous> bootstrap 58899f1289d7c92b47a4:724 <anonymous> http://localhost:3000/static/js/builder-bundle.js:1:11

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment