ebi-gene-expression-group/atlas

errors when building

Closed this issue · 6 comments

ajo2995 commented

I'm working on a react based web app (search.gramene.org) and would like to integrate the react component(s) directly rather than using the global expressionAtlasHeatmapHighcharts. I can get it to work by including the widget and vendor bundles, but was hoping to be able to compile it into my app at build time. Is this possible? discouraged?

The errors I was getting happen while running npm run dev and look like this:

ERROR in ./atlas_bundles/heatmap/src/ExperimentPageHeatmapAnatomogramContainer.jsx
Module not found: Error: Cannot resolve module 'expression-atlas-feedback' in /Users/olson/src/atlas/src/main/javascript/atlas_bundles/heatmap/src
 @ ./atlas_bundles/heatmap/src/ExperimentPageHeatmapAnatomogramContainer.jsx 17:22-58

ERROR in ./atlas_bundles/heatmap/src/Heatmap.jsx
Module not found: Error: Cannot resolve module 'expression-atlas-download-profiles-button' in /Users/olson/src/atlas/src/main/javascript/atlas_bundles/heatmap/src
 @ ./atlas_bundles/heatmap/src/Heatmap.jsx 12:29-81

ERROR in ./atlas_bundles/heatmap/src/Heatmap.jsx
Module not found: Error: Cannot resolve module 'react-addons-shallow-compare' in /Users/olson/src/atlas/src/main/javascript/atlas_bundles/heatmap/src
 @ ./atlas_bundles/heatmap/src/Heatmap.jsx 13:21-60

ERROR in ./atlas_bundles/heatmap/src/Heatmap.jsx
Module not found: Error: Cannot resolve module 'expression-atlas-heatmap-baseline-cell-variance' in /Users/olson/src/atlas/src/main/javascript/atlas_bundles/heatmap/src
 @ ./atlas_bundles/heatmap/src/Heatmap.jsx 29:34-92

ERROR in ./atlas_bundles/baseline-expression/src/BaselineHeatmaps.jsx
Module not found: Error: Cannot resolve module 'expression-atlas-feedback' in /Users/olson/src/atlas/src/main/javascript/atlas_bundles/baseline-expression/src
 @ ./atlas_bundles/baseline-expression/src/BaselineHeatmaps.jsx 13:20-56

ERROR in ./atlas_bundles/differential-expression/src/DifferentialResults.jsx
Module not found: Error: Cannot resolve module 'expression-atlas-feedback' in /Users/olson/src/atlas/src/main/javascript/atlas_bundles/differential-expression/src
 @ ./atlas_bundles/differential-expression/src/DifferentialResults.jsx 18:20-56

ERROR in ./atlas_bundles/baseline-expression/src/BaselineHeatmapWidget.jsx
Module not found: Error: Cannot resolve module 'expression-atlas-heatmap-highcharts' in /Users/olson/src/atlas/src/main/javascript/atlas_bundles/baseline-expression/src
 @ ./atlas_bundles/baseline-expression/src/BaselineHeatmapWidget.jsx 10:24-70

And then webpack hangs.

alfonsomunozpomer commented

Hi Andrew,

The only supported way of integrating our widget in your service is by using the pre-generated bundles.

However, from your pasted output, did you remember to run npm install before npm run dev?

ajo2995 commented

yes. I ran npm i first. Do you have any changes to package.json that are not yet pushed to origin?

alfonsomunozpomer commented

What version of Node.js and Webpack (the global version) are you running?

ajo2995 commented

I'm using node v6.9.1 and webpack v1.13.3

alfonsomunozpomer commented

Sorry, that was a red herring...

The reason why you’re getting those errors is because some of our packages in atlas-modules are dependencies of one or more bundle, but aren’t defined as dependencies for the general build (the top-level webpack.config.js).

The code is organised in the following way:
atlas-bundles → Each directory contains a package for which a bundle will be created
atlas-modules → Packages that are reused in atlas-bundles as dependencies, but produce no bundles

So we generate a bundle JS file for each directory within atlas-bundles plus vendorCommons.bundle.js, which contains third-party library code.

To fix the dependencies within each module run the script build-bundles.sh ci if you want source-maps and dev environment (i.e. console warnings) or build-bundles.sh prod if you want to have production code. The script will run in the last step npm run ci and npm run prod, respectively. It will take a while (about 20 minutes on a laptop with an Intel Core i7 2.5, SSD and 16 GB of RAM).

Once the internal dependencies are taken care of, you should run npm run dev without any problems.

Also, be aware that if you’re already using React or other libraries in your application, you can define those as externals in our Webpack config file.

wbazant commented

Hi Andrew,

After some discussion we've moved the heatmap to its own repository

I've also published it on npm, the version 1.0.0 that it says it has is a bit of a lie, it's just whatever state the widget was in today when I did it. It builds for me when npm install in the middle of the repository, and webpack-dev-server shows me a demo page. Please reopen the issue if it doesn't work for you.

Our official supported way of releasing the new versions of the widget is through hosting the disted bundles like we do now- which makes it fairly stress free, because the users barely notice and it gets updated on all client dependencies at the same time;)
We'll be tagging the versions of the heatmap that make it to production and publish them as minor versions of the widget on npm, or something like that.

  • 🎉1