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
Error loading Snap with webpack #341
Comments
Same problem for me. |
Same problem here |
Is this related to #338 maybe ? |
@ibrierley I checked out back to commit No.#c0b0b5805ecb231 and just felt on the issue you've referenced ! |
Same here |
Same! |
I've found a fairly simple way of pull in Snap with webpack using legacy-loader. Unfortunately Snap uses eval() in certain places (transform() is one area I know for sure) and so Snap is REQUIRED to be on the window. var Snap = require('legacy-loader?exports=Snap!Snap.svg');
window.Snap = Snap; // transform REQUIRES Snap on the window because it uses eval If you want to also get access to other resources that Snap exports (like var SnapLib = require('legacy-loader!Snap.svg');
var Snap = SnapLib.Snap;
var mina = SnapLib.mina;
window.Snap = Snap; // transform REQUIRES Snap on the window because it uses eval A bit involved I know. ES6 destructuring could be used to make it a bit more pleasant. Hope this helps. |
@frank-weindel Could you, please, point where “Snap uses eval() in certain places (transform() is one area I know for sure)”? |
@DmitryBaranovskiy I think this may have been a webpack issue since I can't reproduce it anymore and we were using |
I retract my original comment as |
But still do we have a way to load Snap with webpack, since it doesn't uses |
Here is another recipe var Snap = require( "imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js" ); |
I was also hitting some issues using Webpack. I suggest everybody that for the time being they follow @kapooostin’s suggestion. Works like a charm. Thanks! |
using this in react like
I just added imports-loader to package.json and it works like a charm |
Thanks everybody. I had some troubles moving this to the webpack config because I am still earning my webpack black belt. So I thought I would drop here what I did end up getting to work:
|
@NicholasTuck awesome, totally worked. :) |
Sorry, but still all this things with legacy-loader or with imports-loader doesn`t work In the "webpack" case of course |
I'm using webpack to load Snap.svg for React.js application. |
I found the answer not long afterward. It was because the mix plugins with |
@harryworld thx. Will try! |
Would it be possible to publish a |
Another solution
And use this loader config: {
test: require.resolve('snapsvg'),
loader: 'imports-loader?this=>window,fix=>module.exports=0'
} Currently the npm version is still 0.4.0. Can it be bumped to 0.4.1 please? Seems it was published 11 months ago? |
Any plans on supporting webpack sans workaround? |
Should we build and publish the 0.4.1 version? I would like to use the latests one via NPM and WebPack. |
I published snapsvg-cjs so you can Once this project works out of the box with webpack I'll deprecate my snapsvg-cjs |
Does anyone here have tried configuring Snap on a React Project? |
In Expression Atlas we use Snap and React. Have a look at a component that displays a SVG anatomogram here: https://github.com/gxa/anatomogram |
Thanks @alfonsomunozpomer :D |
@NicholasTuck it works for me ,thanks |
Any word on when this will be done? is the snapsvg-cjs still the best option? |
I would really appreciate if anyone could post all the steps required to get this working in one place |
I'm looking to write tests in Mocha for files that For my built application, I was able to get
However, when you run tests with mocha the Webpack config is not used. Is there a way to use the imports-loader with a .babelrc file? Or a way to get mocha to just return a stubbed Snap.svg? |
@geelen excellent of you to originally do this but is it now abandoned? Last commit Aug 2016, I'm seeing an open PR for the updated snap.svg 0.5.1 submitted in February. |
@88mpg wasn't abandoned just neglected! Just released v0.0.6 which has 0.5.1 |
Another solution, worked for me: before:
after:
and imports-loader:
Big thx to @harryworld for thought about file-loader |
@alfonsomunozpomer, I saw that you're using react-svg in https://github.com/gxa/anatomogram, but I didn't see Snap.svg. Are you still using it? I know it was an old post, but I'm trying to figure out how to integrate complex SVG manipulation (partly generated by mermaid.js) into an app based on create-react-app (which uses Webpack but doesn't expose its configuration options.) I could just have a flow like:
But that seems bad because my SVGs are likely to get big and I'm going to want to be able to treat small parts of them like components themselves. I'm pondering a workflow (if I can figure out how to do it) more like:
Does that seem like an ok approach? There are a lot of parts of it I don't know how to make work yet. |
@Sigfried Please have a look at ebi-gene-expression-group/anatomogram#3 for my reply. |
Thanks, @alfonsomunozpomer! I responded there. But getting something working was easier than I expected. In case anyone's interested, here's some code:
|
Thanks |
I just can't get rid of the feeling that I am constantly developing software in the entirely wrong way. Every time I introduce a dependency I need to change Webpack's configuration and sometimes introduce another loader or plugin. I'm not sure if Webpack helps or just gets in the way. Why not just go back to copy/pasting .js files and writing |
@NicholasTuck's solution worked for me after I put the rule first in rules array. |
@GrushinEgor's solution worked perfectly for me |
@NicholasTuck 's solution worked perfectly for me |
When I try to download snap.svg from the Adobe Extensions site it says :"This Extension is retracted by the partner." It's pointed to all over the web as the best method to create animated SVGs. Please can someone tell me where are the instructions to download and install a working version of it for 2019 use? |
add "<script src="/assets/jslibs/snap.svg-min.js"></script>" to index.html it`s work for me |
See fix for Webpack 4.x with Imports Loader 1.x #639 |
const Snap = require('imports-loader?wrapper=window!snapsvg/dist/snap.svg.js'); it works for me |
When loading Snap (from the dev branch) with webpack.
browser throw error
Uncaught TypeError: Cannot read property 'on' of undefined
from line 1625 in svg.js
The text was updated successfully, but these errors were encountered: