New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Using external libraries #64
Comments
I haven't played with your example yet, but on the face of it, there are two ways to include external js, both of which we have examples of in
Thanks for bringing this up - let me know if one of those strategies works for you, then we should include more about this in the docs here. Usually the first strategy should suffice, but if for some reason you want to keep the external lib out of the bundle you can use the second. |
Hi Alex
|
Update:
Not sure if that's an issue from the react-leaflet library or dash though. |
@chschoenenberger I tried using the files in your zip but wasn't able to get If you do stick with the second approach though, don't make separate entries for the dev and minified bundles. Use |
@alexcjohnson I created a repo so you can reproduce it properly. This repo is adjusted as you suggested first with the package not specified as external. You can find it here. I'll have another look as well and will let you know if I find something. |
@alexcjohnson So we got it working with the second approach. We had to do some additional stuff which was probably related to the react-leaflet library.
With this steps, the component works in a python environment. However, it won't run in npm, as it is unable to find the global entry of react-leaflet. I pushed the changes to the repo from last time (here). Some of the issue is likely to be from the react leaflet library. However, I think there is some issue in the inclusion of external libraries when working with the boilerplate you might want to look into. I'll leave it to you if you want to close the issue or leave it open for now. Thanks for the help. |
are there separate steps for react packages that use jquery? or should it work off the shelf? |
It seems to be impossible to import and work with external libraries in custom react components. I pinned the issue down on Webpack, which does not include the imported libraries in the final JS which is used by dash in Python.
Expected Behaviour
Code that runs fine using 'npm run start' can be converted to valid python code using 'npm run build:all'. 'python usage.py' can then be used to display the code using Dash.
Actual Behaviour
Code runs fine using 'npm run start'. It can be converted to a dash component, however on using this component calling 'python usage.py' the message: "Error loading dependencies" is shown. The browser console shows, that the component from the external library was not found (TypeError: Cannot read property 'Map' of undefined).
Steps to reproduce
Attached to this report you'll find the necessary files to reproduce the issue with the react-leaflet library. The files included are ['usage.py', 'webpack.config.js', 'App.js', 'index.js', 'DashLeaflet.js', 'index.js', 'package.json']. Make sure to install both react-leaflet and leaflet using npm. Furthermore, file-loader is needed to read an external css sheet for leaflet.
files_to_reproduce.zip
The text was updated successfully, but these errors were encountered: