import error inside async loaded component is hidden by @loadable #420
Comments
|
Loadable thinks that component is "ready", as long as it present in the webpack module cache, and tries to use it. That might be the problem:
In short - there is a bug handling non-network exceptions. However - without React recreating |
|
@theKashey can we do something to fix it in loadable? |
|
I could think only about one solution:
|
|
Could you submit a PR to fix it? |
|
Not to "fix", but to "soften" |
|
I ran into this bug while mixing loadable and lazy - main routes were loaded with loadable and in the code path was also a lazy component which kept showing the error mentioned by the original post. I haven't been able to get lazy to work within our ssr app yet, but will update with more findings at some point. Update: Thank you =) |
|
@FavideDaniel Interesting! So, you created a new package for front end code? |
Um.. I was working on solving a problem at work and it's code that existed prior to the days of solutions such as razzle or next.js. Our specific issue was the conflating of babel + webpack which inadvertently touch the isomorphic code in a way where the evaluation of the webpacked code was running into problems. I did not create a package to solve this. I would consider our issue to be a side-effect of carrying on tech debt. I tackled the issue by tackling that debt, which was to not run babel over code unnecessarily. I moved all the server code away from client code and re-wrote the import and export statements in commonjs. |
|
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
|
I was accidentally exporting non-default exports, but was treating them as default exports with the The solution for me was to change my named exports to default exports. |
|
default export worked for me too! thanks |
🐛 Bug Report
So, just spent a couple of hours debugging this vague error
Not very actionable and very hard to understand. Until you start looking inside loadable.esm
To my surprise, I found this error there:
It was a Graphql gql string that imported
${EMAIL_FRAGMENT}which didn't exist.A 2 seconds fix. If you encounter an error like this, do a debugger break at the error catch in loadable and you will see what's going on.
To Reproduce
Not sure if this is easily reproducible. It might be related to the hierarchy of babel plugins I use.
The component in question was loaded by react-router through
@loadable/component.Expected behavior
The actual error should bubble to the top.
Link to repl or repo (highly encouraged)
Run
npx envinfo --system --binaries --npmPackages @loadable/component,@loadable/server,@loadable/webpack-plugin,@loadable/babel-plugin --markdown --clipboardPaste the results here:
The text was updated successfully, but these errors were encountered: