.JSX, JS, .CSS files not updated after yarn start

[MarieComet]

Problem Description

Doc say running yarn start :
"Runs the extension in development mode. Open your WordPress website to view it.
The page will automatically reload if you make changes to the code. You will see the build errors and lint warnings in the console."
But when I've done some changes to my .JSX files, or CSS files, terminal say "Compiling..." and "Compilled successfully" but after refreshing Visual Builder, my changes doesn't appear.

Sources that are loaded :
../plugins/my-plugin/scripts/builder-bundle.min.js
../plugins/my-plugin/scripts/frontend-bundle.min.js

I need to use yarn build to see changes in the Visual Builder...
No error when compiling.

I'm missing something here ?

• Windows 8
• Node 8.9.4

[MarieComet]

Hi, any news on this ?

[lots0logs]

Sorry for the delayed response! Could you provide a minimal test case that shows the issue (basically a zip file of the minimal amount of your plugin code needed to reproduce the problem)? If not, that's okay we'll still look into the problem.

[MarieComet]

Hi @lots0logs,
Currently the issue show for all my plugins created with create-divi-extension, for examples :
https://github.com/MarieComet/mc-divi-tutorial (very simple)
or https://github.com/MarieComet/mc-divi-custom-modules-react

[MarieComet]

Sorry, I forgot to give you some informations :

1. in the wp-config.php when define( 'MYPREFIX_DEBUG', true ); is set to true, scripts are not found :
   Visual Builder :
   GET http://mysite.local:3000/static/js/frontend-bundle.js?ver=1.0.0 0 ()
GET http://mysite.local:3000/static/js/builder-bundle.js?ver=1.0.0 0 ()

Front end :
Failed to load resource: net::ERR_CONNECTION_REFUSED : http://mysite.local:3000/static/js/frontend-bundle.js?ver=1.0.0

2. When define( 'MYPREFIX_DEBUG', false ); is set to false, minified scripts are loaded.

I think there is a problem with http://mysite.local:3000/static/... because I don't have static folder and because my local WordPress isn't running on 3000 port.

I'm using Local by Flywheel, windows 10.

[lots0logs]

Thanks for those details. They are very helpful! 😃

[MarieComet]

Other info about this isssue :
testing this morning npm start and yarn start on my Ubuntu computer and everything works well, dev files are loaded, so I can tell you that's a Windows problem (again 😄)

[vikfx]

Same issue for me using Docker on Windows 10 Pro but everything works fine if I edit files inside the container.
Solved by editing watchOptions inside ...\my_plugin\node_modules\divi-scripts\config\webpackDevServer.config.js (on line 63) :

watchOptions: {
      ignored: ignoredFiles(paths.appSrc),
      poll: true
 },

With the poll option set to true everythings works now when editing files on windows

[mayureshgoyal]

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

[luisnomad]

Hi everyone! I have started using create-divi-extension today. I am not sure I understand the link between the local server started by yarn start and my WordPress site running in Apache. I have tried the hot reloading feature but it doesn't work. Also, I have to manually run yarn build to see any changes. This is probably because I don't see the big picture, the connection between my WordPress server and the development server.

Could you please provide an example of the whole setup? Where do you run WordPress in your case? How do you avoid having to build to see the changes? Or is that needed?

Thanks a lot!

[lots0logs]

Running yarn start launches webpack-dev-server which compiles your javascript code and styles and then watches the source files for changes and re-compiles automatically when a change is detected.

[ellie-me]

Having the same issue, I'm using Lando with Ngix and docker 2.1. Yarn start does not handle hot reload properly and thus I have to rebuild every time I want to see any changes.

[anygreen]

Also having the same issue. yarn start doesn't compile .jsx files.
Windoes 10 Pro, MAMP 4.1.1
Need to rebuild after every change... :(
The "poll" trick from vikfx didn't work unfortunately.

[danielvoelk]

I have the same issue. yarn build doesn't compile anything..

[tarikhamilton]

I was having this issue as well and I solved it after many hours, so I hope this helps someone.

I'm using macOS 10.14 and serving WP using Laravel Valet. npm run build is fine. npm start starts fine, watches successfully as it says compiling whenever I save changes, but the files themselves do not update.

This was two problems rolled into one:
1.) I needed my ${MY_EXTENSION_PREFIX}_DEBUG to be set to true.
2.) I needed to override my script paths on my DiviExtension class. (link to code)

The possible source of the issue was posted in this issue, but may have been missed.

@lots0logs answers:

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 added define( 'MYPREFIX_DEBUG', true ) to my Divi plugin's main file and it fixed the paths. I think some people may have permission issues or maybe what is setup only well if you're using the Divi Docker stuff. I'm not sure if you need to add it to wp-config, but it was more convenient for me to add it here and it works. I may make a Node script to add/remove the constant until the real fix is figured out.

So, @MarieComet, I see you had no errors and your script paths are to the built files. You probably have this same issue as me. Try the solution out.

[cedricDevWP]

Hi

I use bedrock for my WordPress website and i have the same problem.

I need to run yarn build for see the change in visual builder... Yarn start don't apply the change.

I develop on Mamp..

someone has ever had this problem ?

---

I found my problem, i added in my config file the constant :

Config::define("MYEX_DEBUG", true);

I thought the constant of debug was that of WordPress (WP_DEBUG)

If you need help configuring with bedrock tag me

[rvanderlaan-dig]

Any update on this? I'm learning on my own custom module and I never know if my changes are just not working or not updated/compiling.

[soffunicorn]

I have the same problems the css fields are not loading and refreshing it, even the local server is not load!

[nexus-mediapark]

Other info about this isssue :
testing this morning npm start and yarn start on my Ubuntu computer and everything works well, dev files are loaded, so I can tell you that's a Windows problem (again )

I'm currently working on ubuntu 20.04 running vagrant/Homestead and having the same issue.
To see the changes I did in the frontend editor I need to run yarn build - the watcher doesn't work and would just display
function(t){return r.default.createElement(E.default,V({rawContentProcesser:C.default.replaceCodeContentEntities},e.props))}

Weird as none of the solutions I've read won't work :/

This is what I get in the browser console:

Cheers

[msykes]

I hope this helps someone... I've tried all these solutions to no avail. 'yarn build' or 'npm build' works but not the 'yarn start' or 'npm start' functions.

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!