Uncaught TypeError: Cannot read property 'Symbol(loadable)' of undefined about loadable-components HOT 23 CLOSED

A disclamer about this in README.md could save some time and headaches

from loadable-components.

Hello, can you please give me the full environment? 6553 is very huge number, I don't think you have 6553 code splitted modules!

from loadable-components.

I have only 4 chunks. I can't show you full code because I already switch it to my own solution.

from loadable-components.

Can you describe some parts of business logic?

• server renders html after getLoadableState() which needed for loadableState.getScriptTag()
• getScriptTag() return some components IDs
• page loads, loadComponents() loads components with IDs from previous step. Why do we need that? I thought that BrowserRouter should load modules according to routing.

So, why we need loadComponents and components IDs when we have BrowserRouter

from loadable-components.

It is needed to prevent the page blink at load. We have to require all modules before starting to render application.

from loadable-components.

I think you have a problem of server-side module caching, that's why the id is 6553.

from loadable-components.

I render server side (in development) using babel-node without webpack. Maybe problem there. What do you think?

from loadable-components.

I am doing the same and I don't have any problem...

from loadable-components.

Have you solved your problem? I would be happy to see all the stack to understand the problem. Do you have Hangout?

from loadable-components.

I didn't solve it. I move to my own solution. It's more verbose but without loop over the components tree. I download component corresponding to current route.
Client and server render also without promise resolving. Several routing files allows to achieve that.

from loadable-components.

@max-mykhailenko not very scalable but it works ;)

from loadable-components.

I'm having this same issue. Any resolution to this?

from loadable-components.

Seems like componentTracker.get(id) is empty. Also the id seems to change every render, even on the same page, so maybe loadable state is out of sync somehow?

from loadable-components.

Yes probably, I need to investigate it more deeply. Do you have any example repo to reproduce it?

from loadable-components.

I also have it, so far I see that I have 16 bundles and it fails when it tries to get bundle with id 17 that doesn't exist.

Added:
When I change to only one dynamic bundle it tries to get bundle with id 1 and fails.
Seems like loadable() is called twice in some cases therefore track() is called twice and id becomes incorrect

from loadable-components.

I have to investigate it. I think the approach is too simple and weak. Approach taken by react-loadable is heavier but probably more resilient.

from loadable-components.

Possible solution could be also passing this id as an argument for loadable() and using this passed id not only for inner reference but also as generated bundle name (instead of 0.js, 1.js etc). Maybe it would be also an idea to investigate why loadable() is called this one additional time. Sorry didn't have time to dig deeper, have a lot of pressure on work and your library was a big help, thank you very much! :)

from loadable-components.

I discovered one more problem with Symbol(loadable) in index.js:115 in check instance.constructor[_constants.LOADABLE]. If you inspect instance in chrome dev tools you can find field Symbol(loadable) in the object, but if you try to access it - it returns undefined. The problem is reproducible only on production(webpack) build on server side.

from loadable-components.

Same issue here.
In my case the reason (I guess) is that I have used loadable in non-main chunk, so component tracker don't know about this component when loadComponents called.

So it seems like all loadable calls should happen in main chunk.

from loadable-components.

It is a known issue, unfortunately I would not be able to solve it without a Babel plugin or some additional code. Still thinking about a simple way to do it.

from loadable-components.

Would there be a easy way to disable code splitting on dev, based on some environment variable or webpack config? I don't mind not having code splitting during dev, it's more important that I don't have to kill the server to be able to refresh the page.

from loadable-components.

@FabioAntunes the next version of React Hot Loader will be compatible with Code Splitting. I think about a way to make it compatible with loadable-components with zero config.

from loadable-components.

This long issue is now solved in v1. I close this issue because it was relative to the previous version. Feel free to open an issue if you experience any problem with the new fresh v1 of loadable-components.

from loadable-components.