Components not loading asynchronously in BrowserSync

[intositeme]

Am starting a project, and built up my boilerplate with React-habitat.

I'm trying to use BrowserSync to hot reload while developing & have my components load Async but it does not seem to be working.

I see the chuck .js files. When I do a build and test my project, the Async works.

Not sure what's going on.

My Files

Error I get.

Logger.js:33 ERROR: RHW01 Cannot resolve component "HelloWorld" for element. http://tinyurl.com/jxryd3s#rhw01 Error: Loading chunk 0 failed.
    at HTMLScriptElement.onScriptComplete (bootstrap 0f60d233d44349295ea9:756)
    at Function.requireEnsure [as e] (bootstrap 0f60d233d44349295ea9:761)
    at Function.fn.e (bootstrap 0f60d233d44349295ea9:135)
    at Registration._operator (main.js:48)
    at Container.js:99
    at new Promise (<anonymous>)
    at Container.resolve (Container.js:91)
    at _loop (Bootstrapper.js:109)
    at MyApp._apply (Bootstrapper.js:134)
    at MyApp.update (Bootstrapper.js:232) <div data-component=​"HelloWorld" data-prop-name=​"blad">​</div>​
log @ Logger.js:33
error @ Logger.js:100
(anonymous) @ Bootstrapper.js:129
Promise.catch (async)
_loop @ Bootstrapper.js:128
_apply @ Bootstrapper.js:134
update @ Bootstrapper.js:232
setContainer @ Bootstrapper.js:180
MyApp @ main.js:57
_typeof @ main.js:64
__webpack_require__ @ bootstrap 0f60d233d44349295ea9:707
fn @ bootstrap 0f60d233d44349295ea9:112
Object.defineProperty.value @ ReactPropTypesSecret.js:12
__webpack_require__ @ bootstrap 0f60d233d44349295ea9:707
module.exports @ bootstrap 0f60d233d44349295ea9:805
(anonymous) @ main.js:809

[jennasalau]

Hi,

We have not used BrowserSync before.. it looks like there might be a race condition during a hot reload. I'll check out your code this weekend and have a look. Do you have clear steps that i can follow to replicate the error above?

Thanks Jenna

[intositeme]

Thanks alot!

Here's what I did

1. yarn install
2. Setup local domain http://static-site.test/ to point to the project folder's dist folder. For eg. /Users/user-name/Documents/webpack-static-react/dist
3. yarn run build - builds dist folder
4. Go to http://static-site.test in browser. You should see the React component at the top React Component - hello
5. Run yarn run start to start BrowserSync to reproduce the error. It will start and open http://localhost:7000 and display the same page but without the React component. Console will log the error.

[jennasalau]

Hi,

I have cloned your repo and had a bit of a look.

First of all, I was not able to get your site running with your configured plugin browsersync-webpack-plugin.

However, once I installed a more popular and updated browser sync plugin everything seemed to work.

yarn add --dev browser-sync-webpack-plugin

Note this one has a "hypen" in between browser and sync where yours doesn't.

Here is the changes I made in file webpack.config.watch.js:

- const BrowserSyncPlugin = require('browsersync-webpack-plugin');
+ const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

-    new BrowserSyncPlugin({
-      target,
-      open: config.open,
-      proxyUrl: config.proxyUrl,
-      watch: config.watch,
-      delay: 500,
-    }),
+    new BrowserSyncPlugin({
+      // browse to http://localhost:7000/ during development,
+      // ./dist directory is being served
+      host: 'localhost',
+      port: 7000,
+      server: { baseDir: ['dist'] }
+    })

Please note, in my testing I did not configure a 3rd party server to point to dist folder on http://static-site.test.

Can you please try the new suggested plugin and advise if you still have an issue?

[intositeme]

Thanks, but I'm still getting the same issue, my React async component is not loaded under BrowserSync even with the new plugin.

Do you see the React test component in the page?

In resources/assets/scripts/main.js If i load my component non-Async, it works fine.

Here's the error i see in Console.

[jennasalau]

I'm just about to get on a plane so can't elaborate on this answer (on my phone) sorry.

But that error "Error loading chunk" is a webpack error and has nothing to do with React Habitat. Have you tried setting the publicPath in webpack config? It's telling you it can't load that JavaScript chunk thus react Habitat can't do its thing. Check network tab and I bet there is a 404.

And yes in my tests I saw your react component on localhost working fine. Are you getting this error on your 3rd party server at static-site.test or localhost?

[intositeme]

No worries. Appreciate it.

Yes I've tried configuring the publicPath without success.

I'm getting the same problem on both 3rd party server & localhost with the code spliting.

In my main.js if i used line 9, for a regular import without code splitting, it works. So not too sure what's happening. Mean while will continue investigating and try solve it.

[intositeme]

I just checked the Network tab, there are no 404 errors.

[jennasalau]

Hi, there is a 404, i can even see it in your original screen shot:

Failed to load resource: the server responded with a status of 404 (Not Found) __webpack_hmr

I had another quick look, your Webpack configs are not configured correctly.

The most alarming thing I saw was you are prepending scripts/ to the filenames in webpack.config.js line 24

By removing that, then killing assetManifestsFormatter.js and removing publicPath since they are not deployed to a different location, Webpack can now correctly resolve its assets (which i've just confirmed on my local).

Closing this issue as it's not a React Habitat bug and we unfortunately do not have the capacity to offer you further Webpack config assistance.