Error: URNs do not have any generally defined hierarchical components
Closed this issue · 15 comments
I was just using the 3.5.13 version of the expression-atlas-heatmap-highcharts, as discussed in #3 . Now I'm getting the following error:
Have you ever dealt with this kind of error?
Hi Max,
It seems that URI.js, the library we use to build URLs, is unhappy about the parameters it’s using to build the URL to load some images in the anatomogram to the left of the heatmp. More specifically, the call that produces the error is the following (simplified):
URI(require(`./img/some_image.png`), atlasUrl).toString()
The above builds the link to img/some_image.png relative to atlasUrl. atlasUrl is by default https://www.ebi.ac.uk/gxa/, so the only way to know what’s going on is to set a breakpoint in the anatomogram code to know what’s the result of the require call. I can help you with that if you want.
The only thing I can think of, right now, is that in your environemnt require returns a URN. If that’s the case, I can reproduce the error you’re getting:
> URI('sch:/foo/bar', 'http://www.ebi.ac.uk/gxa/')
Error: URNs do not have any generally defined hierarchical components
at URI.p.absoluteTo (/Users/amunoz/dev/ebi/ge/anatomogram/node_modules/urijs/src/URI.js:2118:13)
at new URI (/Users/amunoz/dev/ebi/ge/anatomogram/node_modules/urijs/src/URI.js:74:19)
at URI (/Users/amunoz/dev/ebi/ge/anatomogram/node_modules/urijs/src/URI.js:43:18)
Okay, that looks similar! What is the solution for this?
You said you're using Angular, how are you building the project - does your tooling also involve webpack? If not what in your project is processing the requires?
An (unsatisfactory but you might want to go for it if e.g. you need to get something done quickly) solution is to put on your page
https://www.ebi.ac.uk/gxa/resources/js-bundles/vendorCommons.bundle.js
https://www.ebi.ac.uk/gxa/resources/js-bundles/expressionAtlasHeatmapHighcharts.bundle.js
which will populate your environment with the global expressionAtlasHeatmapHighcharts , and call render on that.
@tschaka1904 As @wbazant pointed out, we need to know how your requires are processed and what’s their output to know why URI.js is complaining.
I'm using the Angular-CLI, which runs webpack under-the-hood. @wbazant I'm using your suggested solution at the moment.
How are you processing images in your environment? We use file-loader in our build with the following configuration (the sample is for Webpack 3):
{
test: /\.(jpe?g|png|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
query: {
name: '[hash].[ext]',
hash: 'sha512',
digest: 'hex'
}
}
}]
}
In this way, the image is renamed to its SHA512 hash followed by the extension, which is what the require line will return, resolved to atlasUrl. If you process images in some other way then it will probably fail.
I didn't specify that, as I'm using the Angular-CLI and the whole Webpack config happens under-the-hood.
Max, from the little I’ve read about Angular and Webpack, it looks like there’s a non-editable default configuration.
In light of that, and to solve the issue, could you add just a simple console.log(require('some_image.png') to your project so see how the require is resolved, and then we can look at adding a patch to fix the error? Adding some logging inside node_modules/urijs would also help but maybe it’s not necessary.
Yes. I could get around it and get full control using ng eject, but I'd like to avoid that. To your question:
console.error(require('assets/images/legend/small-mol.png'));
resolves in:
data:image/png;base64,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
I'm not in the office today, but we can have a chat tomorrow.
Yep, as we suspected the image is inlined as a URN with url-loader.
We’ve published a new version of the anatomogram package where this issue is (hopefully) fixed. If you remove atlas-heatmap and anatomogram from node_modules and reinstall it it will pull the latest version. Let us know if that fixes the issue.
Thanks, @alfonsomunozpomer!
It still seems to have problems to find the SVG for the organism image. I'm getting a 404:
https://www.ebi.ac.uk/gxa/homo_sapiens.male.4626c730027e5ff70254.svg
Other than that it starts working:
It looks like when you require a SVG it’s resolved to file.hash.svg. Can you somehow paste the Webpack config that Angular is using or its log? I’d suppose that Webpack is processing homo_sapiens.male.svg and emitting homo_sapiens.male.4626c730027e5ff70254.svg, but it’d be good to know if it’s placing it in some specific directory. I guess that in order to solve this issue we’ll need to add a parameter to specify the location of your assets.
Closing after one month of inactivity.