Plugin page is blank on start up
Category plugins
Component All plugins.
Describe the bug
When a user runs npm run start in the plugin directory they created using our create script the page will sometimes not load and will display the following error:
Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH
In the past I think we have thought of this as pretty low priority since it can be fixed by refreshing the page. However, if we want more external developers to write plugins this can be a frustrating experience. Especially, if they do not know what to expect after running npm run start.
To Reproduce
Steps to reproduce the behavior:
- Navigate to a plugin directory.
- Run
npm run start - Notice how the page that is displayed is blank.
Expected behavior The playground should show up. Alternatively, if the amount of time to fix this is really high we should at least print out a message in the console telling the developer to refresh.
Screenshots
Additional context
I believe there's a way to have webpack wait until it's compiled before launching the webpage. (Otherwise there's a potential for the first compile to not be done by the time the page is loading the files)
I looked into this a bit today, and it's actually a bug with the webpack-dev-server: https://github.com/webpack/webpack-dev-server/issues/3204
To fix this we need to update to version 5.0.0 of webpack and version 4.0.0 of webpack dev server :/ I think I'm most of the way there, but I ran into an issue where webpack >= 5 no longer includes nodejs polyfills by default. So I need to look into that.
This is fixed now.